Build a Simple PHP, jQuery, and AJAX Powered Contact Form (Updated 02/05/2014)

Updated 02/05/2014

I have updated the script to prevent multiple submissions by disabling all form fields upon a successful submission. I have also provided a demo in a zip file.

There are a ton of options and a ton of configurations for creating a contact form for your website. Some of them good, some of them great. Keep in mind, this is just an example, and should be treated as such. Better spam protection is a good idea, but for now we will stick with a simple to implement option.

Needed Assets

Before we begin, you will need a few things already implemented on your site. Provided is their name and link to the CDN file. Place these in the footer of your page above the closing tag.

  • jQuery http://code.jquery.com/jquery-latest.min.js
  • jQuery Form Plugin //cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js
  • jQuery Validate //cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js

The HTML

The form is simple HTML with a few input fields, a “spam protection” field, and a hidden confirmation message triggered via the jQuery Validate plugin AJAX success call.

The CSS

Here is some base CSS for the form, you will need to make adjustments to match your sites styling.

The PHP

The PHP needed is just a basic form mail script. Change “mail@yourdomain.com” to the email the form should send to, and “You have a message sent from your site” to whatever subject you would like the email to have. This script will reside on your server as process.php and not get inserted into your page.

jQuery Validation

Using jQuery Validate we can assure that the form is filled out properly before being sent in, and also prevent a bit of spam using a custom function.

First we state the rules for the form; what is required and what is not. Including a reference to a custom function we will make named answercheck, then we have a custom submit handler that uses the jQuery Form Plugin to submit the form via AJAX to the process.php script.

Once the form submits and returns, jQuery Form Plugin detect this and carries out the jQuery in the success* or **error callbacks. All these do is fade out the form and fade in the success or error divs.

Answercheck Function

This function can be placed in an existing js file such as the previous validate.js or in it’s own file which will then need to be referenced in your HTML.

Our quiz question to help prevent spam is “Name the small house pet that says meow“. You can ask anything you’d like, but I enjoy cats.

Our custom validation method requires a specific answer of cat as stated at /^\bcat\b$/, and will return a custom error notification as long as the answer is incorrect.

That’s It

There you go, a simple PHP, jQuery, and AJAX powered contact form. You can see it in action on my portfolio at http://portfolio.ajtroxell.com. Feel free to submit it to see the AJAX/jQuery process after submission.

  • Dylan

    Hi, thanks for the tutorial. I have a problem:

    The form works, but when I click send it says ‘Something went wrong, try refreshing and submitting the form again.’. Checked in Chrome’s console:

    OPTIONS file:///C:/xampp/htdocs/contact/process.php No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. jquery-latest.js:8706

    XMLHttpRequest cannot load file:///C:/xampp/htdocs/contact/process.php. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. contact.html:1

    I’m using Xampp on Windows pc. All files are in 1 map. How to fix this?

    Thanks, Dylan.

  • Fifa 13 Coins

    The next subject is Troubleshooting storage area space network in a ‘cisco’ Information center where candidates have to do the identification Runescape Gold and quality of the following such as Content merge problems and npv/npiv problems, SAN port-channels/trunk problems. Troubleshooting DCI problems in a ‘cisco’ Information Middle network is another subject that contains Recognize and resolves OTV problems and Recognize and take care of HSRP problem in a DCI. The last place is problem solving system specific problems in a ‘cisco’ Information center Fifa 13 Coins network in which the candidates have to do the identification and quality of the following objectives that are very essential to be learned by the candidates.

  • Ozcan Durak

    Hi, Thanks for the Tuts, Could you upload this as file, so we can download and understand much better, Kind Regards

    • http://ajtroxell.com/ AJ Troxell

      I will try to get a zip up for you this weekend!

      • http://ajtroxell.com/ AJ Troxell

        I finally uploaded a zip for this. Sorry it took so long.

  • Kia Shine

    Demo page is not actual anymore (

  • halisonb

    how to remove the all validation?

    • http://ajtroxell.com/ AJ Troxell

      It is easily doable, but why would you want to remove it?

      • halisonb

        my friend, you make a AWESOME script, tanks! awesome!

  • Vinay Kashyap

    This is THE BEST and SUPER EASY contact script out there….

  • JM B

    Hello, thanks for the tutorial. I’ve tested in my site, everything is ok, but i dont receive any email. I don’t find any errors on js and it processes the php..i dont know what could be wrong. Maybe permissions on the server?

    • JM B

      I think i found the problem. The mail function was disabled in php.ini file on the server.

      • http://ajtroxell.com/ AJ Troxell

        That’ll do it! Glad you got it figured out!

  • http://www.bonsaimediagroup.com/ Ryan Markham

    Thank you for creating this script. I’d been looking everywhere for something like this. I’m new to coding and just built my first website for my parents-in-law’s business. I placed all the code on the page, added the js files, and placed process.php in the root directory (and changed the email), however it isn’t working. The page is http://www.castawaysphuquoc.com/contact-us.html. Any insight into what I’m doing wrong would be greatly appreciated. I’m using GoDaddy hosting if that makes any difference.