Top 5 Best Blogger Custom Contact Form Widget

In the past, adding a custom contact form for Blogger was quite advanced method, and lots of bloggers were forced to use third party websites. However, even when Blogger launched its own contact form, it absolutely was still thought of as extremely inadequate. this is often as a result of the official gadget would solely be enforced on the footer of the sidebar. Most bloggers chose to have a separate blogger contact form placed on its own page to enable their blogs look well organized and additionally skillful and beautiful.

Having a well laid-out Blogger contact Form is extremely vital. This is often the tool that guests, companies, and brands will use to contact you and it's merely essential feature for each blogger. If you're not comfy with sharing your main email address directly on your blog, then a custom Blogger contact form offers a good manner during which folks will simply reach you.

Why Should I Use A Blogger Contact Form?

If you're still stuck on third party suppliers, you ought to undoubtedly take into account shift to the official custom contact form for Blogger because of it's varied distinctive edges, like:


  • Messages are delivered straight off - because the blog administrator, you'll receive a message straight off the visitant clicks send.
  • Reliable - it's the official kind developed by Blogger, that makes it additional trustworthy and reliable thanks to initiate contact as compared to exploitation third-party services.
  • Questions - The contact kind offers a platform for your guests to raise specific queries that they could have relating to the blog you wrote or your business generally. It may be a wonderful manner of capturing leads and even result in conversions if you're commercialism a definite product or service.
  • Feedback - guests will simply inquire into your blog by exploit their feedback through your contact kind. This feedback will assist you confirm that post to try to to next or what areas to deal with supported the visitors' comments.
  • Information or service request - For people who area unit exploitation the blog as the way of selling a product or service, potential shoppers will use the custom contact kind for Blogger to achieve out and request extra data.

How To Add Blogger Contact Form Gadget

Before adding a custom Blogger contact form to a static page, we'd like to feature the default contact form within the blog's sidebar to make it functional:

1. Log into your Blogger dashboard and head to "Layout" > click on the "Add a gadget" link on the page components space.

2. Choose "More conveniences" below the "Basics" tab and click on the "+" button to feature the Contact kind Gadget.




How To Hide Blogger Contact Form From The Sidebar

Once the contact kind has been accessorial, next step is to cover it so it'll seem solely within the static page.

1. Head to "Template" and press the "Edit HTML" button. Once the code editor opens, click anyplace within the code space and press CTRL + F keys (or Command + F for mac) to open the search box.

2. Sort or paste the subsequent tag within the search box and hit Enter to search out it:
]]></b:skin>

3. Simply on top of the]]></b:skin> tag, add this CSS code:
#ContactForm1{display: none !important;}

4. Click the "Save template" button on the higher left aspect and consider your blog. The contact kind gadget ought to be gone.

Adding Blogger Custom Contact Form In A Static Page

Finally, currently that we tend to enabled the practicality of the contact form, let's add a custom contact form in our Blogger blog...

1. Head to "Pages" and click on the "New page" button. If you have already got a Contact United States of America page, simply click the "Edit" link below the page title.

2. Once the Page editor opens, extra service the page title with Contact/Contact United States of America or any title you would like to indicate. it's counseled doing this before something so as to form the permalink SEO friendly.

3. Click on the markup language tab as there we'll add the code to enable the custom Blogger contact form work. On the proper website, modification the Page settings to cover ("Don't enable" or "Don't allow, hide existing") the reader comments, then click the "Done" button:


4. Below area unit five custom Blogger contact form designs. decide your favorite and replica the code provided, then paste the code within the markup language box of your page editor:

Simple Contact Form
<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Message" rows="5" value="Message" onblur='if (this.value == "") {this.value = "Message";}' onfocus='if (this.value == "Message") {this.value = "";}'></textarea></div><<div class="cbluebutton"><span><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span></div><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}'/></div><div style="clear:both"></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div>

 Contact Form With Speech Bubble
<style type="text/css">.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}</style><div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Message" rows="5" value="Message" onblur='if (this.value == "") {this.value = "Message";}' onfocus='if (this.value == "Message") {this.value = "";}'></textarea></div><div class="cbluebutton"><span><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span></div><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}'/></div><div style="clear:both"></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div>

Minimal Contact Form

 Contact Form With CSS Rainbow Divider

Blogger Contact Form With CSS Ribbon

5. When you accessorial the code, click the "Publish" button on the higher right aspect. currently you ought to be able to see the Blogger contact form survive your static page. to make sure that everything works fine, you'll send a message as a take a look at. The message ought to be delivered to your inbox in an exceedingly matter of seconds, simply make certain that you are checking the e-mail that you are exploitation together with your Blogger account.

Frequently Asked Question About Blogger Custom Contact Form

Where Does The Messages Go?

Once a visitant asks an issue or sends feedback through the Blogger contact kind , it's instantly delivered to the e-mail related to your Blogger account. If a blog has many directors, then all the individual directors can receive the comments or queries asked by the visitant.

What Is The Benefit Of Using A Separate "Contact Us" Page?

Even though it all comes right down to your personal preferences, your web log can look additional skilled if it's a separate page for the custom contact kind for Blogger. It provides you believability and conjointly offers you the prospect to feature a particular decision to action within the new "Contact Us" page.

If It Is Okay To Add Extra Field?

Unfortunately, no. you cannot add custom fields like web site, signaling or address since Blogger uses special tags so as to transfer information. In any case, the default fields area unit well laid-out and can assist you to induce the fundamental data you would like regarding your guests.

I Have Installed The Custom Blogger Contact Form And It's Not Working. What Should I Do?

There are many reasons why you'll be having hassle and issues putting in your contact form. the only thanks to troubleshoot is to countercheck the e-mail you coupled to the blog and conjointly install the shape once more.

Ultimately, by exploitation the Custom Blogger contact form you gain from consistency within the variety of data you request and conjointly cut back spam since you'll not need to show your email directly on the blog.
Previous
Next Post »

DO NOT MISUSE THE COMMENT BOX Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Thanks for your comment