LearnHow to Create an AJAX Contact Form for a Website [Guide]

Matt West
writes on March 12, 2014

Conversions don’t always equate to purchases or transactions, they can also appear in the form of newsletter sign-ups and contact forms. Contact forms are one of the most common features on a website. Standard contact forms work just fine, but you can make them nicer by using AJAX to submit the form data in the background.

In this blog post, you’ll learn how to create a website contact form that submits the form data using AJAX. We’ll be using jQuery to help simplify the JavaScript code and a simple PHP mailer script to handle sending the form data via email.

Let’s get started.

Step 1: Building the HTML Form Using jQuery

We’ll start by setting up the HTML form that will collect data from the user. Give your <form> element the ID ajax-contact, set the method attribute to post, and the action attribute to mailer.php.

<form id="ajax-contact" method="post" action="mailer.php">
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="field">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="field">
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
    </div>

    <div class="field">
        <button type="submit">Send</button>
    </div>
</form>

Here you’ve set up a simple form that has fields to collect the user’s name, email address, and message. Notice that each of the form fields has a required attribute. In browsers that support HTML5 form validation, this will prevent the form from being submitted until all the fields have been completed.

Next you need to create a <div> element that will be used to display success and error messages to the user. Create this element above the <form> in your HTML markup and give it the ID form-messages.

<div id="form-messages"></div>

Now you need to download the code resources and copy the style.css file into your project directory. You’ll also need to add a <link> element that tells the browser to load the stylesheet.

<link rel="stylesheet" href="style.css">

Finally you need to create two <script> elements that reference the jquery-2.1.0.min.js and app.js files. Add these just before the closing </body> tag.

<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>

It’s important that you load the jquery-2.1.0.min.js file first as the code within app.js requires jQuery.

That’s all the HTML you’re going to need in this post. Next up, let’s take a look at the JavaScript.

Step 2: Submitting the Form Using AJAX

Create a new file in your project directory called app.js. This is going to contain all of the code responsible for submitting the form data using AJAX.

Copy the following code into the app.js file.

$(function() {
    // Get the form.
    var form = $('#ajax-contact');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // TODO: The rest of the code will go here...
});

Here you’ve created two new variables, form and formMessages, that reference the corresponding elements in your HTML markup.

Next you need to create an event listener that will intercept submit events on the form. You can do this using the jQuery submit method.

// Set up an event listener for the contact form.
$(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // TODO
});

Here you’ve passed a function to the submit method that will be executed when the user submits the contact form. You’ve also told the browser not to submit the form as it would normally by calling the preventDefault method on the event.

Next you need to serialize the form data. This will convert the data the user has entered into the form into a key/value string that can be sent with the AJAX request. Use the jQuery serialize method to serialize the form data and then store the result in a variable called formData.

// Serialize the form data.
var formData = $(form).serialize();

Now you’re ready to write the code that’s responsible for sending the form data to the server and processing the response. Copy the following code into your app.js file.

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
})

Here you’re using jQuery’s ajax method to create a new AJAX request. You’ve passed an object to the ajax method that contains a number of properties used to configure the request. The type property specifies the HTTP method that will be used for the request, in our case POST. The url property is the location of the script that the form data will be sent to. You’ve populated this property by fetching the action attribute from the form. Finally, the data property has been populated using the formData variable that you created earlier.

Next you need to handle a successful response from the server. Copy the following code directly after the closing bracket of the ajax call. Note that I’ve deliberatly left out the semi-colon.

.done(function(response) {
    // Make sure that the formMessages div has the 'success' class.
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');

    // Set the message text.
    $(formMessages).text(response);

    // Clear the form.
    $('#name').val('');
    $('#email').val('');
    $('#message').val('');
})

This done method will be called if the request completes successfully. Here you first make sure that the formMessages element has the success class and then set the text content of this element using the data returned by the mailer script. To finish, you clear out the values from each of the form fields.

The last bit of JavaScript you need to write handles what should happen if an error occurs. Copy the following into app.js.

.fail(function(data) {
    // Make sure that the formMessages div has the 'error' class.
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');

    // Set the message text.
    if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
    } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
    }
});

This fail method is called if the mailer script returns an error. Here you first make sure that the formMessages element has the error class. You then check to see if the AJAX request returned any responseText. If it did, you use this text to set the content for the formMessages element; otherwise use a generic error message.

That completes the HTML and JavaScript code that’s needed to build an AJAX contact form. In the next section you’re going to learn about the mailer script that is responsible for processing the form data and sending out an email.

Step 3: Creating the PHP Mailer Script to Send Emails

