Blogger official contact page and widget with floating icon

Blogger official contact page and widget with floating icon which is an custom contact page for all bloggers.This tutorial teach you how to add blogger contact form widget as well as blogger contact form page. This widget is officially provided by blogger itself. before getting this tutorial have a look on how to increase pageviews in your site for good google page rank here , How to add html codes in blogger who using old interface ,add page numbers in blogger simple tip and trick

What is official Blogger Contact widget or page :

Blogger contact widget is officially provided by blogger for all its users those who want to interact with the audience of his/her blog.this will forward the details enter by user to the email id provided by the user which is used for login more over it will forward that mail to all admin of that blog also.

Steps required to add contact widget :

1. login to your blogger and select the blog which you want to add contact widget(if you have more than one blog)
2.  On your left side panel click on Layout  (in image 1)
3. Now click on Add a Gadget where you want to appear your contact widget.
4. Now in Add a Gadget window click on More Gadgets . (in image 2)
5. Click on contact Form and your widget is ready to use

 Steps to add contact page :

1. To add contact page above steps are same after that continue with below steps
2. In blogger left sidebar click on  Pages now click on New page select blank page (in image 3)
   
3. Now type title contact page or your wish
4. Now click on HTML tab and copy & paste below code into that page content (in image 4)

<style>
.contact-name, .contact-email {
max-width: 200px;
width: 100%;
}
.contact-message {
max-width: 400px;
width: 100%;
height: 150px;
}
</style>
<form name="contact-form">
<p></p>
Name
<br>
<input class="contact-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text">
<p></p>
Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>

5. Now save the page .
6. In blogger sidebar select Template and click on Edit Html. (in image 5)
7. Now click on Jump to widget select contact Form1 from drop down list (in image 6)
8. Click on small arrow beside the widget again click on small arrow (in image 7,8)
9. Now select code in between <b:includable id='main'> ...... </b:includable> (in image 9)
   
10. Delete the code which you highlighted from above step.
11. Now save your template . go to page which you created and check that it will having working contact page now.

Steps to add floating contact icon:

1. Click on Layout > Add a Gadget > HTML/JAVASCRIPT
2. Now copy and paste below code into it

<a href="Your_URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73QbSj-NCZIENHumWkwW_Rm7XExXjtwmAZPKyeEU2JKmgo6S0NO6JGTPQ8dDJAOdsgtzwygW0IESkw1t9DN3HVHHTtLDSfSNJbPohUMpoM1kp_p0wQ8lInDrazKermTZ5YwjSXBUfs1A/s1600/contact.gif" style="position:fixed;float:right;right:10px;top:30px;cursor:pointer; z-index:100;"/></a>

3. Note replace Your_URL with your contact page url , if you want to change image you can change with your image
4. Now save widget and enjoy

Hope you like my post have a nice day.