How to install Pop-Up Contact Form widget in Blogger

I think you all are confused that what is Pop-Up Contact Form widget, Don’t get confused guys, Pop-Up Contact Form widget is also a contact widget for blogger, but with a different look and different style, Its also work same as other normal contact widgets, But with a pop-up style. As we know it, the Contact Form plugin is a blogger email service that connects visitors and blog owners to personal communication.

The way to send the message is quite simple, all we have to do is write your name, email address, and the content of the message. Therefore, you do not need to log in to your email account to use it every time. But the form with this contact plugin is already available on our blog we are just going to change its appearance.

How does it Works?

After installing the Pop-Up Contact Form widget in your blogger website, you will find a contact us button at the bottom of your blogger website, So whenever you click on that contact us button a contact form widget will appear from the bottom, in a Slide Up Animation.

Advantages of Pop-Up Contact Form!

Contact Form is a really important part of any website, If you are going to create a website, then you must have to create a contact form on your blogger website. As like other contact pages, the contact widget also works the same. It really helps your visitors to communicate with the owner, And in this case, you don’t have to share your personal contact details with everyone.

Disadvantages of Pop-Up Contact Form!

In my view, the Pop-Up Contact Form Widget is a very useful widget for visitors because they can use it from any page available on your blog website, But I also suggest you to use the Contact page as a Primary way to contact to owner And Pop-Up Contact Form as a second option.

How to install Pop-Up Contact Form Widget

It’s very easy and simple to Install Contact Pop-Up Form Widget on your website, you just have to follow some easy and simple process to install the Pop-Up Contact Form Widget, If you want to successfully install the Pop-Up Contact Form Widget In your Blogger Website then just follow the Simple steps Given Below.

  • Go to blogger.comClick on themes
    Click on the arrow after that click Edit HTML
  • Then Find </head> and paste the code given below above it.
<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>
  • Now, Find </body> and paste the given below code above it.
<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>
  • And Don’t Forget to Save the ThemeAfter that Go to Layout C
  • Click On Add a gadget
    Now Find Contact Form and click on it
  • Then Click On Save.

Conclusion:

Pop-up Contact Form Is a really unique and easy way for your visitors to connect with the owner. is simple and easy to use. If you like then you can install it with a very simple process and Enjoy it.

Leave a Comment