Mash Tricks : blogger contact

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="akash" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZV3-oREqQcNFGq5Uxqx_smo35XsJvLeN-C7Avq0o-R4jzdGZ3Rc2-TN1dEkNmFQJuOgs7ZOv6koy2SFu9u5-hB8Qr9hBhbX_Wcr4gGx-Tvw2ROBfcGro-h_M3Ix856GNM6kEPft_WHZo/s1600/Contact+Us.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZV3-oREqQcNFGq5Uxqx_smo35XsJvLeN-C7Avq0o-R4jzdGZ3Rc2-TN1dEkNmFQJuOgs7ZOv6koy2SFu9u5-hB8Qr9hBhbX_Wcr4gGx-Tvw2ROBfcGro-h_M3Ix856GNM6kEPft_WHZo/s320/Contact+Us.png" width="320" /></a></div>
Today I am going to show you how you can add a really awesome and cool looking <a href="http://www.allbloggertricks.com/2013/05/official-contact-form-widget-released.html" target="_blank">Contact form</a> in a page of your blogger blog. This contact form looks really elegant and is very eye-catching. 
 
This contact form inspired from Bloggertut works on CSS and has a very rich feel in it.  You can make your Contact page more awesome by adding this widget to one of your blog's pages. A live working demo of this widget can be seen by clicking the below button. 
 
 
<blockquote class="tr_bq">
<div style="text-align: center;">
<a href="http://www.soundmix.tk/p/contact-us.html" target="_blank">Live Demo </a></div>
</blockquote>
 
 
After seeing the demo if you wish to add this contact form in your blog then follow the steps below. 
 
 
<h4 style="text-align: left;">
Step 1 : Adding the Contact Form</h4>
 
First of all add a Contact form widget to your blog. To do so go to my post <a href="http://www.allbloggertricks.com/2013/05/official-contact-form-widget-released.html" target="_blank">Official Contact Form Widget released for Blogger</a>. 
Do not worry about that the widget will be visible everywhere on the blog and our motive is to show contact us form only on a particular page. We will fix it in the second step. 
 
<h4>
Step 2 : Adding the CSS</h4>
 
Once you have added the Contact form widget go to Blog Title → Template → Edit HTML. Now add the below given CSS code just above ]]></b:skin> . 
 
<blockquote class="tr_bq">
#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.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc'); 
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); 
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); 
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); 
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%); 
background-image:linear-gradient(top, #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 rgba(0,0,0,0.3),0px 1px 5px #666; 
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; 
box-shadow: inset 0 0 25px rgba(0,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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6nD5LYdQ1BccpWA7f2evHurhhjDXf1Jo8FdhBT5ys6RMVlYjxNeQ7eF1nbtoTt5Cdlsxc2rGu8Fqa6Ve-b8LQtKrg_8UpirUUHoEAB4CpNTWclhUOTEQtwc_qA9Tj27iy732VKhV-cY/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: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; 
box-shadow: rgba(0, 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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaOde50PXSpikdSeHcrXqIyrLm_lATiKgA1iYIJZRBJdyQDoDbxnHIQa_oh2mDcrwJicQcy23nGw4vD_HElcasE8FA58MGj3d-N0xgZpJ042DgfsrKazcHYHGIA9T4aD053kbzKb_Gs8/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: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; 
box-shadow: rgba(0, 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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6riGAGjFJjrrnW8EPyMEnPhE-AhP1h5EqAqe-zkazWYKaH7HPwkfrQvAw5MOr9lyEBGLTNKMwxlYJSbW0p-GJPg5SJWsV7G24Ch6fgQ0ok_7a4Lc7NN2MwRRlOYcGLJyJwhUt9xZlj0g/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: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; 
box-shadow: rgba(0, 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 rgba(0,0,0,0.3),0px 1px 5px #666; 
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666; 
box-shadow: inset 0 0 35px rgba(0,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; 
} </blockquote>
 
After adding the code save the template. 
 
<h4 style="text-align: left;">
Step 3 : Adding the HTML in Page</h4>
 
First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab and paste the below given code in it. 
 
<blockquote class="tr_bq">
<div id="contact_wrap"> 
<h3>Contact Us</h3> 
<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> 
 
<style type="text/css"> 
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none} 
</style></blockquote>
 
After adding the above code, publish the page. 
 
You are done now. Now you and your visitors can see this awesome and cool contact form widget in your blog. </div>

Awesome Google Contact Form Widget for Blogger

Today I am going to show you how you can add a really awesome and cool looking Contact form in a page of your blogger blog. This contact...