Form yêu cầu báo giá dạng Popup cho Blogspot

CÁC BƯỚC THỰC HIỆN

Các bạn coppy đoạn code này và dán vào code HTML của Blogspot hoặc Website wordpress trên thẻ </body>. Và nhớ cấu hình form đăng ký bằng Google Docs nhé, nếu không biết cấu hình Google Docs xem video bên dưới nek.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
  z-index: 999;
}
/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9999;
}
/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
<button class="open-button" onclick="openForm()">Yêu Cầu Báo Giá</button>
<div class="form-popup" id="myForm">
  <form action='https://docs.google.com/forms/u/2/d/e/1FAIpQLSfwRr9QbhX7lG3NO-mgDRRT1KfBy2U_xaemxXl-dJ5GyoLmNw/formResponse' class="form-container">
    <p>BÁO GIÁ</p>
    <label for="email"><b>Họ Và Tên</b></label>
    <input type="text" placeholder="Họ Và Tên" name="entry." required="" />
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Email" name="entry." required="" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"/>
    <label for="psw"><b>Số Điện Thoại</b></label>
    <input type="text" placeholder="Số Điện Thoại" name="entry." required="" pattern='[0-9]{10,11}'/>
    <label for="psw"><b>Ghi Chú</b></label>
    <input type="text" placeholder="Ghi Chú" name="entry." required="" />
    <button type="submit" class="btn">Yêu Cầu</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>
<script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}
function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
</script>

Video hướng dẫn cấu hình Google Docs