Form yêu cầu báo giá dạng Popup cho Blogspot
Form yêu cầu báo giá dạng Popup cho Blogspot, mình sẽ chia sẽ cho các bạn code popup dạng Form báo giá siêu nhẹ và đơn giản cho các bạn. Nếu các bạn thấy hay cho mình xin 1 chia sẽ bài viết này nhé. Và nhớ ủng hộ mua theme blogspot của mình nha các bạn.
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>Video hướng dẫn cấu hình Google Docs
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>