How to Create an AJAX Contact Form

Hostnbit

A common feature of many websites is a contact form. 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’re going to 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.

Building the HTML Form

Your first task is to set 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.

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.

Creating the PHP Mailer Script

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.


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.

Hostnbit

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu Title
Scroll to Top