display thank you message when contact form submitted

forms twitter-bootstrap alert contact

18,474

Using Ajax makes it easy. here is what I use for simple sends:

The js:

$('#form_id').on('submit', function(e) {
    e.preventDefault(); //Prevents default submit
    var form = $(this); 
    var post_url = form.attr('action'); 
    var post_data = form.serialize(); //Serialized the form data for process.php
    $('#loader', form).html('<img src="../img/forms/loader.gif" /> Please Wait...');
    $.ajax({
        type: 'POST',
        url: 'process.php', // Your form script
        data: post_data,
        success: function(msg) {
            $(form).fadeOut(500, function(){
                form.html(msg).fadeIn();
            });
        }
    });
});

The process.php:

<?php

/* Configuration */
$subject = 'Submission received'; // Set email subject line here
$mailto  = 'your email address'; // Email address to send form submission to
/* END Configuration */

$firstName      = $_POST['firstName'];
$lastName       = $_POST['lastName'];
$email          = $_POST['email'];
$companyName    = $_POST['companyName'];
$phone          = $_POST['phone'];
$callTime       = $_POST['callTime'];
$timestamp = date("F jS Y, h:iA.", time());

// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>Name</b>: $firstName $lastName<br>
<b>Email</b>: $email<br>
<b>Company name</b>: $companyName<br>
<b>Phone number</b>: $phone (Please call in the <b>$callTime</b>)</p>
<p>This form was submitted on <b>$timestamp</b></p>
";

// Success Message
$success = "
<div class=\"row-fluid\">
    <div class=\"span12\">
        <h3>Submission successful</h3>
        <p>Thank you for taking the time to contact Pacific One Lending. A representative will be in contact with you shortly. If you need immediate assistance or would like to speak to someone now, please feel free to contact us directly at <strong>(619) 890-3605</strong>.</p>
    </div>
</div>
";

$headers = "From: $firstName $lastName <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";

if (mail($mailto, $subject, $message, $headers)) {
    echo "$success"; // success
} else {
    echo 'Form submission failed. Please try again...'; // failure
}

?>

18,474

Author by

Admin

Updated on June 29, 2022

Comments

Admin almost 2 years
Ok, so I've looked on the forum and see similar questions to this, but i'm still not getting anywhere with the code i've pilfered from various pages.

I'm using bootstrap css to display a contact form, usual fields, name email, message etc. The action="process.php" which is where I add the user into a mysql database and then email me a confirmation that someone has submitted the form. So all is well on that front, just that I want to display a simple "thank you" message once the form has been submitted, but not by redirecting to another page.

I have the following for a message:
```

<div id="thanks" class="alert alert-success fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Got it!</h4>
  <p>Thanks. I've received your message, I'll be in touch within 24 hours. Promise.</p>
</div>
```
and then use this js to add the "in" to display it once submitted:
```
$('#send_button').click(function () {
    $('#thanks').addClass('in'); 
});

$('.close').click(function () {
    $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});
```
I briefly see the thank you alert message, but then I get redirected to "process.php" and this doesnt display anything as theres no html within, just the mysql stuff and php mailer. Another point to note, whether this is of interest, I load the contact form initially by ajax so the url is like wdr/index.php#contact

Can someone help me finish the code. I'm sure its something simple I'm missing to make this work as it should.

Any help appreciated.

Col
Admin almost 11 years

hey thanks for the reply and the code. from what i can see this still loads the thank you message in a different page from the contact form. i'm looking to 'show' a thanks message next to the form once its submitted without having to reload a page. i think its something easy to do, just cant suss the code out. ps. i like your mailer code, i'll be using that!
Joe Conlin almost 11 years

Actually the thank you block should be loading in place of the form. If you can post your code on JSFiddle, I'll take a look and see what the problem is.
Admin almost 11 years

hmm, having trouble getting it on fiddle and working as i have it this end. I'm sure you're right, therefore i'll play around with the code this end and let you know. thanks for your time and suggestions.
Admin almost 11 years

Just a quick update to this, as expected I was doing something wrong and your code works a treat. Many thanks for submitting, this really has helped me out no end. Cheers!