Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers

Formula Leap – Online Science and Maths Formulas Coming Soon

Homework, Projects, Exams or Experiments, We always need Formulas in our everyday life. Internet which has become a massive storehouse for all kinds of data has never been a good home for Formulas.

We hence decided to create a website dedicated to providing all the formulas in the world. So today we would like to introduce you, our new Project called FormuLeap.

FormuLeap

FormuLeap

FormuLeap is a Hitherto Labs project which has been launched as a part of the Hitherto Network© and when launched is going to be the world’s largest collection of Physics, Chemistry and Maths Formulas online, This is going to be a community controlled site with opportunity for each one of you to contribute and edit formulas.

FormuLeap is still in the Alpha phase and you need to get an invitation to have a sneak peak into the system and the best way to get an invitation is to signup at our launch page.

Looking forward on having you all to contribute to the project and help us in making this the world’s largest storehouse of formulas online, Please signup at our launch page by following the link below and share to all your friends and family and help us spread the word about FormuLeap.

Visit FormuLeap »

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

, , , , , , , , ,

1 Comment

Creating The New Top Black Menu Bar Found in Google Search and all its Products

Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously),  Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.

Introducing this menu bar looks like a  move by Google to integrate Google Plus with all other Google products.

I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple jQuery and CSS.

Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :

  • Creating the red ribbon like effect for the current page
  • creating the drop down menu when more button is clicked
  • keeping the bar fixed even when the rest of the page is scrolled
  • Styling the elements of the menu exactly to those found on Google

    Creating the top menu bar found in Google Plus tutorial

    Top Menu Bar Found in Google+

I think the adjacent picture better describes the outcome of this tutorial
Check out the live demo and download the source code below:

Download Source Code

DOWNLOAD

Live Demo

LIVE DEMO

Want to know how this works, then look at the code below:


HTML


Source Code Of index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Creating Google Plus Top Black Menu Bar Live Demo | http://blog.geotitles.com</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.google_menu.js"></script>
<link rel="stylesheet" type="text/css" href="google_menu.css"/>
<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>
</head>
<body>
<div class="menu">
	<ul>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://plus.google.com">+You</a>
		</li>
        <!-- Using class="current" for the link of the current page -->
      <li class="current">
		<a target="_blank" href="http://www.google.co.in/">Web</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://orkut.com">Orkut</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://gmail.com">Gmail</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="https://www.google.com/calendar">Calendar</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="https://docs.google.com">Documents</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
		</li>
	  <li><!-- Do not add any class for links with dropdown -->
		<a href="#">More<span class="arrow"></span></a>
        <!-- Drop Down menu Items -->
<ul>
			<li><a href="http://www.google.co.in/reader">Reader</a></li>
			<li><a href="https://sites.google.com">Sites</a></li>
			<li><a href="http://groups.google.co.in">Groups</a></li>
			<li><a href="http://www.youtube.com">YouTube</a></li>
			<li>
			<div class="mid-line">
			</div>
			</li>
			<li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
			<li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
			<li><a href="http://translate.google.co.in/">Translate</a></li>
			<li><a href="http://books.google.co.in">Books</a></li>
			<li><a href="http://scholar.google.co.in/">Scholar</a></li>
			<li><a href="http://blogsearch.google.co.in">Blogs</a></li>
			<li>
			<div class="mid-line">
			</div>
			</li>
			<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
			<li>
			<div class="mid-line">
			</div>
			</li>
		</ul>
		</li>
	</ul>
</div>
<div align="center">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <h2>THIS IS THE LIVE DEMO OF CREATING GOOGLE LIKE TOP BLACK MENU BAR TUTORIAL AT <a href="http://blog.geotitles.com">HITHERTO WEB LABS</a></h2>
<h2>&nbsp;</h2>
  <h2>CLICK HERE TO GO TO THE TUTORIAL LINK TO DOWNLOAD THE SOURCE CODE</h2>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </p>
</div>
</body>
</html>

CSS


Source Code Of google_menu.css

body{
padding:0;
margin:0;
}
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
   -moz-box-shadow:0 -1px 5px #CCCCCC;
        box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
   -moz-box-shadow:0 0 0 #CCCCCC;
        box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}

Javascript


Source Code Of jquery.google_menu.js

$(function ($) {
    $.fn.fixedMenu = function () {
        return this.each(function () {
            var menu = $(this);
            //close dropdown when clicked anywhere else on the document
            $("html").click(function () {
                menu.find('.active').removeClass('active');
            });
            menu.find('ul li > a').bind('click', function (event) {
                event.stopPropagation();
                //check whether the particular link has a dropdown
                if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
                    //hiding drop down menu when it is clicked again
                    if ($(this).parent().hasClass('active')) {
                        $(this).parent().removeClass('active');
                    } else {
                        //displaying the drop down menu
                        $(this).parent().parent().find('.active').removeClass('active');
                        $(this).parent().addClass('active');
                    }
                } else {
                    //hiding the drop down menu when some other link is clicked
                    $(this).parent().parent().find('.active').removeClass('active');

                }
            })
        });
    }
})(jQuery);

