AJAX Contact Form with CAPTCHA, Realtime Validator and PHP Backend

Posted on February 8, 2010, Filled under AJAX, JQuery, PHP, Bookmark it

Back in the autumn of 2008, I have written a tutorial about how you can create a basic AJAX Contact Form that works with PHP Back-end. The post is one of the most popular here on Bit {Repository} having over 4,000 monthly page views and over 200 comments so far. Since many people asked me how they can do this and even hired me to offer them assistance with this application, I have decided to write a more advanced script with many features including CAPTCHA and RealTime Validation. Unlike many AJAX Captchas out there that rely on JavaScript as an Anti-spam measure and have a medium security level, the one I have chosen to implement uses PHP to securely generate and register the required code in the background. Moreover, you can specify whether to show letter, numbers or both on the verification image.

Premium AJAX Contact Form

Features list

Realtime Form Validation that makes the form completion process interactive (can be enabled/disabled)
Both JavaScript & PHP Validation
Powerful CAPTCHA (the option to enable/disable it)
Auto Responder (customizable)
Ability to integrate the values from the form (beside the actual message) into the mail body
Tableless Form (does not use tables)
The e-mail templates (message, subject) are customizable
The errors and the notifications can be easily changed
A help page (documentation) that will guide you through the script setup

Server Requirements

PHP4+ Support (any decent server should have it)
GD Library Enabled (if want to use CAPTCHA)

Browser Compatibility

This script is compatible with all major browsers. It was tested in FireFox 3.5, IE 6, IE 7 & IE 8, Google Chrome 3.0, Opera 10, Safari 4.0, SeaMonkey 2.0, Flock 2.5.6

Live Preview

» View this form in action

Get it now

The premium ‘AJAX Contact Form’ is free for our email readers. To get a copy just enter your name and e-mail address and you will receive the script as an attachment, immediately after you confirm your subscription.

February 8, 2010
article by Gabriel C.
69 comments

Tags:

AJAX Contact Form with CAPTCHA, Realtime Validator and PHP Backend

Sponsors

A PHP Contact Form with JavaScript Real Time Validation
at April 30, 2009 with 18 comments
A simple AJAX Contact Form with jQuery and PHP Validation
at September 2, 2008 with 208 comments
Fancy (jQuery) AJAX Captchas – For an Awesome User Experience
at May 28, 2009
A Basic PHP Captcha (Image Verification) with Refresh Feature
at February 10, 2009 with 14 comments
Flexible and Expandable Form Validator: Ketchup jQuery Plugin
at February 14, 2010

69 Replies to "AJAX Contact Form with CAPTCHA, Realtime Validator and PHP Backend"

majid
February 8, 2010 at 9:55 PM

Reply

hi .
how to download it . i was subscribed to newsletter already .
1. Gabriel C.
  February 8, 2010 at 10:37 PM
  
  Reply
  
  I will send today a newsletter especially for those who didn’t get the script. They will get access to the application.
  
  PS: I’ve just sent you a mail containing the script (attachment).
  1. majid
    February 9, 2010 at 12:57 AM
    
    Reply
    
    thank you Gabriel . I’ve received it .
  2. majid
    February 9, 2010 at 1:05 AM
    
    Reply
    
    hey man it is the most complete jquery contact form that i see . thank you .
  3. majid
    February 12, 2010 at 3:10 AM
    
    Reply
    
    hi Gabriel , I’ve not using this good script in any project now . when i used it in a live project i will come back and give you a feedback . thank you man . your site is a good reference for me .
sakari
February 10, 2010 at 9:53 PM

Reply

hi
i downloaded the script and i integrated it on a wordpress theme
when i send a message the form shows that it is sent but i dont recive it in my mail box i configured the common.php with my gmail box
note that i use the script on a free webhosting server

