Adding a Popup Contact Form to Your Blogger Website

Want to make it easier for visitors to get in touch with you? Look no further! In this article, we'll show you a simple yet effective way to add a contact form popup to your Blogger website. By doing so, you'll give your visitors the convenience of sending you emails from any page they're on.

Setting up this feature is a breeze. All you need to do is add a specific code snippet to the footer section of your website. This code will work its magic by creating a popup whenever someone clicks on the contact link in your header menu. Just remember to assign the contact popup key (onclick="openCustomContactForm()") to the header menu link, and you're good to go!.

Users can conveniently contact you via email without the need to navigate to a separate contact page, thanks to this user-friendly contact form. By simply clicking on the header menu link, the form can be accessed from any page. Moreover, you have the flexibility to customize the appearance of the link by applying basic CSS code to make it resemble a button.

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>  

If you are using the Header Menu, there is no requirement to include the Button HTML code as demonstrated below. Simply include the highlighted text in the Link Element.

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

I hope you've managed to add the popup contact form to your Blogger website. If you have any questions or need further assistance, feel free to ask in the comment section below.

For a vidio tutorial click here