Hope this tutorial helped you, next week we will be back with another interesting tutorial, until then stay updated with our blog by:

Want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 5.0/5 (10 votes cast)

, , , , , , , , , , , , , , , , , , ,

62 Comments

Google Plus Photo Stack Effect Tutorial

There are so many scripts which are replica of some of the features of facebook, since Google Plus has arrived we have thought of creating tutorials on creating almost every effects you can see on Google Plus.

We have already created the following Google plus tutorials :

Google Plus Photo Stack Effect found in Google+ photo album page

…and here is one more Google + tutorial, and this time it is on the photo stack effect we find in the photo albums of Google Plus.
If you are still not yet on Google Plus and wondering what is this photo stack effect, then the below picture will give you a better idea :
Google Plus Photo Stack Effect tutorial and live demo

Google Plus Photo Stack Effect tutorial and live demo

Want to check the script in action, then check out the live demo or download the source code and use it in your own website for whatever purpose you like.

Click to Download Source Code of creating google plus like photo stack effect free

Download

Click to view Live Demo of creating google plus like photo stack effect free

Live Demo

Wanna know how the code works ?, check out the code below:

HTML 


Source Code Of index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Google Plus Photo Album Google Plus Photo Stack Effect Live Demo</title>
<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<style type="text/css">
ul#pics li {/*css style for the single photo only **/
	background: none repeat scroll 0 0 #FFFFFF;
	box-shadow: 1px 1px 1px #999999;
	display: inline-block;
	width: 153px;
	height:157px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
ul#pics li img {/*css style for the single photo only **/
	width: 150px;
	height:150px;
	display: block;
}
ul#pics li:hover {/*css style for the single photo only **/
	-moz-transform: scale(1.1) rotate(0deg);
	-webkit-transform: scale(1.1) rotate(0deg);
	-o-transform: scale(1.1) rotate(0deg);
	-ms-transform: scale(1.1) rotate(0deg);
	transform: scale(1.1) rotate(0deg);
}
.single_photo {/*css style for the single photo only **/
	margin-top : 80px;
	margin-left:100px;
	margin-top:65px;
}
a, a:visited, a:hover {
	color: #54A6DE;
	outline: medium none;
	text-decoration: none;
}
#text {
	margin-top:10px;
	margin-left:10px;
	color: #DD4B39;
	font-type: arial, sans-serif;
	font-size:17px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/app.js"></script>
</head>
<body>
<div id="page_wrap">
	<div align="center" id="text">
		This is the live demo of <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">Google Plus Photo Stack Effect Tutorial</a> at <a href="http://blog.geotitles.com">Hitherto Web Labs</a>, Click <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">here</a> to go to the <a href="http://blog.geotitles.com/2011/09/google-plus-photo-stack-effect-tutorial">tutorial</a>
	</div>
	<!--Stack 1  -->
	<div class="image_stack" style="margin-left:600px">
		<img id="photo1" class="stackphotos" src="photos/6.jpg">
		<img id="photo2" class="stackphotos" src="photos/3.jpg">
		<img id="photo3" class="stackphotos" src="photos/1.jpg">
	</div>
	<!--Stack 2  -->
	<div class="image_stack" style="margin-left:300px">
		<img id="photo1" class="stackphotos" src="photos/4.jpg">
		<img id="photo2" class="stackphotos" src="photos/5.jpg">
		<img id="photo3" class="stackphotos" src="photos/6.jpg">
	</div>
	<div class="single_photo">
		<ul id="pics">
			<li><a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="Google Plus Photo Stack Effect"></a></li>
		</ul>
	</div>
</div>
</body>
</html>

Javascript


Source Code of app.js

//jquery code below is applicable for the photo stack only . Not for the single image zoom effect
$(document).ready(function () {
    $(".image_stack").delegate('img', 'mouseenter', function () { //when user hover mouse on image with div id=stackphotos
        if ($(this).hasClass('stackphotos')) { //
            // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on  these photos only
            var $parent = $(this).parent();
            $parent.find('img#photo1').addClass('rotate1'); //add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
            $parent.find('img#photo2').addClass('rotate2');
            $parent.find('img#photo3').addClass('rotate3');
            $parent.find('img#photo1').css("left", "150px"); // reposition the first and last image
            $parent.find('img#photo3').css("left", "50px");

        }
    }).delegate('img', 'mouseleave', function () { // when user removes cursor from the image stack
        $('img#photo1').removeClass('rotate1'); // remove the css class that was previously added to make it to its original position
        $('img#photo2').removeClass('rotate2');
        $('img#photo3').removeClass('rotate3');
        $('img#photo1').css("left", ""); // remove the css property 'left' value from the dom
        $('img#photo3').css("left", "");

    });;
});