Now it’s time to write the PHP mailer script that will process the form data. This simple script is responsible for checking that the form data is valid and then sending out the email. If an error occurs, the mailer script will respond with an appropriate status code so that the JavaScript within the fail callback you wrote earlier will be executed.

Create a new file called mailer.php and copy into it the following code.

<?php

    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
				$name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "hello@example.com";

        // Set the email subject.
        $subject = "New contact from $name";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been sent.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

Update: Thanks to Aaron Traas for his modifications that make this mailer script more secure.

This script starts by checking that the request was sent using the POST method. If it wasn’t, the script will return a 403 (forbidden) HTTP status code and an error message.

Once you’ve established that the correct HTTP method has been used you then extract the form data into three variables $name, $email, and $message. You also use the PHP trim method here to cut out any unwanted whitespace.

Next you will check to make sure that none of these variables is blank. If one or more is blank, set the response code to 400 (bad request) and return an error message to the browser.

Now that you’ve determined the data is clean, you prepare the email, first by creating a variable with the email recipient. You then create variables for the subject, email content, and finally the email headers.

Note: Setting the email headers is optional. Doing so will make the email appear as though it was sent by the person that filled out the form. However, it’s important to note that manipulating the headers like this can also cause the email to be marked as spam by some email clients.

Next you will attempt to send the email using the PHP mail function. If this is successful, you will return a success message. If it’s not, you need to set the response code to 500 (internal server error) and return an error message.

Note: The standard PHP mail function will do just fine for the purposes of this blog post, but there are more robust ways of sending email using PHP. If you’re interested in learning more, I recommend that you check out the Build a Simple PHP Application project on Treehouse.

That’s it! You’re all done.

Load up your HTML file in a web browser and try out the form. You’ll need to be using a web server with support for PHP and the mail function for everything to work correctly.

Final Thoughts

In this blog post, you’ve learned how to create a contact form that uses AJAX to communicate with a mailer script on the server. You’ve used jQuery to help simplify the JavaScript code, but you could have achieved the same result with standard JavaScript.

Using AJAX within your websites allows you to improve the user experience in a number of different areas, not just contact forms. Next time you’re building a website, ask yourself how AJAX could help to create a smoother experience for your users.

Useful Links

If you’re looking to take your JavaScript or HTML5/CSS programming skills to another level, check out our Techdegrees in Full Stack JavaScript and Front End Web Design. Our faculty of tech professionals guide learners like you from mastering the fundamentals of coding to polishing the skills of a job-ready software developer. Try one of them out with a free seven-day trial today.

