Easily Install Fixed contact form widget in blogger blog

Installing Fixed Contact Form Widget in Blog- On this occasion i will share about how to install the widget fixed contact form means that the widget will appear on the blog page exactly at the bottom right corner. 

As we knwo, widget contact form/contact form is one of Blogger Email Facility that serves to connect between the visitor and the owner of the blog to communicate with each other personally. Way messge divlivery was fairly easy, we just need to write your name, email address, and the message content. So do not bother to log in to an email account, but the contact form widgets already available on our blog. 

For those who previously used this trick: Add a Contact Form on Static Pages

Before making sure it is installed on your blog widget contact form. If not add the widget in the Layout>

Add new widget. Ok, just the way it is applied. 

1. Go to Blogger> Template> Edit HTML> Then add the following code just above ]]> </b: skin> or </style> CSS

/* Fixed Contact Form */ .ContactForm,.ContactForm .title{display:none} .floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99} .floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear} .floating-ai-head a:hover{background:#2588ca;color:#fff} .floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)} .floating-ai-head{text-align:right} .floating-ai-body .ContactForm{margin:0;display:block!important} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all} #ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear} #ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear} #ContactForm1_contact-form-submit:hover{background:#468a53;} #ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);} .contact-form-widget form{display:table;margin:0 auto;} .contact-form-widget {max-width:initial;} .floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial} 2. Then add the following code before the </body>

<script type='text/javascript'> //<![CDATA[ // Fixed Contact Form $("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())}); //]]> </script> Save the Template It's completed Thank you for reading.