CSS


Source Code of style.css

html {
	padding:0;
	margin: 0;
}
body {
	color: #333333;
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
	font-size: 11px;
	padding: 0;
	margin: 0;
	text-align: left;
	line-height: 1.25em;
}
#page_wrap {
	border: 1px solid #DDDDDD;
	width: 990px;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
.image_stack img { /* css style for photo stack */
	border: none;
	text-decoration: none;
	position: absolute;
	margin-left:0px;
	width: 158px;
	height: 158px;
}
.image_stack { /* css style for photo stack */
	width: 400px;
	position: absolute;
	margin:60px 10px 10px;
}
.image_stack img { /* css style for photo stack */
	position: absolute;
	border: 4px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 9999;
	/* Firefox */
	-moz-transition: all 0.2s ease;
	/* WebKit */
	-webkit-transition: all 0.2s ease;
	/* Opera */
	-o-transition: all 0.2s ease;
	/* Standard */
	transition: all 0.2s ease;
}
.image_stack #photo1 {  /* position of last photo in the stack */
	top: 8px;
	left: 108px;
}
.image_stack #photo2 {/* position of middle photo in the stack */
	top: 6px;
	left: 104px;
}
.image_stack #photo3 {/* position of first photo at the top in the stack */
	top: 4px;
	left: 100px;
	right: 100px;
}
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
	-webkit-transform: rotate(15deg); /* safari and chrome */
	-moz-transform: rotate(15deg);/*firefox browsers */
	transform: rotate(15deg);/*other */
	-ms-transform:rotate(15deg); /* Internet Explorer 9 */
	-o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* css not used*/
	-webkit-transform: rotate(0deg); /* safari and chrome */
	-moz-transform: rotate(0deg);/*firefox browsers */
	transform: rotate(0deg);/*other */
	-ms-transform:rotate(0deg); /* Internet Explorer 9 */
	-o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
	-webkit-transform: rotate(-15deg); /* safari and chrome */
	-moz-transform: rotate(-15deg); /*firefox browsers */
	transform: rotate(-15deg);/*other */
	-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
	-o-transform:rotate(-15deg); /* Opera */
	cursor: pointer;
}

That’s it for this week, next week we will be back with more interesting and unique web tutorials, until then stay updated with our blog by :

Want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)

, , , , , , , , , , ,

5 Comments

Tutorial on dynamically creating PDF file in websites using PHP

There are many circumstances we come across where we need to create PDF files in our websites dynamically(like creating a PDF file from fetching data from a MySQL database or an external text file).But many don’t have any idea on how to create such PDF files, so I thought it will be a great idea to do a tutorial on this since there aren’t many tutorials on this topic on the web.

When it comes to creating dynamic PDF files in websites, there are two PHP classes available, They are

  • TCPDF
  • FPDF
Both of them are free and easy to use and below is their description from the official website.

create PDF files in our websites dynamically(like creating a PDF file from fetching data from a MySQL database or an external text file)

What is TCPDF ?

TCPDF is a FLOSS PHP class for generating PDF documents.Started in 2002, TCPDF is now one of the world’s most active Open Source projects, used daily by millions of users and included in thousands of CMS and Web applications.You can generate PDF files for almost any application using TCPDF.

What is FPDF ?

