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.

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

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

  • Wow Thanks for sharing such a nice form!

  • Dionis

    Great job! Thanks for sharing your knowledge!

  • Matt

    Hey Vince,

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

    Thanks!

  • andy

    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.

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

  • jeremy

    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

  • Ed

    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.

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

  • Robert

    Great stuff , thanks a lot !!

  • meontheweb

    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.

    cheers!

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

  • 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

    ?!?!?!?!

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

  • Luke

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

  • @Luke,

    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.

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

  • jeremy

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

  • Mark

    How do you get the $_POST for multiple checkboxes?

    I am getting an empty array:

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

    OR

    Checkbox

    $_POST[checkbox];

    ??

    Thanks,
    Mark

  • Vibhor

    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];
    else
    $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

  • Rob

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

Search