Animated contact form using jQuery

Hi all,
In this tutorial we will create simple animated contact us form. This is very simple and reuse as our wish. You can use this contact form in your site, this is light weight contact form. This is animated contact form, this looks good and loads faster.

Page Structure

• HTML
• jQuery
• CSS

HTML Code

The HTML part is very important in wed development. All informations are specified here. Displayed details are described here, whatever we include here, that’s displayed in web page.

	

		

			
			
Contact Us
			
			
			
			
		
	
	

		

			

				
jQuery Animated Contact Us Form 
			
			

				
First Demo
				Click Here For Preview
			
			

				
Second Demo
				Click Here For Preview
			
			

				
Third Demo
				Click Here For Preview
			
		
	

 



CSS

The CSS style sheet in contact us form is used for specifying the form style in HTML.
It's very easy to understand and can implement more attractive in your web dpplication.

	

In here, style.css is an external file. This is included for form styling.
Style.css
body {
    background: #DCDCDC;
}
.container{
	max-width: 970px;
	margin: 50px auto;
}
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2;
}
.overlay, .form-wrapper {
	display: none;
}
.wrapper {
    background: #fff;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px;
    z-index: 1;
}
.heading {
    margin: 0 auto;
    text-align: center;
}
.heading h2 {
    color: #000;
    border-bottom: 3px double #FF6A00;
    display: inline-block;
    margin: 0;
    padding-bottom: 5px;
    margin-bottom: 20px;
    padding-left: 8px;
    padding-right: 8px;
}
.btn {
    border-left: 4px solid #FF6A00;
    margin-bottom: 30px;
    padding: 25px 10px;
    background: #E8E8E8;
    position: relative;
    padding-left: 15px;
    padding-right: 130px;
}
.btn p{
	margin: 0;
}
.btn a {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #FF6A00;
    padding: 10px 15px;
    color: #fff;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
}
.form-wrapper {
    border: 2px solid #DCDCDC;
    position: absolute;
    top: 50%;
    margin-top: -160px;
    left: 50%;
    margin-left: -157px;
    padding: 30px;
    background: #fff;
}
.form-wrapper h3 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 10px;
}
input[type="text"], input[type="email"], textarea {
    display: block;
    width: 250px;
    height: 30px;
    padding-left: 5px;
    margin-bottom: 15px;
    border: 2px solid #ccc;
    border-radius: 3px;
}
textarea{
	height: 80px;
	max-width: 250px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	border-color: #FF6A00;
	outline: 0;

}
input[type="button"] {
    background: #FF6A00;
    border: 2px solid #FF6A00;
    padding: 8px 20px;
    color: #fff;
    font-weight: 600;
    outline: 0;
    border-radius: 3px;
    cursor: pointer;
}
input[type="button"]:hover {
    background: #fff;
    color: #FF6A00;
}
.form-wrapper span#close {
    background: url('../images/plus.png');
    width: 12px;
    height: 12px;
    display: inline-block;
    position: absolute;
    top: 5;
    right: 5;
    cursor: pointer;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

jQuery
Include jQuery library file and jquery code related to contact us.
	
	

Happy Coding
 







If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.