FPDF is a PHP class which allows to generate PDF files with pure PHP, that is to say without using the PDFlib library. F from FPDF stands for Free: you may use it for any kind of usage and modify it to suit your needs.FPDF requires no extension (except zlib to activate compression and GD for GIF support). It works with PHP 4 and PHP 5 (the latest version requires at least PHP 4.3.10).
But due to rich documentation, vast number of examples and an active support forum I prefer TCPDF and I am going to take TCPDF as a base for this tutorial.
Here are a list of some of the features of TCPDF:
  • no external libraries are required for the basic functions;Create PDF files from data from SQL database using TCPDF
  • all standard page formats, custom page formats, custom margins and units of measure;
  • UTF-8 Unicode and Right-To-Left languages;
  • TrueTypeUnicode, OpenTypeUnicode, TrueType, OpenType, Type1 and CID-0 fonts;
  • font subsetting;
  • methods to publish some XHTML + CSS code, JavaScript and Forms;
  • images, graphic (geometric figures) and transformation methods;
  • supports JPEG, PNG and SVG images natively, all images supported by GD (GD, GD2, GD2PART, GIF, JPEG, PNG, BMP, XBM, XPM) and all images supported via ImagMagick (http: www.imagemagick.org/www/formats.html)
  • 1D and 2D barcodes: CODE 39, ANSI MH10.8M-1983, USD-3, 3 of 9, CODE 93, USS-93, Standard 2 of 5, Interleaved 2 of 5, CODE 128 A/B/C, 2 and 5 Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI, POSTNET, PLANET, RMS4CC (Royal Mail 4-state Customer Code), CBC (Customer Bar Code), KIX (Klant index – Customer index), Intelligent Mail Barcode, Onecode, USPS-B-3200, CODABAR, CODE 11, PHARMACODE, PHARMACODE TWO-TRACKS, QR-Code, PDF417;
  • Grayscale, RGB, CMYK, Spot Colors and Transparencies;
  • automatic page header and footer management;
  • document encryption up to 256 bit and digital signature certifications;
  • transactions to UNDO commands;
  • PDF annotations, including links, text and file attachments;
  • text rendering modes (fill, stroke and clipping);
  • multiple columns mode;
  • no-write page regions;
  • bookmarks and table of content;
  • text hyphenation;
  • text stretching and spacing (tracking/kerning);
  • automatic page break, line break and text alignments including justification;
  • automatic page numbering and page groups;
  • move and delete pages;
  • page compression (requires php-zlib extension);
  • XOBject templates;
Dynamically Creating TCPDF files in websites using TCPDF

Dynamically Creating TCPDF files in websites using TCPDF

There are 64 examples and there is no way I can explain the source code of each and every example from the official website, but the code is heavily commented enriched with detailed documentation and an active support forum at Sourceforge will really help you out to customize the code for your own needs.
So go ahead, take a look at the live demo, Download Source code and take a look at the documentation.

Click to Download Source Code of creating dynamic PDF files in website

Download

Click to view Live Demo of creating dynamic PDF files in website

Live Demo

Click here to documentation of creating dynamic PDF files in website

Documentation

Click here to go to Support Forum for dynamically creating PDF files in website

Support Forum

The live demo is hosted on our website and has been presented in a friendly layout which would easily let you understand how the code works.
If you need any support regarding this tutorial, then please leave your comment below and we will definitely respond to your question with a suitable solution.

TCPDF PHP class can be used to create almost any type of PDF file for all your purposes, but sometimes it is slight tricky to customize the script for our needs, if you ever run against any obstacles then please let us know and we will definitely help you.

Next week we will back with another unique and interesting tutorial in the meanwhile stay updated with all the tutorials at Geo Web Station by :

If you have any problems using the downloaded files, then leave a comment below.

Want more improvisations on this script ?, or want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 3.3/5 (4 votes cast)

, , , , , , , , , , , , , , , , , , ,

3 Comments

Creating a stylish HTML5 & AJAX Contact Form

It has taken more time than I expected to complete this tutorial, because I kept on adding more and more features to our contact form.

Starting with the idea of just a simple HTML5 contact form, later thought of adding AJAX form submission and later came the idea of supporting JavaScript disabled browsers and much more.

ultimate contact form which can be seamlessly integrated to any website and works totally fine in any browser providing a cool user interface.

What is HTML5 ? Can we use it in our project ?

HTML5 is the next generation of HTML.

HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders ,date pickers and color pickers; others are more subtle.

For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means we can create a more improved Forms for our website, even if some of our visitors are stuck on IE 6.

In our contact form we are going to use input controls namely email ,required, url and phone. Yeah That’s it, but its good enough to make a really good contact form.

What is AJAX ?

AJAX can create a highly responsive web interface and increase the user experience.Using AJAX the form can be submitted without Page reload which makes our form much more friendly.

Browser Support

The CSS styling has been coded in such a way that the page looks exactly same in all popular web browsers.Although the form uses AJAX form submission, if JavaScript has been disabled in a web browser then a normal contact form will be rendered.

To sum up this is an ultimate contact form which can be seamlessly integrated to any web

Creating Stylish HTML5 and AJAX Contact Form tutorial

site and works totally fine in any browser providing a cool user interface.

Including the code on this page would make the very post very long, so please download the source code and refer to it.The code has been heavily commented and would pose no difficulty to use it in your website.

Installation Instructions

After downloading the Source code, open config.phpin a text editor and enter your email address

<?php
$to = "your_email_address";//enter your email address
?>

Click to Download Source Code of stylish HTML5 ans AJAX contact form

Download

Click to view Live Demo of stylish HTML5 and AJAX contact form

Live Demo

Next tutorial will be back with an interesting tutorial, meanwhile keep updated with all our tutorials by :

If you have any problems using the downloaded files, then leave a comment below.

Want more improvisations on this script, or want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)

, , , , , , , , , , , , , , , , , , , , , ,

2 Comments