Aug
3

Ajax Stylish Captcha and Contact Form using JQuery and PHP.

Author ZeeShaN    Category AJAX, JQuery, PHP, Web Design     Tags , , ,

First of all, thanks to all of my readers who like my work and prove this by sending feedbacks over facebook style tutorials. I always try to create some useful tutorials for my users using Jquery. This tutorial is about ajax based contact form with jquery validation and ajax based captcha.
Captcha is main part of any form and if it is ajax based then it looks awesome. Hope you will like this and send me your feed back. Thanks !

JQuery Code

// <![CDATA[	
$(document).ready(function() { 
 
 $('#Send').click(function() {  
 
		// name validation
 
		var nameVal = $("#name").val();
		if(nameVal == '') {
 
			$("#name_error").html('');
			$("#name").after('<label class="error" id="name_error">Please enter your name.</label>');
			return false
		}
		else
		{
			$("#name_error").html('');
		}
 
		/// email validation
 
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var emailaddressVal = $("#email").val();
 
		if(emailaddressVal == '') {
			$("#email_error").html('');
			$("#email").after('<label class="error" id="email_error">Please enter your email address.</label>');
			return false
		}
		else if(!emailReg.test(emailaddressVal)) {
			$("#email_error").html('');
			$("#email").after('<label class="error" id="email_error">Enter a valid email address.</label>');
			return false
 
		}
		else
		{
			$("#email_error").html('');
		}
 
		$.post("post.php?"+$("#MYFORM").serialize(), {
 
		}, function(response){
 
		if(response==1)
		{
			$("#after_submit").html('');
			$("#Send").after('<label class="success" id="after_submit">Your message has been submitted.</label>');
			change_captcha();
			clear_form();
		}
		else
		{
			$("#after_submit").html('');
			$("#Send").after('<label class="error" id="after_submit">Error ! invalid captcha code .</label>');
		}
 
 
	});
 
	return false;
 });
 
 // refresh captcha
 $('img#refresh').click(function() {  
 
		change_captcha();
 });
 
 function change_captcha()
 {
	document.getElementById('captcha').src="get_captcha.php?rnd=" + Math.random();
 }
 
 function clear_form()
 {
	$("#name").val('');
	$("#email").val('');
	$("#message").val('');
 }
});

I used some stylish fonts to get this awesome captcha. Captcha is ajax based and its color changes randomly. I used 2 colors and 2 fonts.

CSS

body{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px}
#wrap{
	border:solid #CCCCCC 1px;
	width:203px;
	-webkit-border-radius: 10px;
	float:left;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding:3px;
	margin-top:3px;
	margin-left:80px;
}
 
.error{ color:#CC0000; font-size:12px; margin:4px; font-style:italic; width:200px;}

.success{ color:#009900; font-size:12px; margin:4px; font-style:italic; width:200px;}

img#refresh{
	float:left;
	margin-top:30px;
	margin-left:4px;
	cursor:pointer;
}
 
#name,#email{float:left;margin-bottom:3px; height:20px; border:#CCCCCC 1px solid;}

#message{ width:260px; height:100px;float:left;margin-bottom:3px; border:#CCCCCC 1px solid;}

label{ float:left; color:#666666; width:80px;}

#Send{ border:#CC0000 solid 1px; float:left; background:#CC0000; color:#FFFFFF; padding:5px;}

HTML

<form action="#" name="MYFORM" id="MYFORM">
	<label>Name</label>
	<input name="name" size="30" type="text" id="name">
	<br clear="all" />
	<label>Email</label>
	<input name="email" size="30" type="text" id="email">
	<br clear="all" />
	<label>Message</label>
	<textarea id="message" name="message"></textarea>
	<br clear="all" />
 
	<div id="wrap" align="center">
		<img src="get_captcha.php" alt="" id="captcha" />
 
		<br clear="all" />
		<input name="code" type="text" id="code">
	</div>
	<img src="refresh.jpg" width="25" alt="" id="refresh" />
 
	<br clear="all" /><br clear="all" />
	<label>&nbsp;</label>
	<input value="Send" type="submit" id="Send">
</form>

Downloads files to get this latest tutorial.

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

  • ZeeShaN

    Nice work Roland :)

    January 27 2012
    CommentsLike
    • Roland van Helven

      hm, seems some text got swallowed. so the form tag must be

      form action=”test.php” name=”MYFORM” id=”MYFORM” method=”POST”

      and

      2. look for if(response==1) in the java_script and replace…

      in the process.php at the end of each line fill in the html line break BR between the quotes.

      seems the html brackets and the reserved word java_script without underscore didn’t get through. man, that looks confusing now…

      January 26 2012
      CommentsLike
      • Roland van Helven

        if you want to process the data do the following :

        1. replace the # in the form action (action=”#”) with the .php file that processes your form data (action=”process.php”) and add method=”POST” to the same form tag. looks like this :

        2. look for if(response==1) in the and replace all between the first {…} with a function call e.g. submitform(). looks like this :

        if(response==1)
        {
        submitform();
        }
        else
        …

        now simply add the funtion to sumbit the form :

        function submitform()
        {
        document.forms.MYFORM.submit();
        }

        in your process.php you process the data like this :

        <?php
        echo $_POST['name']."”;
        echo $_POST['email'].”";
        echo nl2br($_POST['message']).”";
        ?>

        this simply displays the data you sent on the screen. use the mail() function to send the data via email.

        January 26 2012
        CommentsLike
        • Roland van Helven

          if it always shows “succes” just change post.php as follows :

          if(@$_REQUEST['code'] || @strtolower($_REQUEST['code']) == strtolower($_SESSION['random_number']))
          to
          if(@$_REQUEST['code'] == strtolower($_SESSION['random_number']) || @strtolower($_REQUEST['code']) == strtolower($_SESSION['random_number']))

          if the fonts or images don’t show please check the paths for fonts and images in get_captcha.php and index.php (and the style.css file if any).

          January 24 2012
          CommentsLike
          • rahil

            dear zeeshan, captcha does not work properly. it is not saying captcha is wrong. fix it. and also let us know where to add my email so form can forward the form result.

            January 17 2012
            CommentsLike
            • Jay

              Does not work. You can type anything you want into the captcha box and it will still read as a succesful captcha

              January 08 2012
              CommentsLike
              • irwin

                Sorry, but your demo doesn’t work… and also when you download file. What’s happen :( (
                is very nice!!

                January 05 2012
                CommentsLike
                • ZeeShaN

                  You can check another tutorial on my blog which is simple contact form. You can use that or it is simple to get the message and send it using php mail function.

                  December 24 2011
                  CommentsLike
                  • KL

                    Hmm where is the code that sends the message to my email?

                    December 23 2011
                    CommentsLike
                    • ZeeShaN

                      Thanks Idris :)

                      November 30 2011
                      CommentsLike










                      Enter your Email:

                      Click Here for Popular

                      Who I Am

                      Zeeshan Rasool

                      Software Engineer - PHP
                      Lahore - Pakistan

                      zeeshan(@)99points.info
                      Skype: zeeshan-rasool
                      gTalk: zishan.rasool85

                      Categories

                      Tags

                      99points adobe AJAX ajax pagination ajax rating ajax tutorial ajax voting system captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials dreamweaver cs5 Facebook facebox farmville ffmpeg flv google api hacking Joomla JQuery JQuery Gallery JQuery menus Jquery tutorial mafia war Mootools MySQL pagination Payment PHP php curl recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter wall script Web XSS youtube

                      Comments