How To Add Contact Form Popup In Blogger Website

Discover how to seamlessly integrate a contact form popup into your Blogger website, enabling users to effortlessly send emails from any page. Elevate user engagement by presenting the contact form popup upon a click of the Contact link in your website's header menu. This tutorial will guide you through the process, ensuring a smooth and interactive communication channel for your visitors.

Simply enhance your website by inserting the provided code into the footer section. Ensure a seamless experience by assigning the Contact popup key (onclick="openCustomContactForm()") to the Contact link in your header menu. This straightforward step will effortlessly integrate a contact form popup, optimizing user interaction on your website.

You may want to read this post :

• How To Remove The Date and HTML From The Blogger Post URL
• How To Add a Subtitle For Your Blog Title In Blogger
• How To Make Responsive Image Hover Effect In Blogger

Empower users to effortlessly connect with you via email without navigating to a separate contact page. By clicking on the Header Menu Link, they can access the contact form from any page on your website. This seamless integration enhances accessibility and encourages user engagement with your contact form.

Code for Contact Form Popup in Blogger

<style>
    .custom-contact-popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 40px;
      border-radius: 8px;
      width: 600px;
      box-sizing: border-box;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }

    .custom-label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
      color: #333;
    }

    .custom-input,
    .custom-textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 20px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }

    .custom-button {
      background-color: #4caf50;
      color: #fff;
      padding: 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
      transition: background-color 0.3s;
    }

    .custom-button:hover {
      background-color: #45a049;
    }

    .custom-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }

    .custom-close-button {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      font-size: 20px;
      color: #777;
    }

    @media only screen and (max-width: 768px) {
      .custom-contact-popup {
        width: 90%;
      }
    }

    @media only screen and (max-width: 480px) {
      .custom-contact-popup {
        width: 95%;
      }
    }
</style>

<button class="custom-button" onclick="openCustomContactForm()">Open Contact Form</button>

<div class="custom-overlay" onclick="closeCustomContactForm()"></div>
<div class="custom-contact-popup">
  <span class="custom-close-button" onclick="closeCustomContactForm()">×</span>
  <form action="https://formsubmit.co/Your_Email_Address" method="POST">
    <label class="custom-label" for="name">Name:</label>
    <input class="custom-input" type="text" id="name" name="name" required=""/>

    <label class="custom-label" for="email">Email:</label>
    <input class="custom-input" type="email" id="email" name="email" required=""/>

    <label class="custom-label" for="message">Message:</label>
    <textarea class="custom-textarea" id="message" name="message" rows="4" required></textarea>

    <button class="custom-button" type="submit">Submit</button>
  </form>
</div>

<script>
  function openCustomContactForm() {
    document.querySelector(".custom-contact-popup").style.display = "block";
    document.querySelector(".custom-overlay").style.display = "block";
  }

  function closeCustomContactForm() {
    document.querySelector(".custom-contact-popup").style.display = "none";
    document.querySelector(".custom-overlay").style.display = "none";
  }
</script>

Information:Please note that when incorporating this in the Header Menu, there's no necessity to include the HTML code for the button, as illustrated below. The highlighted portion within the Link Element is all that's required for seamless integration.

<button class="custom-button" onclick="openCustomContactForm()">Open Contact Form</button>

Trust that you've seamlessly integrated the popup contact form into your Blogger website.