How To Install Floating Contact Form Widget On Blogger Website

How To Install Floating Contact Form Widget On Blogger Website. On this occasion, I will explain how to configure a given contact form widget, which means that this widget appears on the blog page in the lower right corner.

How To Install Floating Contact From Widget On Blogger Website


As we know, the Contact Us widget is one of Blogger's message features, which connects visitors and blog owners to communicate with each other. The way to send a message is pretty simple, ...

just write the name, email address and content of the message. Therefore, you don't have to worry about linking to your email account, but the contact form with this widget is already available on our blog.

Also Read :- How To Fix Adsense Ads Not Showing On Blogger Website 2019

Create Custom Floating Contact Form Widget for Blogger




  • Please remove all code related to the first round.


First, make sure you have the contact form widget installed on your blog. If you did not add the widget to the layout> add a new widget. Okay, just go with how to implement it.

How to Add Stylish Contact Form (contact us page) in Blogger?



FOLLOW STEP :- 👇

1...... Open blogger.com

✓ Touch The Template Option.

✓ Now click EDIT/HTML

✓ Press the ctrl+f

✓ Now search  ]]</b:skin> or </style>

✓ Add the code 👇 to the top right Above

 ]]</b:skin> or </style>



/* Fixed Contact Form by gourabdesign.com */
.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}


Script by : Arlina Design

2..... Copy the contact us html code for blogger
below 👇 and paste the above </body> tag....


<script src='https://cdn.staticaly.com/gist/pyarmeindia/59bec0e9be12f9d908c494f4bc9716f5/raw/a8db1cfffca527a70032c8bed8ccae1991619601/contact-us.js' type='text/javascript'/> 


3..... Save the template and see the results.





So how to set up a certain contact widget on the blog, hopefully it will be helpful.How do you like this post? Please be sure to comment on it And if it is full, then share it in social media.
How To Install Floating Contact Form Widget On Blogger Website How To Install Floating Contact Form Widget On Blogger Website Reviewed by Gourab Design on Wednesday, March 13, 2019 Rating: 5

No comments: