As a web developer, I’m constantly using contact forms. If you talk to a handful of developers, they will all have most likely written several throughout their career. I usually use straight PHP to handle these types of forms, however, recently, I decided it would be nice to have something that was a little more versatile, incorporating some newer programming techniques and languages. We will be using the following javascript/jQuery components:

  • jQuery
  • jquery-migrate – To handle compatibility with code for older versions
  • Twitter Bootstrap – Handle theming and visual elements
  • jquery.validate – Validate form input
  • jquery.easing – Apply animations to objects
  • wow.js – Handles some visual elements of the form
  • contact.js – All our code

Let’s take a look at our index.html:

Pretty simple stuff here, we setup our page and a wrapper and container for our form. Our jQuery/javascript loads at the bottom of the page to, specifically contact.js, is where the submit button press is handled.

The next portion of the script is built using PHP, it is what the HTML form POST’s it’s data to. For this script I have named it submit.php, but you can adjust the name to fit your needs. Let’s take a look at the code:

Although the code is already fairly well commented, I will give a brief explanation of what’s happening within the code. First, we check that a POST has occurred. The script then verifies that the request HTTP_X_REQUESTED_WITH variable is set to xmlhttprequest, a positive result indicates that the data is in fact in AJAX format. We then encode the data to JSON, and output it for further handling. Next, we sanitize all our data, and assign it to local strings. We then run some additional validation to insure that the name field only contains uppercase and lowercase letters, and is 4 characters or more. We validate the email, we then check if the length of the subject and message fields are less than three characters. Once the validation has been completed, we form our email using the strings we setup earlier in the script. Lastly, we verify the mail has been sent, and send our message back to index.html via the $output string.

Next, let’s have a look at contact.js, where a few key things are happening:

In this piece of code, we start by handling the items we need to happen when the page is loaded, ending by calling the checkContactForm function. We then setup the items from wow we need to load on ready. The checkContactForm function first checks the contact form data length to see if it is greater than 0, if so, it proceeds to validate the form. Once the form has passed validation,  it fades out the submit button, makes the loading div visible (which contains a small spinning dot graphic), we then take the data from the form and serialize it, so we can pass data in both directions between index.html and submit.php. The .message-box div class that we created in index.html receives the data back from submit.php, the loading div is again set to invisible, we make the whole form disappear, and display the results we’ve gotten back from submit.php. Here are the results:

Simple HTML Contact Form Using PHP/Ajax/JS Screenshot 1

Simple HTML Contact Form Using PHP/Ajax/JS Screenshot 2

Pretty straight-forward. Be sure to change the email address you want the contact form to send to in submit.php. The form as it sits is fully responsive, you can checkout a demo here:

Simple HTML Contact Form Using PHP/Ajax/JS Demo

and you can download the sources here:

Simple HTML Contact Form Using PHP/Ajax/JS Source Download

If anyone has any issues, or if you would like to see how to integrate captcha or any other features, leave a comment and I’ll write up a post.

– A Simple HTML Contact Form Using PHP/Ajax/JS

Skip to toolbar