144 Responses to “How to Create an AJAX Contact Form for a Website [Guide]”

  1. huy on April 6, 2018 at 3:58 am said:

    thanks so much!!!

  2. Hobo Queen on March 5, 2018 at 7:57 am said:

    Thanks so much! This was very helpful!

  3. Sunil on March 2, 2018 at 12:58 am said:

    Thank you 🙂

  4. Anelie on February 25, 2018 at 6:54 pm said:

    THANK YOU SO MUCH my project deadline is coming and you saved my life

  5. Edward on February 15, 2018 at 3:18 am said:

    Great tutorial. A Github link or download would be nice to avoid having to piece the code together.

    Thanks tho!

  6. Marius on February 5, 2018 at 4:42 am said:

    Thank you, it is very useful! I highly appreciate your help!

  7. FarrahLiana on January 26, 2018 at 7:00 pm said:

    Thank you so much and it is really works. The explanation is really easy to understand for a newbie like me hehee. Thanks 🙂

  8. Delio on January 26, 2018 at 10:47 am said:

    I am a junior developer and I learned a lot with this great and easy to understand tutorial.
    Thank you very much. It works perfect 🙂

  9. CC on October 15, 2017 at 2:12 pm said:

    Hey there, thank you for the code. I have found that when using it some submissions are going through and some are not. They’re not being caught in my email’s spam filter, they’re just not showing up at all. What could cause this?

  10. ver on October 3, 2017 at 3:34 pm said:

    hi there

    i just wish to get rid of the php processing – -and implement it in javascript as well or combination of js html/ejs files from node.js express (jquery if needed)– any help ideas – appreciate thx

  11. Salvador Galindo on September 11, 2017 at 8:32 pm said:

    Hola agradezco tu aporte para que se pueda aprender, mira estoy tratando hacer jalar tu ejemplo todo parece estar al pie de la letra, además de compararlo con el recurso que proporcionas, pero me aparece el siguiente error:

    http://grupodehum.mx/conferencistas-humanistas/ajax-contact-form-demo/mailer.php 500 (Internal Server Error)

    en el archivo mail. php puse únicamente el correo al que quiero que lleguen los correos y probe con hotmail, gmail y aparece el mensaje “Oops! Something went wrong and we couldn’t send your message.”, que estoy haciendo mal? agradeceré tu apoyo, saludos

  12. Stratton on September 7, 2017 at 11:29 am said:

    Hi, I have this enabled on a couple of other website but for some reason Im getting the “Ooops! An error occured and your message could not be sent” message on this one. The form is actually posting and the email is being delivered but Im getting the wrong message displayed after hitting send. It seems like the .done and .fail functions are not working. Has anybody else experienced this?

  13. Harsh on August 20, 2017 at 7:03 am said:

    Hi,
    I am using xampp server, After Submitting the form I am getting the message “Thank You! Your message has been sent.” But I didn’t get any email, I had changed the recipient content in mailer.php with my email address. can you please help.

    Thanks in Advance.

  14. ClassikD on August 9, 2017 at 11:06 pm said:

    In the Javascript part there is no need to call $() function each time you want to access the DOM elements.
    The variables “form” and “formMessages” you created already contain references to them.
    More simply :
    …
    form.submit(…
    …
    formMessages.removeClass(‘error’);
    …

  15. Mike Zheng on June 24, 2017 at 12:56 am said:

    Thanks a lot Matt, years has been past and it’s still works great !
    I made few changes and it’s functioning well in my website, see demo here:
    https://www.mike652638.com/demo/mail-form.html (In Chinese Language however :))

  16. Andre on March 3, 2017 at 6:05 am said:

    Hi, I hope somebody can help me. I’m not a programmer, I only did exactly what was described here.

    The email message actually gets sent once everything is filled out and submitted correctly. But here are the problems I couldn’t solve yet.

    1. The “required” attribute in the HTML form seems to work fine in Chrome but it doesn’t work in Safari. Safari will let me submit the form and then show the error message on of the mailer.php on a blank page “Oops! There was a problem with your submission. Please complete the form and try again.”

    2. No matter if a submission is successful or not the result message will always be shown on a blank page (with …/mailer.php) in the address bar). Of I course I want to have the success or non-success message shown on my styled page where the HTML form is located and not on a blank page.

    I hope somebody can help me. Thanks in advance.

  17. mus on March 1, 2017 at 2:26 pm said:

    Please I need your help, I got and ERROR like this (I’m using WAMP server) Thanks

    ( ! ) Warning: mail(): Failed to connect to mailserver at &quot;localhost&quot; port 25, verify your &quot;SMTP&quot; and &quot;smtp_port&quot; setting in php.ini or use ini_set() in C:\Users\cysca\projects\SiteWeb\mailer.php on line 38 Call Stack #TimeMemoryFunctionLocation 10.0010251560{main}( )…\mailer.php:0 20.0012252920mail ( )…\mailer.php:38 Something went wrong and we couldn’t send your message.

    • Keith on October 4, 2017 at 8:03 pm said:

      I think you will find it doesn’t send because most “local hosts” like Xampp, wamp etc. do not have a mail server built into them.

      You may need to find (if you don’t have one already) an online server and load your files to there then give it a run – this is just a suggestion, and a possible solution

  18. Deb on February 17, 2017 at 5:20 am said:

    Hi,
    Why do we need to mention method=”post” action=”mailer.php” within form itself if we are using jQuery ajax for the same?

    Thanks

  19. dj on February 16, 2017 at 10:57 am said:

    Hi. Your codes are very useful but I have a problem, I received the email if I put my email in the $recipient = “sample@gmail.com”; but if I changed the recipient nothing happened. Can you please help me ?

    Thank you !

  20. Orlando on February 3, 2017 at 4:24 pm said:

    Hello there.

    Just a quick fix:

    I changed this:

    $(function() {

    to:

    jQuery(document).ready( function ($) {

    and everything worked like wonder 🙂

    Hope it helps

  21. Sebastian Lofaro on January 5, 2017 at 8:39 pm said:

    I get a `405 (method not allowed)` error. Could this have something to do with me running the site on a development server I set up in terminal?

    Here is a link to my GitHub repo: https://github.com/sebastianlofaro/Colleen-Neal . The project has a long way to go…

    Any help would be much appreciated!

  22. 草泥马 on November 28, 2016 at 11:32 pm said:

    Great post. I’m experiencing many of these issues as well..

  23. Javi on November 15, 2016 at 7:53 am said:

    Nevermind, I found the conflict, it was with “modal”.

  24. Javi on November 15, 2016 at 7:31 am said:

    I had this code on my site working fine until I integrated the a new design. The bootstrap.min.css file is causing a conflict. The form only works when I remove it. Not sure how to find the exact spot of the problem.

    Thanks!
    Javi

  25. Nicolas on October 16, 2016 at 4:54 pm said:

    Hi,

    I did everything explained in your tutorial, but it’s not working.

    First of all, it go to my mailer.php instead of staying on my HTML page.
    Secondly, I always get the first error about (empty($name)…). My fields are not empty…

    Thank you

  26. Dmitri on September 21, 2016 at 7:07 pm said:

    I copied the code into app.js but the order of the jQuery was unclear because of all the // TODO’s. When I submit the data it sends me to the mailer.php page, rather than remaining on the contact form page. So next I copied the .js from James’ comment and tried it – same result. Can you post a copy or link to the app.js script? Tx

  27. Daniel Devlin on September 21, 2016 at 5:54 am said:

    I have created a contact form for my website but had a few nagging issues I wanted to clear up, big thanks for posting.

  28. gapsel on September 8, 2016 at 2:42 pm said:

    Ajax is very hard. But I’m trying to make it. Thanks for information.

  29. Paul Smith on August 18, 2016 at 5:48 am said:

    Thanks for the great form script Matt. It works well for me and everytime i’ve tested.

    But typically someone is managing to get to the error message “Oops! An error occured and your message could not be sent.” which is in app.js.

    I can get some of the other error messages which are picked up earlier but really cant replicate this. How could someone trigger this if they’ve filled the form in right? Could it be a shared hosting issue?

    In theory could the piece of code that governs this in app.js be taken out entirely and perhaps fix this?

    .fail(function(data) {
    // Make sure that the formMessages div has the ‘error’ class.
    $(formMessages).removeClass(‘success’);
    $(formMessages).addClass(‘error’);

    // Set the message text.
    if (data.responseText !== ”) {
    $(formMessages).text(data.responseText);
    } else {
    $(formMessages).text(‘Oops! An error occured and your message could not be sent.’);
    }
    });

    Thanks!

    • Matt West on August 23, 2016 at 12:38 am said:

      Hi Paul,

      Try changing this line:

      $email_headers = “From: $name <$email>“;

      to:

      $email_headers = “Reply-To: $name <$email>“;

      There was recently some changes to a few different mail providers that no longer allow the From header to be spoofed. Using Reply-To instead should work.

  30. Paul on June 12, 2016 at 4:18 pm said:

    Hello!

    After I was creating js file with your tutorial, then I’ve got content of the php file, I mean simple test message I wrote there.

    When I filled the php file with the right code, then I get only adding “success” CSS class on message block, but nothing I receive on mail?

    Why was that happen?

    Thank you

  31. Gary Bailey on June 4, 2016 at 7:27 pm said:

    Thanks for the tutorial Matt! Just one question, why are you using the strip_tags function in your php?

  32. Sandesh on June 4, 2016 at 1:16 pm said:

    The tutorial was very nice & easy to follow. Some type of captcha would be great with more protection on server side e.g. XSS if working with database,etc. So, it would be secure for all types of forms e.g. signup,login,etc.

  33. Thingy on May 23, 2016 at 11:40 am said:

    Thanks man, finally an AJAX form script that actually works. You made my day!

  34. Kyle on May 16, 2016 at 4:22 pm said:

    Thanks for the snippet! However, emails from Yahoo addresses do not send. The message shows that it sent, but it does not actually send. Is there a fix for this? (This has happened multiple times)

  35. Aaron Ransom on May 2, 2016 at 9:53 am said:

    Hey! First, thank you for providing this form! By no means am I a developer who would’ve been able to build this on my own and getting a contact form to work properly has turned out to be one of the most challenging things to find info for online.

    Everything with the form works as is. But, I’m trying to modify the code to get have the page redirect to a thank you page after successful submission. Any idea how I might be able to make this happen?

    So far, I’ve tried modifying the mailer.php file and app.js. Any help would be greatly appreciated!

    • Faye Bridge on May 4, 2016 at 9:19 am said:

      Hi Aaron! As this is an older post, I’d recommend asking your question in the Treehouse Community. Treehouse students and teachers are always happy to help. 🙂

    • Thingy on May 27, 2016 at 1:26 pm said:

      Aaron,
      AJAX is specifically for loading/refreshing page elements individually, without having to reload the whole page. The same-page completion is intended here.

      If you want to be redirected to a separate ‘thank you’ page, you’ll have to look for a php mail script without AJAX.

  36. Blosiu on April 27, 2016 at 12:45 am said:

    Hello, Everything works perfectyl, but I have got one main problem – polish signs. Do you know where to add charset=utf-8′) in order to have polish letters? PLEASE help 🙂

    • Faye Bridge on April 27, 2016 at 8:08 am said:

      Hi there! I’d suggest asking your question in the Treehouse Community. Treehouse teachers and students are always eager to help answer questions. 🙂

    • sandy on May 10, 2016 at 5:10 pm said:

      HI Aaron, I’m no developer either, but I think Ajax automatically creates the “Thank you message” on the same page. I was trying to work on the contact form so it won’t redirect to a new page and some people on the forum told me to use Ajax. I think if you want to create a “Thank you” page that redirects to a new page, maybe it’s best not to use Ajax for that. But that’s just my guess! Go to this forum and check it out and post your questions on here. People respond pretty quick.

      https://www.sitepoint.com/community/t/my-php-works-but-error-messages-are-not/223516

      I used php contact form and it always redirected to a new page. I hope this helped!

      • Thingy on May 27, 2016 at 1:22 pm said:

        Sandy,
        AJAX is specifically for loading/refreshing page elements individually, without having to reload the whole page. The same-page completion is intended here 😉

  37. robert on April 21, 2016 at 6:04 am said:

    Can I follow this guide to create a contact form for WordPress? 🙂

  38. Nazar on April 18, 2016 at 1:28 pm said:

    Hi! Sorry my English. How use this form in cyrillic. When I change $subject = “New contact form от: $name”; (in mailer.php) to $subject = “Новое письмо от: $name”; that message not send to my mail?… but wihout changes all woorks good

  39. JohnBurns on April 3, 2016 at 4:49 am said:

    I’m not really a web designer or coder so thank you so much for this. It really helped me wrangle a template into operation!

  40. Dave on March 3, 2016 at 3:28 am said:

    I’m no coder, but I notice that in the code block for the condition test in line 38, you don’t actually call the mail() function to send the mail.

    Thanks.

  41. tom on March 2, 2016 at 9:29 am said:

    Beautiful tutorial very good good demo there is another good tutorial for submitting form without page refresh using jquery http://talkerscode.com/webtricks/submit%20the%20form%20without%20page%20refresh%20using%20ajax%20and%20jquery.php

  42. ses131 on February 18, 2016 at 5:04 am said:

    Hi,

    I got the program run in a local machine, but it does not work correctly on a shared hosting environment. When the form is not filled in completely the program exits with the approriate message “Oops! There was a problem with your submission. Please complete the form and try again.”. However the header status is not set and the “done”-part of the jquery function is run.

    PHP version is 5.6 so http_response_code should work. If I replace it with header(“HTTP/1.0 400 Bad Request”), this does not work either.

    Looking at the POST headers in firebug I found, that on my local machine, the connection is “closed” whereas on the shared host it is “keep-alive”. So i tried to change the header in the $.ajax-call adding the line “headers: {Connection: close}” like this:

    $.ajax({
    type: ‘POST’,
    url: $(form).attr(‘action’),
    data: formData,
    headers: {Connection: close}
    …

    and

    $.ajax({
    type: ‘POST’,
    url: $(form).attr(‘action’),
    data: formData,
    beforeSend: function( xhr ) {
    xhr.setRequestHeader( “Connection”, “close” );
    }
    …

    but neither helped to change the connection.

    Then i figured out, that the connection could be kept on the shared host due to longer connection time on the server. I tried to get the connection cut by changing the network.http.connection-timeout in firefox to a lower value. but this didnt help either.

    Has anyone any ideas, what else could cause the problem?

  43. Frank_e on February 16, 2016 at 5:45 pm said:

    Thank you for the tutorial Matt, The form works great. I’ve added bootstrap validation and everything works well. The only problem that I’m having is once the form fields are filled correctly and the form is submitted. The email gets sent twice into my inbox. Is there any way to place a function in the php code that checks to see the email has been posted stop the operation.

  44. Marc on February 10, 2016 at 6:15 am said:

    Incorperated this form into my personal site but it just follows through to the PHP actions (ie going to a new page and echoing ‘your message has been sent’) rather than not reloading the page and providing the notification through AJAX.
    Is this meant to do that? I added a console log to try and see if I could trigger it on send but it just jumps right to the PHP echo. An example of what happens can be found here: http://marcmurray.net/portfolio_test/#popUp
    Anyone got any ideas?

  45. Andy Wolfenden on January 21, 2016 at 12:00 pm said:

    Is it possible to pass a form ID to this script so I can use it to have multiple forms on the same page?

  46. Sean Mangosing on January 14, 2016 at 7:34 am said:

    First off thank you very much for this tutorial Matt, it is amazing! I was wondering if anyone could help me out as I am new to this. I followed this tutorial word for word. When I uploaded it to my server everything works perfect. The problem comes when I try to apply this code to a contact form I have created with the Foundation6 framework. I keep getting errors thrown left and right. If anyone could please test this and help me figure out what I am doing wrong that would be greatly appreciated. I am new to this so any help and direction would be amazing. The link to my contact form is:

    http://www.seanmangosing.com/clients/FoundationPlayground/

    Thank you again for all help that may come of this.

  47. Van on January 8, 2016 at 10:59 am said:

    Hi,

    The form is not submitting. Keep getting the 403 forbidden response. I even loaded the exact copies of your files on the production server and still get the same error. My server has PHP 5.3. I’ve replaced the header http_response_code(403); to header(“HTTP/1.0 404 Not Found”); and the form is not submitting and giving the 403/404 message.

  48. Mark on January 1, 2016 at 8:17 pm said:

    Hi! I implemented this form on my website and everything works great, I get the emails, awesome, but my message appears on another page instead of in the same page which is how I wanted it. Any suggestions on how to fix this issue?

  49. Paul on December 31, 2015 at 3:52 am said:

    Hi,

    I’ve implemented all javascript and php and the browser is bringing up the #form-messages as green and showing the success message, but I am not receiving the email. I have changed the recipient email in mailer.php, so I’m not sure what the issue is here…

    Any help would be appreciated!

  50. Hristo on December 16, 2015 at 10:27 am said:

    First thank you for this good tutorial.
    Now i am want to ask about the security about this form. Aren t there robots looking for buttons tags to press and send spam? Is there any way to solve this?

  51. Saurabh on December 15, 2015 at 2:48 am said:

    Hi,

    Thanks for the great tutorial.

    I used your code on my server and its working great. However when i inserted in a wordpress page its giving problem. Form is submitting but i am getting error message. If problem is with php version it should not work in other folder also. But its working perfectly in other folder. What could be the reason?

  52. emile on December 7, 2015 at 2:33 pm said:

    Just stopped by to give you some kudos, this tutorial is great and is exactly what I was looking for after 3 days of php torture.

    Very appreciated!

  53. James Barrett on November 24, 2015 at 9:47 am said:

    Hi guys,

    I am fairly new to JavaScript and jQuery and I want to find out if I have indented and put all my code in the correct places: My JavaScript is below:

    $(function() {
    // Get the form.
    var form = $(‘#ajax-contact’);

    // Get the messages div.
    var formMessages = $(‘#form-messages’);

    // TODO: The rest of the code will go here…
    $(form).submit(function(event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // TODO
    });
    // Serialize the form data.
    var formData = $(form).serialize();
    // Submit the form using AJAX.
    $.ajax({
    type: ‘POST’,
    url: $(form).attr(‘action’),
    data: formData
    })
    .done(function(response) {
    // Make sure that the formMessages div has the ‘success’ class.
    $(formMessages).removeClass(‘error’);
    $(formMessages).addClass(‘success’);

    // Set the message text.
    $(formMessages).text(response);

    // Clear the form.
    $(‘#name’).val(”);
    $(‘#email’).val(”);
    $(‘#message’).val(”);
    })
    .fail(function(data) {
    // Make sure that the formMessages div has the ‘error’ class.
    $(formMessages).removeClass(‘success’);
    $(formMessages).addClass(‘error’);

    // Set the message text.
    if (data.responseText !== ”) {
    $(formMessages).text(data.responseText);
    } else {
    $(formMessages).text(‘Oops! An error occured and your message could not be sent.’);
    }
    });
    });

  54. David on October 29, 2015 at 11:02 am said:

    Running into an issue where the form validates and the success message pops up, but the mail only actually sends some of the time. Tried recreating it with different email addresses and cannot recognize a pattern.

    Currently running PHP 5.6. Does this sound like a host issue?

  55. Hooman Moeen on October 29, 2015 at 6:44 am said:

    Hi. thanks.

  56. Justice on October 28, 2015 at 1:41 pm said:

    Thanks for the tutorial! I have a question about URL validation.

    If my HTML page had a text input called URL, where someone could paste a URL, what would the correct syntax be in mailer.php (around Line 14, I presume) to validate the URL? Or should it just be treated like a string, and submitted as long as it’s not blank? I can’t seem to find information on this online.

    Thanks again.

  57. Bvk on October 27, 2015 at 10:25 am said:

    Hi . Thanks for conveying your eloquent and simple

  58. Clare on October 24, 2015 at 10:03 am said:

    Hi,

    Thank you for this great tutorial. I used this contact form tutorial for two contact forms in my site.
    One form was a mailing list and one a standard contact form. When the site went live the mailing list worked but the contact form was coming up with a 500 (internal server error) response code. Now they are both not working. They worked fine when I tested them on the local server.

    My host says it is because they don’t support the php mail function anymore. Is there anyway around this? I’m a bit stuck.

    Thanks Clare

  59. Tom on October 23, 2015 at 5:17 am said:

    Any idea how to stop messages being sent as spam?

  60. Chris on October 9, 2015 at 2:44 am said:

    Hi Matt, really nice tutorial, thank you for this. Well laid out and easy to follow.

    I am having a problem though. I have set it up and tested it, and the form is submitted and received by my email, but I am getting this message on my page once it has been sent.

    Fatal error: Call to undefined function http_response_code() in /home/xxxxxx/public_html/privatelisting/mailer.php on line 40

    What does this mean and how can I fix it? Many thanks!

    • Chris on October 9, 2015 at 3:09 am said:

      Matt, just seen your other posts about this same issue. I have the most recent PHP version (5.6) and it’s still not working. Replacing it with header(“HTTP/1.0 404 Not Found”); doesn’t work, it just gives another error and the message doesn’t send at all now.

      Could you possibly suggest another solution or one that I may understand? 🙂

  61. Chris on October 8, 2015 at 9:00 am said:

    Hey Matt,

    thanks for this nice tutorial. It helped me by setting up my own tiny website! 🙂

    Best
    Chris

  62. Maarten on October 5, 2015 at 4:34 am said:

    Great tutorial!

    I am trying to add html tags to the response messages. But the tags appear as text. I can’t get it to work. Do you know if it is possible to use html tags in the error/success messages?

  63. Steven Hart on September 24, 2015 at 3:26 am said:

    This is a great contact form and have been using it on my site, I was wanting to add a couple of fields to this contact form and radio subject, and an file_uploader. is this possible?

  64. Jonathan Doe on September 20, 2015 at 7:27 am said:

    Matt West lives in a tree house. Go-o-o-o-o-o-o, Team!

  65. Darren on September 19, 2015 at 3:16 am said:

    Thanks for the tutorial. I was just wondering what and how the e-mail address is validated as it doesn’t accept just a few characters for example. Just wondering what it is that does that? thanks.

  66. jay on September 7, 2015 at 10:43 pm said:

    Can help me in buliding my website http://blogswindow.com/ like yours…Please share tips with me

  67. Matthew on August 31, 2015 at 7:41 am said:

    I love this tutorial, and it seems clear in its instruction, however I myself am still having issues implementing the code. When hitting the submit button, and all required fields are filled out, the entire php file gets returned in the containing “form-messages”. If not filled out I get the js file’s fail error of “Oops! An error occurred…” just curious if there is something simple I may have done wrong. I even used your source code as a double check and get the same result.

  68. Peter on August 27, 2015 at 3:06 pm said:

    This territorial is one of the better ones out there addressing the ideas around from submission without page refresh. As well nothing about it is hard coded; therefore is works perfectly as a function.

    However, I am having an issue once the app.js file gets moved into a subdirectory or library. The code seems to break that that point and the form doesn’t submit. What is the code necessary if you move the jquery library and the app.js file into another directory within the root rather than where there are in this example, local to index.html?

    I have tried all of the tricks and nothing appears to work.

    • CalvT on August 28, 2015 at 6:25 am said:

      Peter

      Try changing to

      But to make this work, the folder has to be in same place as your html file.

      • CalvT on August 28, 2015 at 6:28 am said:

        The code got formated :/

        It should be: try changing <script src=”app.js”></script> to <script src=”folder/app.js”></script>.

        • peter on August 28, 2015 at 8:07 am said:

          ^ as stated this solution doesn’t work. If I leave the file local to index.html, then the code executes and all works correctly.

          However, if the file is moved to another folder, the code does not execute properly. True, the function is called, therefore the app.js is found in its new location; however, the response from malier.php is not passed back to index.html

          I think that the problem might have something to do with passing the page name “mailer.php” through the function. please test it there and see if you don’t get the same result.

  69. Jessica on August 23, 2015 at 4:38 pm said:

    I’m trying to get AJAX to work, but the emails on my contact form do not go through. This error message comes up in the console:

    POST 500 (Internal Server Error)
    m.ajaxTransport.send @ jquery-1.11.3.min.js:5
    m.extend.ajax @ jquery-1.11.3.min.js:5
    (anonymous function) @ main.js:79
    m.event.dispatch @ jquery-1.11.3.min.js:4
    m.event.add.r.handle @ jquery-1.11.3.min.js:4

    The “fail” function in my jquery causes the error message to show up in the formMessages div. So it looks like ajax is responding, but doesn’t send out the email…any idea why?

  70. Shrinivas on August 16, 2015 at 10:54 pm said:

    Hi Matt, thank you for the ajax tutorial, can you plz give a link to full code?

  71. Jon on August 10, 2015 at 6:32 am said:

    Any advice on how to add a loading animation/GIF as the form is submitting? I have some forms that are taking about 10 seconds to post, before the success shows up. Would like to add an animated GIF next to the submit button to let the user know the form is still submitting. Thanks!

    • Kbam7 on August 15, 2015 at 2:03 pm said:

      Hey Jon, Try This . . .
      ———
      // Submit the form using AJAX.
      $.ajax({
      type: ‘POST’,
      url: $(form).attr(‘action’),
      data: formData,
      beforeSend: function(){
      form.prepend( formMessages.html(‘ Email is sending…’).fadeIn() );
      }
      })
      ———-
      Where “beforeSend” creates your spinning image using Font Awesome’s spinner icon and spin function. This message is created inside the formMessages

    • Nate Blerk on December 7, 2016 at 1:06 pm said:

      I had the same issue, so thought I’d share my solution.

      replace the $ajax{} in the app.js file to:

      $.ajax({
      type: ‘POST’,
      url: $(form).attr(‘action’),
      data: formData,
      beforeSend: function(){formMessages.text(‘Email is sending…’).fadeIn();}
      })

  72. HI Matt on August 10, 2015 at 5:50 am said:

    im getting, error message : Oops! Something went wrong and we couldn’t send your message. seems like it fails at : ” if (mail($recipient, $subject, $email_content, $email_headers)) { … }”

    I am trying to learn this method. Hope you can help.

    Previously i received the error due to that status code. and i commented it. Any suggestions ?

    • ses131 on February 18, 2016 at 4:38 am said:

      Hi,

      i’ve read, that on some shared hosts you might encounter problems with PHP mail function if you do not use its fifth additional_parameters with the “-f” option. Your code then could look like

      if (mail($recipient, $subject, $email_content, $email_headers, “-f mail@yourdomain.com“)) { …}

      where in some examples in the web there was no space behind the “-f”…

      Check the PHP documentation for more explanation. Hope this helps.

  73. johanso on March 19, 2014 at 11:25 am said:

    Great tutorial, thank you, it also easy to use

  74. Glenn Haggis on March 18, 2014 at 12:32 pm said:

    I get this error even though the mail get sent:
    Fatal error: Call to undefined function http_response_code() in /nfs/c08/h02/mnt/116936/domains/gimme-a-gig.com/html/mailer.php on line 40

    Any solutions to this? I am clueless when it comes to PHP ;o)

  75. Reme on March 18, 2014 at 12:57 am said:

    Matt, you rock!!!

    Although, for some reason, my success and error messages show up in a new page. I have my “form-messages” div at the bottom, next to my submit button, could that be the culprit?

    Once again, thanks for this!

  76. Alex Bahler on March 14, 2014 at 3:31 pm said:

    Thanks for the tutorial, Matt!

    I’m having one issue, though. While the email is sending correctly, the error message from within the fail() call in app.js is showing after sending (I ensured the wording differed in each error message across the JS and PHP files so I could tell which error was which). I verified that my syntax matched yours, and the error persists. This happens in Chrome 33 and Firefox 24. I am using PHP 5.3.26, so does it have something to do with mailer.php’s http_response_code() not working in < v5.4, as AJ Foster commented?

  77. Aaron Traas on March 13, 2014 at 12:10 pm said:

    The overall technique is nice and clean and tidy, but the backend code is deficient. It is weak to many forms of injection attacks. Using:

    $email = filter_var(@$_POST[’email’], FILTER_SANITIZE_EMAIL );

    As the “from” email is specified in the header field of the mail function, commas and ; and other stuff can be injected to make the SMTP server do all kinds of weird things.

    The PHP world is full of a lot of noobs that cut and paste scripts they find from Google searches that are full of nasty security holes.

  78. Travis on March 13, 2014 at 10:18 am said:

    I am getting a 500 error response code, even w/ the default files attached.

    Any thoughts?

    • Matt West on March 13, 2014 at 10:27 am said:

      Hi Travis,

      Which version of PHP do you have installed?
      As AJ pointed out earlier in the comments, the mailer script will require version 5.4

      If that’s not it, check your log files to see what error is being raised. Post the error message here and I’ll try to formulate a solution.

  79. James on March 13, 2014 at 12:35 am said:

    Hey Matt, do you by chance do development work per hour? If so, can you contact us? Need help with this and more.

  80. The Auto Mania on March 13, 2014 at 12:31 am said:

    It’s useful thank you, it also easy to use
    NICE !!

  81. Nate on March 12, 2014 at 9:42 pm said:

    What is the benefit of this method over using direct php post methods?

  82. AJ Foster on March 12, 2014 at 3:20 pm said:

    Minor note: http_response_code() requires PHP >= 5.4, which is not necessarily standard on all servers. The current Ubuntu 12.04 LTS package, for example, has 5.3.

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Javascript?

Learn how to use JavaScript to add interactivity to websites.

Learn more