please tell me what’s the problem because i need it .
thanks
1. Gabriel C.
  February 10, 2010 at 10:08 PM
  
  Reply
  
  @Sakari, I’ve just re-tested the same script to make sure that I didn’t miss something. It works fine. You said that you’re using a free web hosting service. That could be the problem. Did you use any other contact forms on your website? Perhaps the mail() function is not properly working on your web hosting service.
  
  Consider making some test with the sample codes from this address:
  http://www.php.net/manual/en/function.mail.php
  
  Did you check your SPAM folder? Although I quite doubt that the message was marked as spam you never know how it was filtered (I don’t know what content did you use to submit the form).
  
  PS: Send a mail to your web hosting support.
igor
February 12, 2010 at 3:20 AM

Reply

hi Gabriel,
I’ve not using yet this nicely script in my project, because my hoster not provide PHP.
But soon I hope to change host company, and I will use this script in new project.
Thanx much, Gabriel.
sakari
February 12, 2010 at 5:56 AM

Reply

hi
it works perfectly
great job men !
you win an other follower for your blog
thanks !
Some)ne
February 13, 2010 at 9:45 AM

Reply

Similar issue as sakari, automated mail received in test email but not the main message email …(I’m hosted on a paid server)
Smash Hacker
February 13, 2010 at 10:12 AM

Reply

Thank You Very Much This Is An Amazing Form
Anand Selvaraj
February 14, 2010 at 5:31 PM

Reply

hi…its very nice and working also fine, beauty, perfect. Thank u for this script.
johnymas
February 15, 2010 at 9:21 PM

Reply

very nice application. Thanks
Madalina
February 16, 2010 at 9:49 AM

Reply

The contact form is just what I needed. I’ve tested it on a virtual apache server only a few times (it’s functionality) and it seems that the captcha isn’t working the way is expected to work but I hope that on a real server it will work just like in the demo. I think it’s great however!
Thanks!
1. Gabriel C.
  February 16, 2010 at 9:55 AM
  
  Reply
  
  I’m glad to hear that. The CAPTCHA should work on the virtual apache server too, if everything is configured properly. It just requires the GD library to be enabled in order to generate the verification image. Note that this script is using sessions too (cookie-based).
Gianluca
February 16, 2010 at 8:00 PM

Reply

Hello. I had problems with character encoding when the body of the message was sent but I resolved.
In line 86 of parse.php I replaced “charset = iso-8859-1″ with “charset = utf-8″.
I had no other problems regarding the setup of the form.
I hope I helped you to refine the form
thanks!
fakhruzy
February 18, 2010 at 12:10 PM

Reply

nice job =)
leo
February 18, 2010 at 1:00 PM

Reply

Great Work! Is just what I needed.
Thanks!
Marlin Jackson
February 18, 2010 at 11:41 PM

Reply

This is a fantastic form…
Really Awesome!,
Thank you.
Toma Alexandru
February 19, 2010 at 7:40 AM

Reply

Thank you for the script.
I have read your implementation of ajax contact form and is good.
Thank you.
gideon
February 20, 2010 at 2:17 PM

Reply

Kuddo’s for the follow up e-mail. It’s working fine. Code looks solid, haven’t found any bugs. Would be nice to be able to integrate it with html instead of havin a separate php

I will definitely give it a try on my next project.

One suggestion is skins. Since it’s a plug and play form it would make sense to offer some different skins with it. If I make one I’ll sent it your way.
Gregory
February 21, 2010 at 3:16 AM

Reply

Hi Gabriel

I have a little problem with Your script. When I try to send message with polish special characters (i.e. ą, ć) I get weird
signs that are not polish charakters (i.e. Ä) in the message that comes on my inbox. I tried to change the charset into
parse.php file, from iso-8859-1 to iso-8859-2 and utf-8 but it does not give any results do You have any solution for this?

Waiting for message from You…

