How to Add a Floating Contact Form in Blogger

How to Add a Floating Contact Form in Blogger

A floating contact form is an essential tool for enhancing communication on your Blogger site. By allowing visitors to contact you without leaving the page, it creates a seamless user experience that encourages interaction and improves accessibility. In this guide, you’ll learn how to add a floating contact form to your Blogger website.

Also Read: How to Add a Cookie Consent to Your Blogger Website (Responsive)

Why You Should Add a Floating Contact Form in Blogger

Enhanced User Experience: A floating contact form makes your website look very professional and requires even less effort for visitors to find your contact Page.

Increased Engagement: A floating contact form encourages users to interact with your site, making it easier for them to get in touch, submit inquiries, or leave feedback.

Improved Accessibility: A floating contact form is always visible and easily accessible as the visitor continues to scroll down your blog. Visitors don't have to find your contact page. The form is right there when they need it, ensuring that they can reach you quickly and efficiently.

Also Read: How to Add a Popup Toast Notification Widget in Blogger.

Steps to Add a Floating Contact Form to Your Blogger Site

To add a floating contact form to your Blogger website, follow these steps:

Step 1: Login to your Blogger account. In the left sidebar, selectTheme to customize the design.

Step 2: In theTheme section, click on the arrow next to "Customize".

Step 3: Step 3: Now click on "Edit HTML" to modify the HTML code of your blog. 

Step 4: Press Ctrl + F (Windows) or Cmd + F (Mac) to bring up the search function. Type </b:skin> to find the closing </b:skin> tag. Just above the </b:skin> tag, paste the following CSS code to style the floating contact form:

