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

2013-09-30 // In Tutorials

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.

Discussion

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

        • csosa777

          how would I know if it can process my php?

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

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

  • http://wwww.numero7.ch 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.

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

    (process.php)

    instead of:

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

    I have:

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

    (javascript)

    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’);
    $(this).find(‘label’).css(‘cursor’,’default’);
    $(‘#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’);
    $(this).find(‘label’).css(‘cursor’,’default’);
    $(‘#contact #success’).text(responseText);
    $(‘#contact #success’).fadeIn();
    });
    },
    error: function(responseText, statusText) {
    $(‘#contact’).fadeTo( “slow”, 0.15, function() {
    $(‘#contact #error’).text(responseText);
    $(‘#contact #error’).fadeIn();
    });
    }

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

  • http://cloudsmaker.com/ 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.

All content copyright © 2009-2014 AJ Troxell. All rights reserved.