Sorry for my english
1. Gabriel C.
  February 22, 2010 at 8:33 AM
  
  Reply
  
  @Gregory,
  
  I will investigate this and give you an update. I’ve made tests too with charset ‘iso-8859-2′ but the results were the same.
  
  PS: Did you test other contact forms? How did you get the characters?
  1. Gregory
    February 28, 2010 at 10:36 PM
    
    Reply
    
    Hi Gabriel,
    i don’t know where was the problem, but i have probably changed something in the source code. When i tried to send a message from an unchanged form (only charset changed) it works great so now i did less changes and it is OK
    
    THANKS!
Jack
February 21, 2010 at 5:58 AM

Reply

I did not get it to work on blue host

I got the follow support feedback..
You will need to make a change to this file: /home3/public_html/contact-app/parse.php
line 87: $senderHeaders .= ‘From: ‘.$sender_email. “\r\n”;

I did change it to a email using:

$senderHeaders .= ‘From: ‘.”myemail@hotmail.com”. “\r\n”;

Still did not work
1. Gabriel C.
  February 22, 2010 at 1:16 AM
  
  Reply
  
  @Jack,
  
  I don’t know how your hosting account is configured. However, I’ve made an upgrade to the script by integrating the well known PHPMailer Class. Consider downloading the new script and let me know how it works.
Adam
February 21, 2010 at 10:44 AM

Reply

Really Awesome!,
Thank you.
Aco
February 21, 2010 at 1:49 PM

Reply

Hi Gabriel, Thank you so much for the awesome contact form.

I integrated it on my contact form and I’ve got an error message such as “The mail cannot be sent due to an internal error. Please retry later!”…
1. Jack
  February 22, 2010 at 1:11 AM
  
  Reply
  
  Thats the same error msg I got!
2. Gabriel C.
  February 22, 2010 at 1:22 AM
  
  Reply
  
  @Aco,
  
  You usually get this error if the mail cannot me sent. This is most probably because the mail() function is not activated on your hosting account OR the (mail) server is not properly configured.
  1. Aco
    February 23, 2010 at 3:34 PM
    
    Reply
    
    Thanks for your support Gabriel!
    I changed hosting server and it works well! Thanks again for providing such a great script.
gideon
February 22, 2010 at 2:21 AM

Reply

Hey Gabriel,

One thing I found confusing is that after you’ve sent a message, be it successful or not, you don’t return to the form. This I believe is bad practice and it looks rather weird. It should reset itself after a successful message. So instead of removing the form I propose a “success” message in the top “please correct” box without removing the form.

Also when you start typing your e-mail the “please correct” message shouldn’t be popping up. Only when the extension is incorrect should the message appear.
It even appears when I tab from the name field to the e-mail field.

A layout thing: I think the captcha and the security field should be on the same line next to each other. There is no reason for the captcha to take up two lines.

Gideon

P.s

It’s a great script but there are some areas that need improvement from a usability point of view. If you’ve stopped supporting this let me know and I can sent you my updated code.
1. gideon
  February 22, 2010 at 2:32 AM
  
  Reply
  
  Forgot a last usability thing. To make it easier for people to integrate with their own layout the labels would be better inside the fields instead of next to it. This is really easy modification and makes it look a lot more professional and easier to integrate in a third party lay out.
  1. gideon
    February 22, 2010 at 3:02 AM
    
    Reply
    
    http://i.imgur.com/s1Xow.png
    
    To show you what I mean. I am scrutinizing I know, but since you all ready put in so much effort making these small improvements will top that cake with a cherry.
  2. Gabriel C.
    February 22, 2010 at 8:04 AM
    
    Reply
    
    I agree that the labels inside the fields are looking professional. However, users must be able to choose between this in-field label feature and the default one. The latter is much more used than the former.
    1. gideon
      February 22, 2010 at 12:34 PM
      
      Reply
      
      True that. However it would be great to see support for in-field labels. Great to see you tackled the tab bug.
      
      More pressing is the fact that the current form is breaking the layout. Whilst you are using Ajax for the right things you are contradicting it’s function by changing the lay out after a submit or error. Not refreshing the page is great but the way you use it now it does exactly the opposite. What do you think?
      
      Please don’t mistake my critique for something I can assure you it’s not. I have the best intentions and I think you have been doing a great job. Specially releasing it to the community is impressive and admirable. I for one never take the time to turn development scripts in something for the community.
      
      Gideon
    2. gideon
      February 22, 2010 at 12:37 PM
      
      Reply
      
      ALSO:
      
      gideon@whatever.hsnkf
      
      is now a valid e-mail address.
