[BLOGGER] Add Contact Form Popup In Blogger

Xin chào mọi người, hôm nay mình sẽ hướng dẫn các bạn cách thêm popup contact form vào BLOGGER một cách đơn giản nhất và gửi theo dữ liệu bên ngoài. Hoàn toàn đơn giản không phức tạp nhé mọi người.

Với thủ thuật này chỉ cần các bạn đặt đoạn code đúng vị trí trong template thì sẽ hiển thị một cách bình thường mà không có bị lỗi gì nhé.

Bước 1: Mọi người thêm đoạn code CSS này vào sau <![CDATA[ /* trong giao diện.

<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>  

Và tiếp đó các bạn thay phần mình bô đỏ trong đoạn text => Your_Email_Address đó bằng EMAIL muộn nhận email vào.

Bước 2: Các bạn thêm đoạn code này vào vị trí bạn muốn trong giao diện để hiển thị FORM CONTACT là thành công.

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

XEM DEMO

×

Name: Email: Message:

Chúc mọi người thành công với thủ thuật trên.
Theo Techyleaf.IN