Fixed On Click Popup Contact Form For Blogger

Contact form gadget is the one of the most important and useful gadget for your blog. It is useful for your visitors to get in touch with you easily without sharing your email or phone number. Blogger also has it's own contact form gadget but it really looks outdated. So , i am here to teach you how to convert this outdated contact form gadget into the stylish one with CSS and JS.

We will use JS and CSS to hide or show contact form on clicking contact us button. This button position is fixed to right bottom which means it will remain fix even if user scroll down.

How to add fixed on click popup contact form to blogger ?

Step1: Go to Blogger > Layout > Add a gadget to sidebar and choose Contact Form from the list. Skip this step if you already have contact form gadget on your blog.

Step2: Go to Blogger > Theme > Edit html , search for </head> using Ctrl+F and paste below script above it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#contactus").click(function(){
        $("#ContactForm1").toggle();
    });
});</script>

Step3: Search for ]]></b:skin> and paste below CSS before it.

#ContactForm1 {position:fixed;right:10px;bottom:0px;background:#fff;color:#000;border:1px solid #000;padding:5px;border-radius:5px;display:none}
#ContactForm1 h2 {color:white;background:#c60000;text-align:center;padding:2px;}
#ContactForm1_contact-form-submit {float:right;border:none;border-radius:5px;background:#c60000 !important;outline:none;}
#ContactForm1_contact-form-submit:hover{background:#ed0000 !important;outline:none;}
#ContactForm1_contact-form-submit:active {transform: translateY(2px);outline:none;}
#contactus {position:fixed;right:10px;bottom:0px;padding:0 30px;color:#fff;background:#c60000;font-size:18px;border:none;outline:none;border-radius:5px;}#contactus:hover {background:#ed0000;}

Step4: Now, search for </body> and paste below html before it.

<b:if cond='data:blog.isMobileRequest != &quot;true&quot;'>
<button id="contactus">CONTACT US</button>
</b:if>

Step5: Save Theme.