Sunday, 16 August 2020

Install the Fixed Contact Form Widget on the Blog

Install the Fixed Contact Form Widget on the Blog

Install the Fixed Contact Form Widget on the Blog
Sunday, 16 August 2020

On this occasion, Bloghint.tech will share about how to install a Fixed Contact Form Widget on a Blog, which means that this widget will appear on the blog page to be precise in the lower right corner.

As we know, the contact form widget / contact form is an email facility from Blogger that connects visitors and blog owners to communicate with each other personally. The method of sending messages is quite easy, we only need to write your name, email address and message content. So you don't have to bother logging into your email account, but with the contact form widget, it's already available on our blog.

Install the Fixed Contact Form Widget on the Blog

For those who have previously used this tutorial: The Latest Way to Add a Contact Form on a Blog

Please first delete all the code related to the tutorial.

Previously, make sure that your blog has a contact form widget installed. If you haven't already added the widget in Layout> Add new widget. Okay, just get on with how to implement it.

Install the Fixed Contact Form Widget on the Blog

1. Open Blogger> Template> Edit HTML> Then add the code below before </head>

<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>

2. Next add the code below before </body>

<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>

3. Save the theme and see the results.


That's the tutorial on How to Install a Fixed Contact Form Widget on a Blog that BLOGHINT Code can share, hopefully it's useful and issalam.
Install the Fixed Contact Form Widget on the Blog
4/ 5
Oleh

Comments