25 July 2010

Making beautiful pop-up contact form with jQuery and jQuery UI. If JavaScript is disabled the form is usual.

jQuery popup formIf you don't know how to make HTML form then follow part 1 of this tutorial: HTML Contact Form. If you already have working form and you need to Ajaxify it then you can skip the part 1. But this tutorial uses the form from that tutorial.

Get jQuery UI:

Pick a theme or make your own and download it: jQuery UI. There is a part called "Overlay and Shadow Classes", that box is where we are going to put our form in. Get it with all features, meaning that check all the checkboxes.

HTML code of popup:

We need both codes popup code and non popup code, if there is JavaScript enabled then we see the popup if not then we are taken to the page where our regular form is. Here is the code for the popup form:
Source code viewer
  1. <html><head>
  2. 	<!-- jQuery UI css file for the looks -->
  3. 	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
  4. </head><body>
  5. 	<!-- This makes the shadow -->
  6. 	<div class="ui-overlay">
  7. 		<div class="ui-widget-overlay"></div>
  8. 		<div class="ui-widget-shadow ui-corner-all" style="width:290px;height:382px;position:absolute;left:50px;top:30px"></div>
  9. 	</div>
  10. 	<!-- This is -->
  11. 	<div style="position:absolute;width:268px;height:360px;left:50px;top:30px;padding:10px;font-size:62.5%;font-style:Trebuchet MS ,sans-serif" class="ui-widget ui-widget-content ui-corner-all">
  12. 		<div class="ui-dialog-content ui-widget-content" style="background:none;border:0">
  13. 			<!-- Form start -->
  14. 			<p><form action="url/of/your/php/script" method="post" id="contact_us">
  15. 				<label for="name">Name: </label><br><input type="text" name="name" /><br /><br />
  16. 				<label for="email">Email Address: </label><br><input type="text" name="email" /><br /><br />
  17. 				<label for="subject">Subject: </label><br><input type="text" name="subject" /><br /><br />
  18. 				<label for="message">Message: </label><br><textarea name="message" cols="48" rows="6"></textarea><br /><br />
  19. 				<input type="submit" />
  20. 			</form></p>
  21. 			<!-- Form end -->
  22. 		</div>		
  23. 	</div>
  24. </body></html>
Programming Language: HTML
If you modify the form you might have to play with the style attributes, also if you get other style(I picked UI Lightness).

Link:

Now we need to make a link. That redirects if JavaScript is disabled or opens the popup if it's not disabled. Now save the form as html file, called form.html. There will be the form witch appears for users that don't have JavaScript. The popup comes by javascript. So here is my index.html file.
Source code viewer
  1. <html><head>
  2. 	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />	
  3. 	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  4. 	<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
  5. </head><body>
  6. 	<script type="text/javascript">
  7. 		$("body").append('<a href="#" onClick="javascript:contact_form()">Contact Us</a>');
  8. 		function contact_form(){
  9. 			$("body").append('\
  10.   		  		<div class="ui-overlay">\
  11. 					<div class="ui-widget-overlay"></div>\
  12. 					<div class="ui-widget-shadow ui-corner-all" style="width:290px;height:382px;position:absolute;left:50px;top:30px"></div>\
  13. 				</div>\
  14. 				<div style="position:absolute;width:268px;height:360px;left:50px;top:30px;padding:10px;font-size:70%;font-style:Trebuchet MS ,sans-serif" class="ui-widget ui-widget-content ui-corner-all">\
  15. 					<div class="ui-dialog-content ui-widget-content" style="background:none;border:0">\
  16. 						<p><form action="url/of/your/php/script" method="post" id="contact_us">\
  17. 							<label for="name">Name: </label><br><input type="text" name="name" /><br /><br />\
  18. 							<label for="email">Email Address: </label><br><input type="text" name="email" /><br /><br />\
  19. 							<label for="subject">Subject: </label><br><input type="text" name="subject" /><br /><br />\
  20. 							<label for="message">Message: </label><br><textarea name="message" cols="48" rows="6"></textarea><br /><br />\
  21. 							<input type="submit" />\
  22. 						</form></p>\
  23. 					</div>\
  24. 				</div>');
  25. 		}
  26. 	</script>
  27. 	<noscript><a href="form.html">Contact Us</a></noscript>
  28. </body></html>
Programming Language: HTML
I suggest to modify the file, put JavaScript to separate file and include it. Plus I would move all the HTML to on line.

Close button:

Here is how I made a nice little closing button. It's the HTML in our script.
Source code viewer
  1. function contact_form(){
  2. 	$("body").append('<div id="contact_popup">\
  3.     		<div class="ui-overlay">\
  4. 			<div class="ui-widget-overlay"></div>\
  5. 			<div class="ui-widget-shadow ui-corner-all" style="width:290px;height:382px;position:absolute;left:50px;top:30px"></div>\
  6. 		</div>\
  7. 		<div style="position:absolute;width:268px;height:360px;left:50px;top:30px;padding:10px;font-size:70%;font-style:Trebuchet MS ,sans-serif" class="ui-widget ui-widget-content ui-corner-all">\
  8. 			<a href="#" onclick="javascript:$(\'#contact_popup\').remove()" style="float:right">X</a>\
  9. 			<div class="ui-dialog-content ui-widget-content" style="background:none;border:0">\
  10. 				<p><form action="url/of/your/php/script" method="post" id="contact_us">\
  11. 					<label for="name">Name: </label><br><input type="text" name="name" /><br /><br />\
  12. 					<label for="email">Email Address: </label><br><input type="text" name="email" /><br /><br />\
  13. 					<label for="subject">Subject: </label><br><input type="text" name="subject" /><br /><br />\
  14. 					<label for="message">Message: </label><br><textarea name="message" cols="48" rows="6"></textarea><br /><br />\
  15. 					<input type="submit" />\
  16. 				</form></p>\
  17. 			</div>\
  18. 		</div></div>');
  19. }
Programming Language: jQuery
And that's it, there are more cool features in jQuery UI. Like CSS buttons for example. If you are using CodeIgniter then you can combine this tutorial with "CodeIgniter AJAX Form Submission With jQuery" and you will get fully functional contact form with ajax.