Simple Ajax Contact Form Using jQuery & PHP

Written by Saran on December 24, 2011, Updated September 19, 2018

In this tutorial, we will be creating a simple Ajax-based Contact form using jQuery and PHP. Why Ajax? because your visitors don't have to reload the page in order to send you email, they can simply click send button and the email gets sent instantly before their eyes, so it's just fantastic, no more page reloads!
The tutorial is pretty basic, you should be able to pull it off if you are a bit familiar with HTML, PHP, and jQuery. Have a look at the picture below, this is how our contact form going to look at the end. We will have input fields as shown below, you can later add-remove other fields as per requirements of your HTML form.

Mark UP

Let's start coding our contact page, we start by adding an HTML form tag and some input fields, you can review the code below. A normal contact page should contain name, email, phone and message fields, you may add other fields as you like, such as check-boxes, radio buttons, select-boxes as per your requirements for the contact form.

Now place this form in HTML document within the <body> part. Next, we will style this form using CSS.

Form Style

You can style your HTML form with CSS, you can either create a separate CSS or include the code within the <head></head> section of your HTML document. I personally use DevTool in chrome browser and Firebug in Firefox browser, these tools allow me to edit, debug, and monitor CSS, HTML and JavaScript in realtime. If you haven't used these tools before, you should definitely learn to use them, they are lifesavers.
For this example, I've borrowed a HTML contact form layout from my other post here, which is included in downloadable file below, you can just download and play with form style using HTML editor until you are satisfied with the contact form look.

jQuery Ajax

Now it's time to write some jQuery code for the contact page. Before we start, make sure to included jQuery library within the <HEAD> section of your HTML document Or just before </body> tag, without this library jQuery code doesn't work.
Right after the jQuery library script, we can start writing our jQuery code for the contact form. Let's start by opening <scrip> tag. You can see the code below:

The above code is pretty self explanatory, when the submit button is clicked, instead of redirecting user to PHP page directly, we will validate all the input fields in same page with our input validation code. Upon error validation code will change input field border color to red. After that we prepare the data to be sent to the server (contact_me.php), and then we simply send the data using jQuery $.ajax method.
Server should return JSON encoded string as Ajax response, which we will use to output success or error message to the user. The results will be displayed within the div element called #contact_results.

PHP Email

Below is our PHP code for the (contact_me.php), the file is needed to send email to the recipient, as well as respond back to user in the event of success or failure. It receives POST data from the contact page, its good idea to sanitize the data using PHP filter_var().

The additional server-side validation is a must in case of client-side validation faliure. Validation ensures valid user inputs and doesn't expose critical server errors to user. As you can see I have used PHP json_encode() to return JSON encoded data upon success or error, which will be parsed and displayed to user by jQuery code.
That's it! we now have a neat looking Ajax based contact form. I hope this will help you create your own contact form. Or, you can just download the example files from link below and integrate it on your website right away.
Next Ajax Contact Form with an Attachment (jQuery & PHP).

Thank you for the tutorial but i keep getting the error message "Sorry Request must be Ajax POST". I also tried if the scripts .submit function is called and it seems like it is not.
Does anyone know what could cause that?

About Sanwebe.com

Sanwebe.com was founded in 2011 by Saran Chamling. A blog truely inspired by the ever changing web development world. It is a small effort to provide useful tips, tutorials and related resources to web developers.