[BLOGGER] Add Contact Form Popup In Blogger
[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
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
Và tiếp đó các bạn thay phần mình bô đỏ trong đoạn
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ị
Chúc mọi người thành công với thủ thuật trên.
Theo Techyleaf.IN
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
Chúc mọi người thành công với thủ thuật trên.
Theo Techyleaf.IN
Join the conversation