A Pretty Ajax Contact Form With jQuery & PHP

Tutorialzine is sharing a nice tutorial with source on creating a fancy Ajaxed contact form that is built with jQuery & PHP.

The form is unobtrusive & has a server-side validation which makes it degrade gracefully when the JavaScript is turned off.

Ajax Contact Form

It takes advantage of 2 jQuery plugins:

and a PHP class:

The contact form also has a basic captcha which works by asking the sum of 2 random numbers.

To check a demo of the form, click here.

  1. Reply dirk digizaal webdevelopment September 27, 2009 at 12:51 PM

    Too bad that the number verification isnt working correctly in the demo form. makes it loosing trust before even downloaiding it.

  2. Reply Vince September 27, 2009 at 4:45 PM

    Yeah like dirk digizaal webdevelopment said,it’s not working but i downloaded it and fixed it.

  3. Reply yoosuf September 27, 2009 at 9:12 PM

    Wow Thanks for sharing such a nice form!

  4. Reply Dionis September 28, 2009 at 3:33 PM

    Great job! Thanks for sharing your knowledge!

  5. Reply Matt October 14, 2009 at 8:53 PM

    Hey Vince,

    Would you mind please explaining how you fixed the captcha??


  6. Reply andy October 22, 2009 at 11:02 AM

    I’ve searched the internet pretty extensively and this is simply…the best ajax contact form out there. Cannot thank you enough. Best regards and elite coding. USE THIS GUYS.

  7. Reply Jack Starr December 7, 2009 at 2:39 AM

    Nice,, but…there’s no captcha there….

  8. Reply jeremy March 19, 2010 at 3:34 PM

    in FF3.6, when you click to type, the type tool is off from the text box, idk how to explain this. but the little thing that blinks to show you where you’re going to type is slightly more down than where it should be. idk how to fix that. but works great in IE and such

  9. Reply Ed March 25, 2010 at 3:32 PM

    I really like this form, but I’ve experienced a lot of quirky behavior using it. Sometimes it works, sometimes it does not. Also seems to be a bug when using under Google Chrome and always fails with the “wrong verification number” error.

  10. Reply Priceyboy March 30, 2010 at 10:04 AM

    Very nice.
    Thank you for sharing this, I love it, very easy to use and configure.

  11. Reply Robert April 14, 2010 at 2:03 AM

    Great stuff , thanks a lot !!

  12. Reply meontheweb April 20, 2010 at 11:40 AM

    awaseome stuff 5 stars here.

    How do I get rid of the “subject” selection?
    I don’t need it but if I try to cut it from php or js it doesn’t work anymore, there is no class validate[required,custom[email]] in that case.


  13. Reply dave June 1, 2010 at 4:33 AM

    it looks diffrent in IE 7.0 then FF 3.6, it would be great to see this form looks exactly the same in every modern browser and made with div’s, not tables.

  14. Reply kaue June 1, 2010 at 2:51 PM

    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /home/jungle/public_html/novocopa/phpmailer/class.phpmailer.php on line 53


  15. Reply letter6 June 1, 2010 at 11:58 PM

    name must be greater than or equal to three character or you will get the wrong message at number verification

  16. Reply Luke October 15, 2010 at 7:11 AM

    Hi i would like to know if how add a file uploader to the form.

  17. Reply Umut M. October 15, 2010 at 7:56 AM


    You can take a look at http://valums.com/ajax-upload/ or any other jQuery upload solutions.

    But I can see that it’ll require some effort.

  18. Reply uptraffic February 16, 2011 at 3:55 AM

    I’ve experienced a lot of quirky behavior using it. Sometimes it works, sometimes it does not. Also seems to be a bug when using under Google Chrome and always fails with the “wrong verification number” error.

  19. Reply jeremy February 22, 2011 at 1:11 AM

    How do you fix the “Wrong verification number!” I get it everytime!

  20. Reply Mark May 11, 2011 at 2:18 PM

    How do you get the $_POST for multiple checkboxes?

    I am getting an empty array:

    <input type="checkbox" name="checkbox[]" value="” /> Checkbox






  21. Reply Vibhor August 16, 2012 at 4:56 AM

    You will define the field

    You may get the value as with loop ::
    for($j=0; $j < count($_POST['intrested_categories']); $j++)
    $intrested_cat = $_POST['intrested_categories'];
    if($intrested_cate == '')
    $intrested_cate = $intrested_cat[$j];
    $intrested_cate = $intrested_cate."-".$intrested_cat[$j];

    // OUTPUT will be the value of check box in string

    I prepare for job with http://quizplaza.com
    It is good

  22. Reply Rob May 26, 2013 at 9:03 PM

    Doesn’t work on iPads. In a browser it is slick, and great, but submit will not “register” on iPads.

Leave a reply