Create Secure AJAX Forms with CAPTCHA, Realtime Validation & PHP Backend

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 8,000 monthly page views and over 440 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.

The script can be practically used to create any type of AJAXified, yet secure form that collects data and sends it to your email inbox including but not limited to:

  • Contact/Feedback Form
  • Support Form
  • Customer Survey Form
  • Online Product Order Form
  • Event Registration Form
  • Employment Form
  • Make a Room Reservation Online Form
  • Send Testimonial Form
  • Subscribe to Newsletter Form
  • Gift Order Form

Read more if you are interested in creating interactive web forms without page reload…

AJAX Form with CAPTCHA, Realtime Validation and PHP Backend

The aim of this basic tutorial is to help you to create a simple (table-less) AJAX Contact Form using jQuery & PHP. It will give you an idea of how you can create similar web applications using jQuery and AJAX. We will have a HTML page which will contain the form, a CSS file, a .PHP page where the data will be sent and another file where the validation function(s) will be located.

Step 1 – Creating the configuration file


// To
define("WEBMASTER_EMAIL", "");

Here you should fill the e-mail address where you wish to receive the mail as well as the address where you wish to receive the replies (usually the same).

Step 2 – Creating the css file


Credits: Bit Repository
CSS Library:

html, body  { padding: 0; border: 0px none; }

.notification_error {
	border: 1px solid #A25965;
	height: auto;
	width: 90%;
	padding: 4px;
	background: #F8F0F1;
	text-align: left;
	-moz-border-radius: 5px;

.notification_ok {
	border: 1px #567397 solid;
	height: auto;
	width: 90%
	padding: 8px;
	background: #f5f9fd;
	text-align: center;
	-moz-border-radius: 5px;

.info_fieldset { -moz-border-radius: 7px; border: 1px #dddddd solid; }

.info_fieldset legend {
	border: 1px #dddddd solid;
	color: black; 

	font: 13px Verdana;

	padding: 2px 5px 2px 5px;
	-moz-border-radius: 3px;

.button {
	border: 1px solid #999999;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC; 

	background: white;

	color: #333333; 

	font: 11px Verdana, Helvetica, Arial, sans-serif;

	-moz-border-radius: 3px;

/* Label */
label {width: 140px; padding-left: 20px; margin: 5px; float: left; text-align: left;}

/* Input, Textarea */
input, textarea {
	margin: 5px;
	padding: 0px;
	float: left;

	border: 1px solid #999999;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC; 

	color: #333333; 

	font: 11px Verdana, Helvetica, Arial, sans-serif;

	-moz-border-radius: 3px;

/* BR */

br { clear: left; }

Read more from this entry…