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.
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.
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.
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.
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.