Learn how to add beautiful contact form in blogger blog easily with the help of following tutorial.
Lets start with the tutorial!
STEP:1
>>Go to Blogger>>Layout>>Add a gadget>>Click on MORE GADGETS
Add Contact Form & Save.
STEP:2
Now the real work starts>>Go to Blogger>>Template>>Edit HTML
Paste the following code before ]]></b:skin>
#ContactForm1 {
display:none;
}
#contact_wrap {
margin:auto;
width:321px;
height:380px;
padding:25px;
border-radius:1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradientundefinedGradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradientundefinedtop, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow:1px 1px 5px #ccc;
}
#contact_wrap h3 {
color:#e8f3f9;
font-family:Georgia;
font-size:20px;
font-style:italic;
font-weight:bold;
margin:0 -36px 20px -36px;
padding:12px;
text-align:center;
text-shadow:2px 0 0 #1f4962;
-webkit-box-shadow:inset 0 0 25px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow:inset 0 0 25px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
box-shadow:inset 0 0 25px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
background-color:#3689b9;
position:relative;
}
#contact_wrap h3:before {
content:' ';
position:absolute;
bottom:-10px;
left:0;
width:0;
height:0;
border-style:solid;
border-width:10px 0 0 10px;
border-color:#333 transparent transparent transparent;
}
#contact_wrap h3:after {
content:' ';
position:absolute;
bottom:-10px;
right:0;
width:0;
height:0;
border-style:solid;
border-width:0 0 10px 10px;
border-color:transparent transparent transparent #333;
}
#ContactForm1_contact-form-name {
width:270px;
height:auto;
margin:5px auto;
padding:10px 10px 10px 40px;
background:#f6f6f6 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyGjFiBemGwo_N_x1ATcLF6tHk4E-dKJgLUvQSo154k9W2nKCYNY1oO8ZZmVM9MCOd3ae4oypgRuTO-m1FpTiSSbgvibcAikrF5X4_-k9Kcp9ZCAdIKP36db7F5dHevaFu4FRaSYoUGks/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email {
width:270px;
height:auto;
margin:5px auto;
padding:10px 10px 10px 40px;
background:#f6f6f6 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5nMSdLSaWuXci8c-goHC7IJJ1IeYDX8ficX2rf9mWcjvVad8WMNo0knV5RfquRXTmBJD2joJYwUA_1LbiiSmhHO_Z1MZ0hM1F690eG7VG9o5EmFvR87iPH4OFTwUYAOnEamSTxJG7sI4/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message {
width:270px;
height:150px;
margin:5px auto;
padding:10px 10px 10px 40px;
font-family:Arial, sans-serif;
background:#f6f6f6 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3h8mJK_ZF6YSxZG3HYAcjeOSW4g5dU_vowbvy3DqLjyPYylNv0BLeN8zZtLyX6X7gB7e8gQPVkbcFMcmGmn1kXJQVISJpNJJXrYYnsuZHBOaww-HKlI2eDynAgJNPdERmNpn6gzaXaU/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow:rgbaundefined0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width:95px;
height:30px;
float:right;
color:#FFF;
padding:0;
cursor:pointer;
margin:25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow:1px 0 0 #1f4962;
-webkit-box-shadow:inset 0 0 35px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow:inset 0 0 35px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
box-shadow:inset 0 0 35px rgbaundefined0,0,0,0.3),0px 1px 5px #666;
background-color:#3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width:320px;
margin-top:35px;
}
>>Save your template>>Now create a new page(you can name it as CONTACT)>>click on HTML and paste the code given below!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="contact_wrap">
<h3>Contact Us</h3>
<form id="contact-form" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder=
"Name" size="30" type="text" value=""> <input id=
"ContactForm1_contact-form-email" name="email" placeholder="Email"
size="30" type="text" value="">
<textarea cols="25" id="ContactForm1_contact-form-email-message"
name="email-message" placeholder="Message" rows="5">
</textarea> <input id="ContactForm1_contact-form-submit" type="button"
value="Submit">
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message"></div>
<div id="ContactForm1_contact-form-success-message"></div>
</div>
</form>
</div>
</body>
</html>
Live Demo
>>Publish your page
Thats all!!
If you face any problem then let me know in comments.
Post a Comment