How to Add Awesome Contact Form Widget in Blogger Blog

A contact form widget is a must have widget for every blogger. It helps in getting direct feedback from readers as well a good means of communication between readers and the blogger. In this post, I will be sharing with you on how you can easily add an awesome contact form widget in blogger. Although, there are several contact form you can use as a blogger, but I would really recommend that you this widget because it doesn’t slow down blog loading time and it is simple to use.

How to Get Started => Firstly, log in to your blogger dashboard => Go to “Template” and then search for ]]>

by typing Ctrl + F => Paste the code below immediately before ]]> #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/AVvXsEjo2xir2pK5kBif-nBnoPHd4JVLbFBXFO_K7qQ_Xs8GoEpzdizbsHFTS8H4oXE1m8iR57bKGawSJye9okgz2nK1ObAnvTjKsWlyoWMUinvCEoDIwfD6ZWx2NCkq9dCd0Q_Mn-XytmNkETk/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/AVvXsEhuRiTO0L6vSGU_bx50gucVjhejbqTr_6IJpiR70yKvTzC8C7jNCTSZv1DTPCpJosdmE207xPkSbSVD61n0KGMe646IostvBKktDQ3uAfL_UDM-hdahYUkLf10OP8wWcuCOGL4cg7DSNUQ/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/AVvXsEgDawZn7OiMeeJGGxB9WK7QN3xYvSJcqFA5Nm6WSJhuMPK-XbXoUZTg1JS9fpqy5_yQDBh_3oHjONQRjTWrhqcmZMmwqold1YZRryY99q-cO4Q8eUYURL3EBVTN2eE5O6PEfIxKn-ihSek/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; }
=> Save the Template
 => Click on Pages, then New Page
 => Select Blank page
=> In the Page title, Type Contact us
=> In the body, select HTML and paste the code below

<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

 

Contact Us

=> After adding the above code, Publish the page You have successfully added a contact form widget Blogger. Hope it helps... If you face any difficulty setting up your contact page, don't hesitate contact me using the comment form below this post. Cheers! In order not to miss my next post, feel free to subscribe here. It is absolutely free! Oladipupo Olutayo FACEBOOK – www.fb.com/olutayo.segun or www.fb.com/teyusfreedom TWITTER – www.twitter.com/teyusthedon 2GO - Teyus Thank you!