0

I have set up a page that is still in construction and i'm building a webform for users to contact me.

When i fill the webform and hit the "send" button, message gets send succesfully and i receieve it on my mail...but when i hit the "send" button, i get re-directed off page, saying it was sent successfully.

How can i prompt user that the message was sent successfully, without getting redirected of page, and get the message in same window?

This is my HTML code

<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
      <div class="row">
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
        </div>
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
        </div>
      </div>
      <textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <button class="btn btn btn-lg">Send Message</button>
        </div>
      </div>
    </form>

And this is my contactUs.php code

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$message = <<<EMAIL

$message

From: $name

My email is: $email

EMAIL;

$to = "[email protected]";
$subject = "New Customer Enquiry";

mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";

?>

AJAX

<script        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"     type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(),     function(msg){
    alert(msg);
} );
});
});
</script>

This is a result of successfully sent message.

Error

Please guys help me out! Thanks!

REDIRECT OPTION

$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);
Improve this question
3
  • In order to accomplish a dialog like you wish, you will need to use javascript with ajax that submits your POST data instead of doing a full page load Commented Mar 25, 2015 at 16:43
  • 2
    you get redirected because of your form action. You could consider using ajax Commented Mar 25, 2015 at 16:43
  • isn't there any easier option? i'm really bad with javascript and i still have so much to learn Commented Mar 25, 2015 at 17:05

4 Answers 4

Reset to default
1

Use Ajax as below.Change the submit type button to a normal button by removing the type attribute.

<script        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"     type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(),     function(msg){
    alert(msg);
} );
event.preventDefault();
});
});
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you this works, but after that i still get redirect to "assets/php/contactUs.php" and get the same message again.
Did you change your button - remove the type attribute: <button class="btn btn btn-lg">Send Message</button>
yes sir i did. Do i have to change anything in my .php file? We'll i'll just post my edited code so you can have a better look at it
You dont need to change anything in .php. Post your updated code here
you can take a look at it
|
0

The action part of your form tag is "assets/php/contactUs.php"

<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">

That means that posting this form will bring you to that page. You can either code that page to send the email and redirect them back like this...

header('Location: '.$firstpageurl);

or put the php code into this first page and remove the entire action property. If you put the php on this page, you need to wrap your code in an if so that people can load the page before posting the form.

    if (isset($_POST['email'])){
      echo "Sent email";
      [email send code here]
    }

as for putting the message saying it's sent...that will only work with the second method. To do it without a full page load at all do it with ajax.

Improve this answer

3 Comments

The "redirect choice" seems easier to me. But somehow i dont get redirected. Anything bad with my code? Can you please look @ the edited post. And sorry im new to php (actually started 2 hours ago) so i'm really newb at it.
You have echoed some text before your redirect. That means php has sent headers, then echoed text. You need to put your redirect before any text has been written, and that includes an empty line with just a carriage return. One common workaround if you must tell people that they've submitted the form, it to make another special page with that thank you message and redirect them there, and on that page make it easy for them to click back to the original content page. It sounds like you're using a cms and can't have php on you content pages?
Another workaround is to build your php page like I said in option 2 with an if. And from your cms put an iframe pointing to your form. Then you can have your success message.
0

You want to use JQuery for that.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
    var form_data=$("form").serialize();
    $.post( "assets/php/contactUs.php",form_data, function( data ) {
        alert(data);
    });
    event.preventDefault();
});
</script>
Improve this answer

5 Comments

does it alert you after clicking the send button?
nope, i get stuck at empty "assets/php/contactUs.php" page
also remove '$header('Location: '.$firstpageurl);' in your php file.
i have no idea why isn't it working then. have u checked out my html code?
do i need type submit in my button or not ?
0

You can do it without using Javascript. Do the following:

  1. Set the form to post to itself (e.g. if your form was on index.php, set action="index.php"
  2. When the page loads, check $_POST to see if the form values were sent.
  3. If the $_POST values are empty, display the form
  4. If the $_POST values are set, do what you need to do with those values, then output your results into the page.

Here's a really simple example demonstrating what I mean.

<?php
  $submitted = false;

  if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
    $submitted = true;
  }
?>
<?php
  if ($submitted == false) {
?>
  <form action="index.php" method="post">
    <input name="myinput"><input type="submit">
  </form>
<?php } else { ?>
  <h1>Form Submitted</h1>
<?php } ?>
Improve this answer

1 Comment

thank you very much for your input, but i have solved problem with other solution. hopefully yours will help some1 else some day.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.