Blogger In-Page Contact Forms HTML/Javascript Widget Codes

If you're uncomfortable to share your personal email address on your blog. These blogger contact form widgets are your pie. Carefully and wonderfully coded, these HTML codes provide you independent contact pages without any external third-party help from any service. 

Blogger Manual Contact Forms

Blogger does provide you a widget named as 'Contact Form'. But the problem is, that widget can only be added to the sidebar. Most of us prefer separate 'Contact-Us' pages today. So, the unavailability of any option to add it in the middle of a page or post attracts streaks to our foreheads. Unlike Wordpress, one has to perform every action manually in Blogger. There are only a handful of widgets to support our needs. Well, there is no problems folks. This post is aimed at answering and providing solutions to each of your contact page afflictions.

 

What is a Contat-Us page and Why you should use it?

It is a normal webpage of a website aimed at delivering the queries, feedbacks, offers and grievances of the readers to the author. In other words, it is the ear of a blog listening to the readers. It is very important to have a contact-us page on your blog due to the following reasons.

•  Feedback: It provides you the honest feedback of your audience which shapes the future content of your blog to be more relevant and helpful to the readers. It ultimately carves your blog to be better and increases the user engagement. If adds a personal touch to the audience that they know this author personally and can reach him anytime.
• Advertisers: We all write to earn our livings. And the contact form is a medium for potential advertisers to reach and advertise on our blog. This boosts our revenue.
• Content Requests: You write your expertise over topics and readers read to learn from you. A contact page allows them to put forward their queries to you and request content.
• Filing Grievances: When we write we always try not to hurt the sentiments of any community or a person. Unknowingly, our words could hurt someone. A contact page lets them to reach you, so that you'll be careful in future to not repeat the same mistakes. 

 Navigate this Page

• Blogger Widget Method.
• On-Page without Third Party forms.
• Contact Form Templates.
• On page using Third Party forms.
• Frequently Asked Questions.

Types of Contact Forms in Blogger

1.  The normal in-built widget contact form of blogger.
2.  On-Page contact form without using any third-party service.
3.  On-Page contact form using some third-party widget. 

Type 1:The Sidebar Contact Form 

1. To add the sidebar contact form. Go to layout and navigate to your sidebar. Then, click 'Add a gadget.'

 2. Scroll down to the Contact Form and click on the + Button.

3. Configure contact form widget and click on save.

That's it. The contact form will be added to you blog at the sidebar. Here I have shown it after the process on my blog.

 The On-PAGE Contact form using In-Built Blogger Widget

Please follow each and every step very carefully. I have added visual aids to facilitate the process. First, you need to add a contact form at the sidebar like it's explained in the pictures just above. Don't worry we'll hide this contact form and use some other html codes to link to this contact form from within a page.

Step 1: Create a normal sidebar widget.

Step 2: Hide the Widget: To do so, follow the below mentioned steps.

          (a) Go to Themes and click on 'Edit HTML'

         (b) Once the Code Editor fully loads, You've to press Ctrl+F, i.e., you've to search for the following code.

]]></b:skin>

      

        (d) Add the following CSS Code above the searched code and click on Save.

#ContactForm1{display: none !important;}

 

After performing the above mentioned steps, the contact form widget in the slidebar will hide itself. Make sure, you don't deleted the widget knowingly or unknowingly in the sidebar.

Step 3: Making a Contact Us page.

  (a) We're almost done with the process. Finally, create a new page and set the title to 'Contact Us' or whatever seems right to you. Add a little information about the page if you want. Example: On what occasions one can contact you. 

Make sure you turn off the Comments on the page. The below picture will explain it all.

 

(c) The final Step: Edit the page in HTML mode. Copy any below given Contact Widget Codes and paste it. Hit Publish!

Blogger Contact Widget HTML Codes

1. Classic Contact Template.

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.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 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><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="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></form></div></div></div>

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.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:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.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;height:11px !important;width:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><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="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" type="text" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><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></div>

3. Brown Header Template

  <style type="text/css">
.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px
 
0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget
 .form{width:91%;margin:0 auto}.ribbon{font:16px 
Arial;text-transform:capitalize;text-shadow:0 1px 2px 
rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em
 2em;margin:0 
-16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em
 solid 
#584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon
 .ribbon-content:before,.ribbon 
.ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A
 transparent transparent;bottom:-1em}.ribbon 
.ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon 
.ribbon-content:after{right:0;border-width:1em 1em 0 
0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.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:10px
 0 
0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal
 12px 
Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px
 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid 
#d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 
100%,from(#fed970) 
to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px
 solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 
0,0 100%,from(#febd4b) 
to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium
 
none!important;box-shadow:none!important;padding:0!important;height:11px
 !important;width:11px !important;}
</style>
<div 
class="widget ContactForm" id="ContactForm22"><div 
class="contact-form-widget"><h2 class="ribbon"><strong 
class="ribbon-content">Shoot Me an 
Email</strong></h2><div class="form"><form 
name="contact-form"><div class="contactf-name">Your 
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">E-mail address 
*:<input class="contact-form-email" 
id="ContactForm1_contact-form-email" name="E-mail address" size="30" 
type="text" value="E-mail address" onblur='if (this.value == "") 
{this.value = "E-mail address";}' onfocus='if (this.value == "E-mail 
address") {this.value = "";}'/></div><div 
style="clear:both"></div><div 
class="contactf-message">Message *:<textarea 
class="contact-form-email-message" cols="25" 
id="ContactForm1_contact-form-email-message" name="Type your message 
here..." rows="5" value="" placeholder="Type your message here..." 
value="Type your message here..." onblur='if (this.value == "") 
{this.value = "Type your message here...";}' onfocus='if (this.value == 
"Type your message here...") {this.value = 
"";}'></textarea><input class="contact-form-button 
contact-form-button-submit" id="ContactForm1_contact-form-submit" 
type="button" value="SEND MESSAGE" /><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></div>

On Page contact form using third party Codes

The question is Why do we need a third party contact form when we already have an inbuilt service in Blogger? Well, the free service that blogger provides you lacks a lot of features, like you cannot add more rows to answer the phone number and address of the person contacting you. This all highlights the need of using more advance services to quench the thirst of our requirements. Fortunately, there are loads of such available services.

How to use third party contact forms in Blogger?

The process is almost same. You’ve to create a new page and edit it in HTML. Simply paste the HTML code of the form that external websites will provide you and hit publish.

What are the best external services available?

There are ample of quality services available. Here I’m listing the best of them.

•     Google Forms: When I think of customized forms, the best service that comes to my mind is google Forms. 100% free and 200% flexible; I’m in love with google forms. You can customize the forms and even add logics. Google forms are no doubt the best free available service.
  
  
  
• Microsoft Forms (Web) 
• Wufoo
•  JotForm
•  Formstack
•  Typeform
•  Paperform
•  Formsite
•  123FormBuilder
•  Cognito Forms
•  Zoho Forms 
  

   Frequently asked Questions over Blogger Contact Forms

  How does Blogger contact form work?

  Afte hiding the original contact form in the sidebar, the boxes in the pages link to the actual contact form. In that way, they convey the message to the author.

  Why is my contact form not working?

  The most possible error could be flawed installation of the widget. Try re-installing. Always copy the full code. Accidental partial copying leads to flawed codes.

  Still Have a query? Ask me in the comment Box