Add Superb CSS3 Contact form in Blogger
Preview-
Codes for copy-
<style>/*crawlist.net CSS starts*/
.ks-confor {border:#ccc 1px solid; border-radius:5px; padding:20px 20px; height:550px; width:400px;}
.ks-confor h4{font-family:sans-serif; color:#390; font-size:20px; font-style:italic; font-weight:300; text-align:center; margin-top:-5px;}
form
div.ks-label{
display: block;
margin: 30px;
font: 16px;
position: relative;
}
form div.ks-label input[type="text"], form div.ks-label
textarea{
width: 320px;
padding: 10px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
form div.ks-label textarea{
height: 200px;
}
form div.ks-label label{
position: absolute;
left: 0;
background: lightyellow;
border: 1px solid yellow;
border-radius: 2px;
padding: 3px 10px;
box-shadow: 4px 1px 5px gray;
font-weight: bold;
-webkit-backface-visibility: hidden;
top: 10px;
-moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to
support cubic-bezier values beyond 0 to 1, so use keyword value instead
*/
-o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
opacity: 0;
z-index: -1;
}
form div.ks-label > *:focus{ /* when user focuses on child
element inside div.ks-label */
border: 1px solid #45bcd2;
box-shadow: 0 0 8px 2px #98d865;
}
form div.ks-label > *:focus + label{
opacity: 1;
z-index:100;
top: -35px;
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#ks-buto
{
border:1px solid #0C0;
background:none repeat scroll 0 0 #0C0;color:#FFF;transition:all ease 2s;
padding:5px;
color:#ffffff;
font:16px Verdana, Geneva, sans-serif;
cursor:pointer;
font-weight:bold;
height:40px; width:150px; text-align:center; margin-left:225px; border-radius:3.5px;
}
#ks-buto:hover
{
background: none repeat scroll 0 0#000;
border:1px solid #000;
}/*crawlist.net CSS ends*/
</style>
<div class="ks-confor"><h4>Contact us</h4>
<!--crawlist.net contact system starts-->
<form action="mailto:you@email.com">
<div class="ks-label">
<input id="name" placeholder="Name" type="text">
<label for="name">Name</label>
</div>
<div class="ks-label">
<input id="email" placeholder="Email Address" type="text">
<label for="email">Email Address</label>
</div>
<div class="ks-label">
<input id="Subject" placeholder="Subject" type="text">
<label for="subject">Subject</label>
</div>
<div class="ks-label">
<textarea id="feedback" placeholder="Massage"></textarea>
<label for="feedback">Massage</label>
</div>
<input type="submit" value="Send Message" id="ks-buto" />
</form>
<!--crawlist.net contact system ends-->
</div>
How to add in Blogger-
- First log into your Blogger, select your blog,
- Go to 'Pages' tab and create a page name 'Contact us'
- Select 'edit page' top left of page editing (compose/HTML) switch to (HTML)
- And paste codes in text area, and configure
- Go to your contact page's stylesheet and paste following code and configure.
How to configure-
- "you@email.com" replace with your email what you intent to use as contact with you.
Compatibility-
- This contact form is compatible with all major web browser's latest version.
- Tested with few templates; results were fine.