Ajax Contact Form with Validation from jQuery and Anti-bot service from reCaptcha

Are you looking for an Ajax contact form, which can validate using jQuery, and uses anti-bot service from reCaptcha to prevent spamming. This is probably the right post for you. This script was originally created for tysoh.com (take a look at the demo). I have attached the full source code for your own testing too. However, there are 3 steps you will need to change before the form can work for you. Please see below:

1) Open up the file index.php, go to line 65, and change to your own reCaptcha public key. (You will need to sign up at recaptcha.net to get one)

ajaxform_1

2) Open the file ajax.recaptcha.php, go to line 8 and 9, and change to your own reCaptcha public and private key.

ajaxform_2

3) Open the file sendemail.php, go to line 7, and change to the desired email you want the form to forward to.

ajaxform_3

Further Modifications:
If you are slightly more ambitious, all the error and thank you messages can be configured under the file – submitform.js. And the theme for reCaptcha can be configure under the file – index.php.

Other Useful Resources:
jQuery Documentation
reCaptcha Documentation

Scripts Updates:
15/Jun/2010 – Version 1.3 released with Sender Name displayed in the mail
17/Jan/2010 – Version 1.2 released with bugs fixed

12 Responses to “Ajax Contact Form with Validation from jQuery and Anti-bot service from reCaptcha”

  1. THAAAAAAANK you… really really thank you :d

  2. proexito

    Really easy to implements,
    very cool
    thanks

  3. Dan

    It bums me out to see how “easy to implements”.

    I can’t get it to work. Everything is working except I always get “Validation error. Please try again” in Chrome and in Safari, the text I typed in gets printed to the screen just right of the text box where I enter the CAPTCHA text, but it refreshes and gets a new CAPTCHA. ( I set my CSS to display the recaptcha_only_if_image class to my text color.)

    Any ideas?

  4. Hi Dan, please try to download the latest version 1.2. It should be working alright now.

  5. Dan

    Thanks Tysoh,

    1.2 seems to do the trick.
    Tested both Chrome and Safari and both work!

    Thanks

  6. Joe

    Very nice and easy to use, however the name isnt passed from the php file.

  7. Erick

    Merci tysoh !!!!!!!! Superb, A big thank you, perfect, great job.

  8. cory

    Hi,
    script works great, however,

    I can’t get it to send the name, I’ve just downloaded and tried it, but still no name being passed…is v1.2 posted here?

  9. Hi, Cory! Good news for you, I have just posted version 1.3. The name has been passed in. Let me know if there is any problem.

  10. Marcus Vinicius

    tysoh hi!
    his script was what I was looking for!
    …but it is extremely INSECURE!
    If the visitor delete the following lines of javascrip:
    if (recaptchaVal ==”) (
    $ (“# Recaptcha_response_field). After (‘ Please validate the Form. ‘);
    hasError = true;

    )
    verification of reCaptcha does not work!
    The user can also remove the checks from all fields and even then the scrip will continue to function, sending the email (your example).
    The visitor can make these changes by downloading the entire page (with all dependent files such as JavaScript), delete the javascript checks, and replace line 59: url: “ajax.recaptcha.php” for: url: “http://www.TARGET- SITE/ajax.recaptcha.php “, and also in line 76: $.Post(“sendemail.php” to: $.Post(“http://www.TARGET-SITE/sendemail.php” and so fill your inbox spam!
    Thanks for the script, but I am making some modifications to prevent this from happening!

  11. Hi Marcus, thanks for pointing out the issue. It will be good if you can share with us your resolution to this problem.

  12. Arun

    hi,

    I’m always “Validation Error. Please try again.” … Please suggest me a way to solve this issue

Leave a Reply


Travel to top