Install the Fixed beautiful Contact Form Widget on the Blog | Dn420

 At this event, Dn420 will share how to install a Fixed beautiful Contact Form Widget on the Blog, which means that this widget will appear on the blog page, precisely in the lower right corner.

What is the Contact Form Widget?

As we know, the contact form widget/contact form is one of the email facilities from Blogger that functions to connect visitors and blog Admin to communicate with each other personally. How to send messages is quite easy, we only need to write the name, email address, and message content. So you don't need to bother logging into your email account, but with this contact form widget, it's already available on our blog.

Note: For those who have previously used this guides: The Latest Way to Add a Contact Form on a BlogPlease first delete all code related to the tutorial.

Previously, make sure that your blog has the contact form widget installed. If you haven't already, Please add this from the widget in Layout > Add a new widget. Okay, let's go directly to how to apply it.

Install the Fixed beautiful Contact Form Widget on the Blog?

•  Go to Blogger Dashboard > Then Template > Edit in  HTML mode  > Then add the code below before </head> tag

<style>
/* 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}
</style>

Next add the code below before </body> tag

<script>
//<![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>

At last Save, the theme, and please see the result on your blog

Conclusion:

Thanks for reading this Install the Fixed beautiful Contact Form Widget on the Blog | Dn420 post for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.

Go to Link