2. Akshay Ghate
  February 25, 2010 at 3:39 PM
  
  Reply
  
  Hi,
  Have you managed to add a success message? This is a fantastic script but I cannot use it without a success message..
  1. Gabriel C.
    February 25, 2010 at 8:05 PM
    
    Reply
    
    @Akshay, The script already has a successful message notification. Do you really believe I made it without such a notification ? Perhaps you didn’t install the script correctly. Keep trying
    1. Akshay Ghate
      February 25, 2010 at 8:26 PM
      
      Reply
      
      ooops sorry… It is working when I run it from the downloaded package but it doesn’t work when I insert the form into my page… I am running a couple other jquery plugins and they might be the cause.. I will keep trying…
      Fantastic job by the way..
      1. Akshay Ghate
        February 26, 2010 at 12:30 AM
        
        It’s working
        You can take a look at this page to see the working script !! –
        http://weboreviews.com/contact.php
        Can this script be modified to build a bit complex forms like this one? – http://weboreviews.com/quote.php
        
        Thanks a million !!
Jared
February 22, 2010 at 5:23 AM

Reply

Very nice! We went through 8 different scripts, only to be frustrated with broken code, links, and tutorials, to finally find one so simple, beautiful and it works! We are avid php programmers, but are not yet too versed with ajax, so this solution was perfect! Thanks~
Jan
February 22, 2010 at 7:09 AM

Reply

Hey Gabriel,
first of all, thanks for providing such a great script.
it was so easy to implement in my existing layout.

The is i think only one little bug in the script.
When you tab through the form (from name to email) the error msg for email pop up straight away. Even before you get a chance to enter your email.

Is that known or am I the only one?

Best Regards,

Jan
1. gideon
  February 22, 2010 at 7:11 AM
  
  Reply
  
  Read two comments up
  1. Jan
    February 22, 2010 at 7:14 AM
    
    Reply
    
    ooops
    so i am not the only one
    Let’s hope there is a simple solution for that!
    1. Gabriel C.
      February 22, 2010 at 7:47 AM
      
      Reply
      
      I’ve updated the script. You can download it again from the same location. Now when you tab through the form the error will not pop-up anymore. You can see the demo!
Jan
February 22, 2010 at 8:01 AM

Reply

Hey that is what i call support
unfortunately now the live validation doesn’t work anymore

It was great that when you tabbed out of a field it got checked. this is not anymore the case.
hope i make sense…

Jan
1. Gabriel C.
  February 22, 2010 at 8:09 AM
  
  Reply
  
  Every time I make updates, I test the script again and again. It does work fine for me. You can check the live demo. Make sure you refresh the page too .
Janak Rajani
February 23, 2010 at 6:16 AM

Reply

Great script here – its wonderful to see that people still share their talents with the world.

Well done for all yor hard work.
Phil
February 24, 2010 at 1:07 AM

Reply

Can someone help! I keep on getting this error message when I try sending message:

“The mail cannot be sent due to an internal error. Please retry later!”
1. gideon
  February 24, 2010 at 2:45 AM
  
  Reply
  
  See if your hosts php is configured properly.
Emma
February 24, 2010 at 9:13 PM

Reply

Thank you for this great script! Works beautifully
Jeanne
February 25, 2010 at 3:11 PM