.floating-contact-form .floating-button {display: block;z-index: 999;width: 60px;height: 60px;position: fixed;bottom: 20px;right: 21px;cursor: pointer;color: #fff;text-align: center;line-height: 60px;background: linear-gradient(135deg, #397ef5 0%, #51a5fd 100%);border-radius: 50%;transition: all 0.2s ease;border:none;}.floating-contact-form .floating-button svg {width: 25px;height: 25px;fill:#f8fafc;vertical-align:middle;}.floating-contact-form .contact-form-widget {position: fixed;bottom: 100px;right: 20px;width:100%;max-width: 315px;background-color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 10px;z-index: 999;display: none;}.floating-contact-form .contact-form-widget .form{padding:20px}.floating-contact-form .form-group {position: relative;margin-bottom: 20px;}.floating-contact-form .form-group textarea{height:unset!important;line-height:unset!important;}.floating-contact-form .form-group input, .floating-contact-form .form-group textarea {float:none;height: 2.5rem;line-height:2.5rem;background-color:#f3f4f6;font-size:14px;margin:0;width: 100%;padding: 12px;border: 1px solid #f3f4f6;border-radius: 4px;outline: none;transition: border-color 0.2s;}.floating-contact-form .form-group input:focus, .floating-contact-form .form-group textarea:focus {border-color: #007bff;background:#ffffff;}.floating-contact-form .form-group label {position: absolute;top: 12px;left: 14px;color: #888;font-size: 14px;pointer-events: none;transition: all 0.2s ease;}.floating-contact-form .form-group input:focus + label, .floating-contact-form .form-group input:not(:placeholder-shown) + label, .floating-contact-form .form-group textarea:focus + label, .floating-contact-form .form-group textarea:not(:placeholder-shown) + label {top: -10px;left: 8px;font-size: 0.85rem;color: #4285f4;background-color: #ffffff;padding: 0 5px;}.floating-contact-form .contact-form-widget.show {display: inline-grid;animation: slideUp 0.4s ease-out;}@keyframes slideUp {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}.floating-contact-form .hidden {display: none;}.floating-contact-form .bot-flex {display: flex;background: linear-gradient(135deg, #397ef5 0%, #51a5fd 100%);padding: 15px 10px 10px;align-items: center;border-radius: 10px 10px 0 0;}.floating-contact-form .bot-title {font-size: 23px;font-weight: 700;margin: 0 0 10px;color:#f8fafc;}.floating-contact-form .bot-text {position: relative;font-size: 12px;background: #fff;padding: 2px 17px;color: #000;border-radius: 30px 0;}.floating-contact-form .contact-form-button-submit{background:linear-gradient(135deg, #397ef5 0%, #51a5fd 100%);}
@media (max-width: 480px){.floating-contact-form .contact-form-widget {max-width: calc(100% - 1.5rem);right: auto;left: 50%;transform: translateX(-50%);transition: none;} .floating-contact-form .contact-form-widget.show {animation: slideUpMobile 0.4s ease-out;}@keyframes slideUpMobile{from{opacity: 0;transform: translateY(20px) translateX(-50%);}to{opacity: 1;transform: translateY(0) translateX(-50%);}}}

Step 5: After adding the CSS code, search for the </body> tag by pressing Ctrl + F (or Cmd + F) and locating it in the HTML. Just above the </body> tag, paste the following HTML and JavaScript code for the floating contact form appearance:

<div class="floating-contact-form">
    <button id="e2contact-button" class="floating-button">
      <svg id="contact-us-svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right-text-fill" viewBox="0 0 16 16">
  <path d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1m0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1m0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1"/>
</svg>
        <svg id="close-svg" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M18.3 5.7c-.4-.4-1-.4-1.4 0L12 10.6 7.1 5.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l4.9 4.9-4.9 4.9c-.4.4-.4 1 0 1.4s1 .4 1.4 0l4.9-4.9 4.9 4.9c.4.4 1 .4 1.4 0s.4-1 0-1.4L13.4 12l4.9-4.9c.4-.4.4-1 0-1.4z"/>
        </svg>
    </button>
    <div class="contact-form-widget">
      <div class='bot-flex'>
      <div class="bot-chat"><div class="bot-title">Contact Us</div><div class="bot-text">We will in touch with you Shortly!</div></div></div>
    <div class="form">
        <form name="contact-form">
            <div class="form-group">
                <input placeholder=" " class="contact-form-name" id="ContactForm2_contact-form-name" name="name" size="30" type="text" value="">
                <label for="ContactForm2_contact-form-name">Name</label>
            </div>
            <div class="form-group">
                <input placeholder=" " class="contact-form-email" id="ContactForm2_contact-form-email" name="email" size="30" type="text" value="">
                <label for="ContactForm2_contact-form-email">Email</label>
            </div>
            <div class="form-group">
                <textarea placeholder=" " class="contact-form-email-message" cols="25" id="ContactForm2_contact-form-email-message" name="email-message" rows="5"></textarea>
                <label for="ContactForm2_contact-form-email-message">Message</label>
            </div>
            <input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send">
            <div style="text-align: center; max-width: 222px; width: 100%">
                <p class="contact-form-error-message" id="ContactForm2_contact-form-error-message"></p>
                <p class="contact-form-success-message" id="ContactForm2_contact-form-success-message"></p>
            </div>
        </form>
    </div>
</div>
</div>
    <script>
        const e2contactButton = document.getElementById('e2contact-button');
        const contactForm = document.querySelector('.contact-form-widget');
        const contactUsSvg = document.getElementById('contact-us-svg');
        const closeSvg = document.getElementById('close-svg');
        e2contactButton.addEventListener('click', () => {
            contactForm.classList.toggle('show');
            contactUsSvg.classList.toggle('hidden');
            closeSvg.classList.toggle('hidden');
        });
    </script>

Step 6: Finally, click on the Save button.

Conclusion

Adding a floating contact form to your Blogger site enhances user experience and engagement by providing a simple, accessible way for visitors to contact you. This feature can lead to increased connections, better communication, and more growth for your blog. With just a few lines of HTML, CSS, and JavaScript, you can seamlessly integrate a professional contact form that enhances interaction on every page.