AJAX Contact Form with CAPTCHA, Realtime Validator and PHP Backend
Posted on February 8, 2010, Filled under AJAX, PHP, jQuery,
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 BitRepository 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 Real-time 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.


Features list
- Real-time Form Validation that makes the form completion process interactive (can be enabled/disabled)
- Both JavaScript & PHP Validation
- Powerful CAPTCHA (Image Verification) with refresh feature (enable/disable it)
- Ability to easy add/edit/delete fields
- The form degrades gracefully into a simple PHP Contact Form if JavaScript is disabled
- 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)
- 3 Layouts Available: 'Left' and 'Right' Justified Horizontal Labels, Vertical Labels, In-Field Labels new
- The e-mail templates (message, subject) are customizable
- The errors and the notifications can be easily changed
- Option to redirect the user to a custom 'Thank you' page
- The script works in conjunction with other libraries beside jQuery such as MooTools or Prototype
- Set a custom subject for the mail that you receive if the subject field is removed
- "Send me a copy of the mail" feature
- Free Support (in case you are having trouble installing the script)
- A help page (documentation) that will guide you through the script setup
Server Requirements
- Either PHP4 or PHP5 Installed
- GD Library Enabled (only if you want to use the Anti-Spam Image)
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
Try it!
- BitRepository.com offers a 30 days money back guarantee. If for any reason you are not satisfied with this script you can request a refund and you will get your money back. No questions asked!
| | or | ![]() |
Testimonials
"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" -
"I had a real need for a clean and stylish contact form. I tried some 11 forms before I decided on one. I have to say your form was the winning choice hands down." -
"It works very good and it solved the problem of needing a form validation as well a as a success message in the same page." -
"I am working a project for patisserie web site in Turkey and i used your form form this web site contact page. Belong to me, your form is very useful and successful, thanks a lot." -
- February 8, 2010
- article by Gabriel C.
- 132 comments


