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.
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
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.
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>
2..... Copy the contact us html code for blogger
below 👇 and paste the above </body> tag....
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.
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.
Tags:
Blogger Tips