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!
Tutorial is pretty basic, you should be able to pull it off if you are 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 some input fields, you can review our code below. A regular contact page contains name, email, phone and message fields, you may add other fields like check-boxes, radio buttons and select-boxes as per your requirements for the contact form.
If you look closely, you’ll realize that we didn’t wrap our fields with <FORM> tags here like in a typical HTML form. Since we are going to collect field values using jQuery .val(), we don’t really need a typical HTML form functionality here, all we need is some fields and a button to trigger jQuery code which will do the rest.
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 you have included jQuery library within the <HEAD> section of your HTML document, without it jQuery code doesn’t work.
We start with $(document).ready() as suggested by jQuery here.
Right after $(document).ready(), we have $(“#submit_btn”).click(). If you notice the submit button ID in our HTML form above, you will realize that we are actually attaching the click event to the button. When a user clicks the button, the event gets triggered, executing all the code within it.
The above code is pretty self explanatory, we collect values of fields using val(), then we do simple validation to check empty fields. If everything looks ok, we prepare the data to be sent to the server (contact_me.php), and then we simply send the data using jQuery $.post() method.
One more thing here is that after successful Ajax request, our code expects JSON data from the server, not plain text. You can read more about jQuery Ajax here. Once server returns JSON data, we will grab its message, determine the message type and output it accordingly. The results will be displayed within the div element called #result.
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(), and then again we server-side validate the variables before we proceed with PHP email. As you can see I have used PHP json_encode() to return JSON encoded data to output success or error messages, which will be grabbed and parsed by jQuery.
That’s it! we now have a neat looking Ajax based contact form. I hope you can now be able to create your own by taking examples from here, or you can just download the entire code from link below and integrate it on your website right away, please note jQuery may not support old Internet Explorers, good luck!