132 Replies to "AJAX Contact Form with CAPTCHA, Realtime Validator and PHP Backend"
March 23, 2010 at 12:10 PM
Hey, i’ve been modifying this script for a little while now and I had a few questions. Ive tested the version both mine and a freshly downloaded version, and none of them seem to go to the success page after a success mail is sent. The mail sends correctly (I recieved it) but I am unable to view the success zone after the button is clicked. Any help would be great.
Awesome code, I will post a link after I fix a few bugs I ran into
April 8, 2010 at 8:46 AM
Did you manage to solve this problem? What’s the URL to the form? I could inspect it and tell you what’s wrong.
March 28, 2010 at 12:33 AM
Very nice working fine for me,
Thank you.
March 28, 2010 at 12:05 PM
Great working, very useful and thanks for the wonderful contribution.
March 29, 2010 at 2:05 AM
This contact form was amazingly simple to implement and extend. I also needed a newsletter subscription area so using most of the contact form code I was able to accomplish this very quickly. Thank you so much for your great work.
March 29, 2010 at 10:17 PM
Thank you brother, Your Contact Form is working flawlessly; i love it. appreciate your efforts in building in this wonderful app.
April 1, 2010 at 8:45 AM
Love, love the contact form. I have chosen not to use the validation for now. Check it out on my site, and send me a note from it. Thanks so much!
April 2, 2010 at 5:22 AM
I have searched for weeks looking for a mail form script to satisfy my requirements and yours does exactly what I need. I havent installed it in a web site yet so I cant comment on functionality, but I did copy the code and save it to an uploaded test page and found it to work okay.
I THANK you with deep gratitude because if it weren’t like guys like you who are willing to share your knowledge and time, novices like me (and many others) would really struggle.
So thanks again, I look forward to using the script.
April 8, 2010 at 8:44 AM
Thanks for your reply. I wanted to make a different AJAX Contact Form than the other ones that are out there and I am glad that people like you appreciate my work
April 3, 2010 at 12:13 PM
Just received your email.
thank you.
But I’ not using your form…
Cheers
April 4, 2010 at 5:01 PM
Thank you very much for providing such a wonderful contact form .
Keep it Up.
April 5, 2010 at 9:26 AM
Great script, the best I found in internet, also well working for me.. Thank You so much!
April 7, 2010 at 4:16 AM
Hi,
Thanks for contact form and email. Still I havent got time to try it.. I will definitely give review once I use it…
thanks
April 7, 2010 at 7:40 PM
Thanks gabriel, i love it. i have use it in my portfolio website http://www.zulsdesign.com
Awesome!!
April 10, 2010 at 9:09 PM
I have installed this contact form and works excelent . Keep up the good work
April 12, 2010 at 8:00 PM
thank you for the script
April 15, 2010 at 10:29 PM
Gabriel,
I have been waiting to say this and now I can: “It worked like a charm!”
Thanks for the script and your continued support. I must say this has now become the best contact form available on internet. Keep up the good work!
April 16, 2010 at 7:28 AM
How do I add additional fields to the contact form? Such as:
- First name
- Last name
- Addresses
- Prefix (Mr, Ms etc.)
I would like these to show in the message part of the email. (Some might be drop-down lists, or radio boxes)
I know how to add the fields in the HTML , but I’m wondering where else along the way I should add this in – among all the PHP and JavaScript – I’m just not sure.
If you tell/show us how to do one field, I’m sure it’ll be very helpful – and we can just repeat for all others
April 23, 2010 at 12:34 AM
@Anatolij Antonovič Ključinskij: I’ve just launched a new version of the script. You have the option to add/edit/delete new fields. More info can be found in the documentation page. The script cost is just $4 and you can download it immediately after the purchase.
May 13, 2010 at 10:27 PM
Hi Gabriel
Where do I find the download for the script you mentioned in this post to:
@Anatolij Antonovič Ključinskij
“I’ve just launched a new version of the script. You have the option to add/edit/delete new fields. More info can be found in the documentation page. The script cost is just $4 and you can download it immediately after the purchase.”
Thank you for your help
May 13, 2010 at 10:46 PM
You can purchase the script with the license that suits you by using either PayPal or Credit Card. The item is available for download immediately after payment is completed. You can find the payment buttons in the current post: http://bit.ly/c1GR5h
July 9, 2010 at 2:27 AM
I downloded a version a few months ago, it was the premium version but there was no charge (just subscribe to the newsletter) is this a different version than the new one, I am looking to add new fields also. Thanks.
July 9, 2010 at 7:59 AM
This is an improved version, yes. You can add and remove fields dynamically. The list of the new features is available on the post page.
April 16, 2010 at 7:36 AM
Hi, I set up the form, and it’s working well – good job! And of course – THANKS! Best form on the web.
However, it seems there’s a problem with the encoding of the auto-responder email from your Premium Contact Form, when viewed in MS Office Outlook Web Access. The auto-reply (as received) can be seen below (notice the strange characters).
***
Hallo Name!
Vielen Dank für Ihre E-Mail, die wir Ihnen hiermit zunächst automatisch bestätigen.
Wir bemühen uns Ihnen schnellstmöglich eine persönliche Antwort auf Ihre Anfrage zu geben.
Bis dahin bitten wir Sie um etwas Geduld und danken Ihnen schon im Voraus für Ihr Verständnis.
Mit freundlichen Grüßen
***
My thoughts on why it’s happening:
In the common.php file, I rewrote the text into German in UTF-8, but it seems that it gets converted to Latin-1 somewhere along the way.
Do you have any ideas where? Or how to fix this?
(I’m pretty sure that what I pasted above is the HTML template email. So another question – how does the contact form decide in which form to send it in – html or non-html?)
Thanks!
April 20, 2010 at 1:24 AM
Hi Gabriel… Ajax Contact Form is working fine now… Thank you so much. now I can use it for my personal website. http://ebaligya.x10hosting.com
April 26, 2010 at 3:19 AM
I just purchased the updated form…I was already using the free form but needed to add field.
Now I am wondering if I can have 2 working forms on my website. For example I need a contact form and a quote form, can I have both functioning easily with no script conflicts on my site?
April 26, 2010 at 3:28 AM
Hi! Yes you can, I did it on my site! But you need to make a few modifications, otherwise it didn’t work in all ways.
I can let you know where – it requires some tweaking with the php settings – what is your website, and where is the form to be accessed from (url)?
if u dont want ppl to see for security reasons, u can email me privately at: terry.the.bee [at sign here] gmail.com
April 29, 2010 at 8:01 AM
Thanks for the form it’s been awesome so far.
How would I validate a checkbox or radio button? I’ve been able to add both but they don’t validate even when they’re made mandatory.
Thanks.
May 3, 2010 at 3:41 AM
i already sent it to php.net too..
this is respons for
adam at worldwrestlingmania dot cjb dot net
06-Dec-2009 04:35(here http://php.net/manual/en/function.imagettftext.php)
and for all that’s using captcha to prevent send information in a form using a robot.
People you don’t need captcha!!!! There is another convenient method , to protect a website for spamming and is much simple:
Let’s consider the 1st page(with the form) and let’s say the second … index.php and receiver.php
index.php:
———————————————————————-
index.php
A form without captcha!!!
———————————————————————-
receiver.php
———————————————————————-
<?php
//receiver.php
function protectform(){
if($_SERVER["REQUEST_METHOD"]!='GET'){
$servername=$_SERVER["SERVER_NAME"];
$noterror=true;
if (isset($_SERVER["HTTP_REFERER"]))
$gethost=Parse_url($_SERVER["HTTP_REFERER"]);
else
$noterror=false;
$pimp=false;
if (!$noterror )
$pimp=true;
if(isset($gethost))
if ($gethost['host']!==$servername)
$pimp=true;
if ($pimp){
//print_r($gethost);
die('Go away hacker!');
}
}
}
protectform();
if(isset($_REQUEST['send'])and (trim($_REQUEST['data'])!='') ) echo('We already send to this page this value: '.$_REQUEST['data'].'’); else echo(‘Please try to fill something in that form!’);
?>Return to my form
———————————————————————-
how to probe it?
well let’s say you already upload it on
http://www.example.com/myfolder/ index.php and receiver.php
so try to digit
http://www.example.com/myfolder/index.php
now fill the form’s value…and click send.
now is redirected to receiver.php and you see the right value.
Let’s probe the vulnerability of the script:
digit again
http://www.example.com/myfolder/index.php
now when you see the form press File/Save as from the browser’s menu and save it on desktop like index.html
now try to open with notepad to edit it and change this line:
to something like this:
now save it and double click it from desktop.
well what you see when you already fill that text form and you send the data to http://www.example.com/myfolder/ ?
(For php beginners:www.example.com can be http://www.banana.com too , i don’t know where you will probe this software)
to all people who said :”php is unsecure” i respond with :
I am writing scripts from 1992, my opinion like expert is : php rooooooooolez!!! people if you don’t know how to write scripts in php try php.net to learn something. me,Constantin
May 11, 2010 at 4:11 AM
Excellent and extremely fast technical support. Thanks..
May 11, 2010 at 11:17 PM
I have one little problem with the Form.
I uploaded the fresh downloaded form on a freehoster for testing purposes. (the only thing i added is my email address and name in the php file).
So I fill out the form and click on the Send button and it tells me that the mail is successfully sended, but the email never arrives in my inbox mail folder. I tried different mail services like gmail, web.de and gmx.com. but everytime the mail of the filled out form didi´nt arrive in my mail inbox folder.
I hope someone can help me.
May 12, 2010 at 9:45 PM
Tobias,
Try this on a paid hosting server, most free hosts doesn’t offer SMTP. I think thats whhy u are unable to get email.
May 20, 2010 at 3:25 AM
Awesome! I bought the form and had Gabriel modify it to my needs. He did exactly what I asked and it works great. Very clean, smooth and functional. Great support, fast and courteous. If you would like to see it, click here: http://www.deannixondesign.com/form2/ Highly Recommended.
May 21, 2010 at 5:02 AM
This script is exactly what I was looking for to match my site’s new layout! Thanks!
June 1, 2010 at 1:07 AM
Gabriel
I bought the script from you a few weeks back, but unfortunately, it is way over my head. Would you possibly do some customizing for me and direct me on getting the form working on my site?
Thank you
Sandy K
June 1, 2010 at 1:10 AM
Please give me the URL to the page from your website where the form is located. I want to check how it was installed.
June 21, 2010 at 9:22 PM
http://www.pmcicareers.com/contact_test.html
and
http://www.pmcicareers.com/page3.php
Can you please tell me what I am doing wrong?
Thank you
Sandy
June 23, 2010 at 2:14 AM
Okay, I am getting the hang of it, but…
I am only getting
Name
Email Address
IP Address and Message – the other elements are not in the Email message.
I added the additional fields to the MESSAGE BODY in common.php.
I am not sure if I need to edit parse and parse2.
I NEED HELP PLEASE SOMEONE? Thank you in advance.
you can see contact form at:
http://www.pmcicareers.com/page3.html
I want to get it right before I go live
June 23, 2010 at 3:05 AM
My advice would be to stop using IFRAMES. They are just not necessary in this case. That’s why only a part of the form is visible when you press submit. Can you tell me why did you load the form in an IFRAME? You can increase its height if you are keen to use it.
June 7, 2010 at 4:22 AM
I am trying to add a checkbox that the user has to check (to agree to terms) before filling out the form. Your documentation appears to not support check-boxes.
Shouldn’t this below just work?
June 7, 2010 at 4:24 AM
I also noticed on the main contact php, there is no provision for checkboxes.
August 19, 2010 at 4:30 AM
did you figure out how to add a checkbox in this current form?
June 9, 2010 at 3:37 PM
Hello,
This is a really good form! Just one question – could you tell me how to add a checkbox form item? I’ve tried but it doesn’t work!
Thanks
Simon
June 23, 2010 at 8:02 PM
hi
in this premium script we have
Name
E-Mail
Subject
Message
but i need to extend the list with
Phone number
address
education etc,
tell me how can i extend this
June 23, 2010 at 8:05 PM
You need to edit $formFields in common.php. Consider checking the help file. It contains instructions regarding the addition of new fields.
July 6, 2010 at 8:16 AM
Very useful tutorials, thank you Gabriel
July 15, 2010 at 12:40 AM
I’m having some problems to add a new field to the form. Follow the instructions of creating a new field on the commom.php file but then they don’t show up on the page. I changed the names…
any idea?
Thanks for an amazing code!
very helpful
July 19, 2010 at 1:44 PM
Did you manage to add new fields? If not, consider sending me the modified $formFields variable to support { at } bitrepository ( . ) com. This way I can figure out what’s the problem. I can also advice you what to do, if you did not edit it the right way.
August 12, 2010 at 12:14 PM
Patricia, please let me know what he tells you – I’m also having the same problem!
August 19, 2010 at 4:07 AM
Subject: REQUIRED FIELDS SHOWN
Before I buy this form, I’d like to know if it automatically marks required fields as such, or is it possible to do this manually?
August 19, 2010 at 4:18 AM
You can set the mandatory fields from the configuration file of this script. If you want to point out which fields are required, you can use a red star or something similar after the name of the field that is set in the configuration file. If you purchase the script and need assistance with this, I will help you
August 19, 2010 at 4:22 AM
That’s cool – so it’d just be setting some inline style, right?
What about checkboxes and radio buttons – is it possible to add these to the form?
August 19, 2010 at 4:27 AM
Yes, you can set some in-line style. The check-boxes and radio buttons can only be added manually at the moment. In the next version of the script, I will make sure that they will be easy to add just from the configuration file.
August 19, 2010 at 4:29 AM
Cool. What else is in plan for the next script? When do you think you’ll release it?
Also, I’m trying your free form just to see how it is – and it seems that the message field doesn’t support new lines and just bulks them all on one line… is there a way to disable this?
August 19, 2010 at 4:47 AM
In the next version of the script, I will add support for radios and check-boxes form elements and also the option to send mail with attachment
If you purchase the current version, you will also get the updates from the new one. I am planning to release it in the beginning of September.
Regarding the new lines issue in the free script: make sure you add
$message = nl2br($message);before the line where the mail() function is used.August 19, 2010 at 5:08 AM
Thanks. Is this behavior fixed in this premium script?
August 19, 2010 at 5:16 AM
Yes, this behavior is fixed in the premium script. You’re not the first who noticed it. Therefore, I had to update the script
August 19, 2010 at 5:54 AM
Not true. For me the message show up all on one line.
I looked at the e-mail (show original) in Gmail, and it says this, maybe this is the problem:
–b1_12324….
Content-Type: text/plain; charset = “utf-8″
Content-Transfer-Encoding: 8bit
BODY_MESSSAGE_TEXT
–b1_12324….
Content-Type: text/html; charset = “utf-8″
Content-Transfer-Encoding: 8bit
Name Test just sent you a message through the contact form:
E-Mail: test@gmail.com
IP: XXX (XXX)
Line 1
Line 2
Line 4
Line 6
August 19, 2010 at 6:27 AM
Yup, just confirmed it – used your un-edited script that came in the ZIP file and it doesn’t show line breaks in Gmail, haven’t tested on others.
The code of the email is as follows – notice that the non-HTML message contents aren’t showing! Just says “BODY_MESSSAGE_TEXT
how do we fix it?
“. The form is broken
I replaced Email and IP fields with XXX to prevent hacking etc.
CODE RECEIVED IN EMAIL BELOW:
Delivered-To: XXX@gmail.comReceived: by XXX with SMTP id XXX;
Thu, 19 Aug 2010 11:18:07 -0700 (PDT)
Received: by XXX with SMTP id XXX;
Thu, 19 Aug 2010 11:18:06 -0700 (PDT)
Return-Path:
Received: from XXX
by mx.google.com with ESMTP id XXX
Thu, 19 Aug 2010 11:18:06 -0700 (PDT)
Received-SPF: neutral (google.com: XXX is neither permitted nor denied by best guess record for domain XXX) client-ip=XXXX;
Authentication-Results: mx.google.com; spf=neutral (google.com: XXX is neither permitted nor denied by best guess record for domain of XXXX) smtp.mail=XXX
Received: by XXXX.XXXX
id XXXX; Thu, 19 Aug 2010 20:18:06 +0200 (CEST)
To: Webmaster XXXX
Subject: Billing Question
Date: Thu, 19 Aug 2010 20:18:05 +0200
From: Name
Message-ID:
X-Priority: 3
X-Mailer: PHPMailer 5.1 (phpmailer.sourceforge.net)
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="b1_XXXX"
--b1_XXXX
Content-Type: text/plain; charset = "iso-8859-2"
Content-Transfer-Encoding: 8bit
BODY_MESSSAGE_TEXT
--b1_XXX
Content-Type: text/html; charset = "iso-8859-2"
Content-Transfer-Encoding: 8bit
Name just sent you a message through the contact form:
E-Mail: XXX
IP: XXXX
asdfasdfas
asdfasdf
asdfasdf
safasdfasdfsa
--XXXX
August 21, 2010 at 10:17 AM
Hello,
I would also be very interested in the option “sending emails with attachment”. Will it also be possible to restrict the attachment, for example only picture files?
Is it with the current version possible to customize it by myself and add an upload field?
Thanks
August 25, 2010 at 11:09 AM
Hi, here in italian we have problem with “è, ì, à, ò” when my customer send me a mail. Where can I modify the charset?
thanks
Arcibald
August 25, 2010 at 6:30 PM
Another information: in config.php file, I have
iso-8859-1
Thanks
August 25, 2010 at 6:32 PM
Sorry for the tag; repeate:
I have iso-8859-1 trought charset tags.
Arcibald
August 27, 2010 at 10:50 AM
put it as utf-8
August 27, 2010 at 11:15 AM
Very well done; perfect.
Thanxs
Arcibald
August 27, 2010 at 11:15 PM
Gabriel, I would like some help with the script – I posted my problem a few posts up. Can you please look at it? Thanks