Insight & Insanity

web development with a dash of life

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
  • jQuery Form Plugin//
  • jQuery Validate//


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.


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


The PHP needed is just a basic form mail script. Change “” 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 Feel free to submit it to see the AJAX/jQuery process after submission. Sorry, the demo is no longer available.


  • 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

    • AJ Troxell

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

      • 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?

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

      • AJ Troxell

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

        • csosa777

          how would I know if it can process my php?

        • moid

          Hi a j …can you help me in codeigniter

      • sohail mushtaq

        How to enable mail function. thanks

  • 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 Any insight into what I’m doing wrong would be greatly appreciated. I’m using GoDaddy hosting if that makes any difference.

  • Pingback: Commanding a "send email" button()

  • olivier requet

    Hi thanks for this awesome code, everything works fine except the captcah validation. if I write nothing the validation works fine (required field message) but if i enter any words, the form send my message… any idea ?

    Hi sorry i found the problem. on your contact.html example file the captcha input name is “captcha”.. should be “answer” to match the JS file…
    anyway thanks a lot.

    • AJ Troxell

      I am actually working on a revamped version that addresses some issues with this implementation. I don’t have an exact timeline but ill will update this page and comment with a link to the new version when it is completed.

  • Guest

    sorry duplicate entry :-)

  • majufes

    Hey, the tutorial is nice. But it’s going to show success even if the mail is not sent by php “mail” function.

    The way I did is:


    instead of:

    $send = mail($to, $subject, $body, $headers);

    I have:

    if(mail($to, $subject, $body, $headers)){
    echo “ok”;
    } else {
    echo “not ok”;


    Instead of:

    success: function(responseText, statusText) {
    $(‘#contact-form :input’).attr(‘disabled’, ‘disabled’);
    $(‘#contact-form’).fadeTo( “slow”, 0.15, function() {
    $(this).find(‘:input’).attr(‘disabled’, ‘disabled’);
    $(‘#contact #success’).text(responseText)
    $(‘#contact #success’).fadeIn();
    error: function(responseText, statusText) {
    $(‘#contact-form’).fadeTo( “slow”, 0.15, function() {
    $(‘#contact #error’).text(responseText)
    $(‘#contact #error’).fadeIn();

    Put this:

    success: function(responseText, statusText) {
    $(‘#contact :input’).attr(‘disabled’, ‘disabled’);
    $(‘#contact’).fadeTo( “slow”, 0.15, function() {
    $(this).find(‘:input’).attr(‘disabled’, ‘disabled’);
    $(‘#contact #success’).text(responseText);
    $(‘#contact #success’).fadeIn();
    error: function(responseText, statusText) {
    $(‘#contact’).fadeTo( “slow”, 0.15, function() {
    $(‘#contact #error’).text(responseText);
    $(‘#contact #error’).fadeIn();

    • deazure


      please how i can style message from process source.

      like :

      Your message was sent succssfully! I will be in touch as soon as I can.

      Something went wrong, try refreshing and submitting the form again.


      • majufes

        Add a css style to it.

  • csosa777

    what is the “mail function” that I need in the php.ini? how would I know if it is turned off or on? Im not receiving any email when i send info on my contact form. I have however the php file and index file in the server and everything..

    • Launa Germiquet

      Hi DId you get an answer

  • Lan Pham

    Hi, thanks for the scripts. I have a question — when does the error message appears? Because I feel as it doesn’t ever appear whenever the e-mail isn’t send.

  • Pingback: Philboss Design » Single Page Website, Brand Design, Stationery, Business Card Design()

  • sohail mushtaq

    Hi. Please anyone can tell me how to enable mail function php.ini file as i am using contact form to send email but i don’t receive email. thanks

    • moid

      I can do it but in codeigniter

  • Launa Germiquet

    Thank-you for the script, Although I only get the Something went wrong message and it does not come to my email… any thoughts?

  • Sam Curcio

    Great contact form! I have two questions:

    1. Why does the page lock up (cannot click buttons or links) after the success message appears?
    2. Is there a page redirect function to use instead of having the success or error messages appear?

    Thanks for the great tutorial!

  • Cristian Campos

    HI, im trying to make this work, and y have the following error: “Failed to load resource: the server responded with a status of 406 (Not Acceptable)” how can i make it work?

  • Gaurav Bora

    Hello AJ! Thanks alot for the script! Can I use it in my commercial projects?

  • cgh246

    HI, Thanks for the demo and the code.

    I have implemented this on my site, but nothing works.

    The forms doesn’t submit and none of the AJAX and JavaScript validation works. I click submit it it just reloads the page.

    So I tried the files from your demo download on there own and had the exact same issue.

  • Cam

    Thanks :) By far my favourite one out there! A few typos to fix, but all in all, a great treatment for a common problem.