Reply

I have the form running as provided but I want to add more form elements such as requiring the user to add a phone number.

How do I go about adding this to the form without causing errors?

I tried to copy a text field and renamed it sender_phone and then went through the code to add this wherever I saw the sender_subject but I couldn’t get it to work.

TIA
1. Gabriel C.
  February 25, 2010 at 8:32 PM
  
  Reply
  
  @Jeanne, do you want to add the phone number as a required field?
  1. Jeanne
    February 26, 2010 at 4:29 AM
    
    Reply
    
    Yes, I would like to add the phone number field and make it required. I would also like to know how to add fields that aren’t required for future reference.
    
    TIA!
    1. Akshay Ghate
      February 26, 2010 at 4:37 AM
      
      Reply
      
      I would like to know too…
Falcon1986
February 26, 2010 at 6:40 AM

Reply

Works good
Joao Paulo Pacheco
February 27, 2010 at 3:11 AM

Reply

First I’d like to say THANK YOU for this great Code.

The form is working just fine and it was very simple to edit.

The implementation of a “skin/theme” is the next step, or even a “backoffice/administration” for manipulation the form and it’s fields.

Best Regards
Jody Sachse
February 27, 2010 at 12:45 PM

Reply

Thanks this is an awesome form and saved me a ton of time.
phpbabu
February 28, 2010 at 5:53 AM

Reply

Thanks for providing the nice script.
Amitav
February 28, 2010 at 5:14 PM

Reply

Thanks Gabriel,

Did like it! Is a good piece of application.
Giorgos
March 1, 2010 at 1:41 PM

Reply

Propably, the best script I have ever seen for forms!
fagbemi
March 1, 2010 at 9:24 PM

Reply

Well, I mean what else can I say; it was fantastic and the codes really worked well.

I edited some part of the codes and used it with mine, I just couldn’t believed how wonderful it worked.

Nice job to you my guru……

Thank you.
mike
March 2, 2010 at 1:24 AM

Reply

Hi
regarding your mail how i like your form here my answer

Basicly when you need a very simple form yes it works but when comes up that you need more fields and different elements like radio checkboxes ect the script is far away from to be usefull i spend now allready 4 days to modify the script to my nessasaries and think about to change for a other better solution you can see your script here (still buggy) http://www.usenetbrasil.com.br/signup.php i include checkbox validation creditcard validation and some other functions by example hide some fields when is not nessasary select a other country than brasil will hide the cpf field select a other payment than creditcard will hide cvv and cardnumer field

finaly you are far away from a proper working solution for complex forms take a look here http://livevalidation.com/examples maybe you can get here some ideas

best regards mike
1. Akshay Ghate
  March 2, 2010 at 2:54 AM
  
  Reply
  
  Hi Mike,
  Can you please share your modified script? You can contact me through my website
Jay
March 2, 2010 at 10:23 AM

Reply

Gabriel,

This script was awesome. I had to make it fit within my own application layout, so I had to modify several paths and change the CSS up a little bit, but the script works wonderfully. I now have a favorite new contact form for website developments.
Amlan Nandy
March 8, 2010 at 8:03 PM

Reply

Hi,

the script is good one.It is very helpfull.Can you please provide me script for other ajax usefull scripts?

Amlan
pagol
March 9, 2010 at 10:27 AM

Reply

really nice and excellent ajax forum.. i got many from web.. but nice like this… but one thing why they many files..??

one more thing. i tried to use without include mode.. i just copy all code and paste my page.. ( in my page have other code too ) then now work send mail .. no idea why…

anyway your code really nice.. i like it much

thanks u soo much
Roberto
March 9, 2010 at 11:02 PM

Reply

Its possible to have validate the email field , i mean to check before submit if the email its a existent email or not, as Php mailer FE do…

also, i guess what the best way to have the form in 2 language… i have to duplicate almost all script or theres a simple way?