Tích hợp mẫu from contac cực đẹp, nhẹ cho blogger

Hôm nay mình chia sẻ cho mọi người một mẫu Form Contact dành cho Blogspot vô cùng nhẹ nhé. Không cần phải dùng Form của Docs Google hay gì cả. Ở đây mình tách từ Widgets.js ra nên nó rất ngắn gọn tinh tế luôn.

Các bước thực hiện

Truy cập vào Blogger và chỉnh sửa Template. Sau đó dán đoạn code dưới đây lên trên thẻ đóng </body>

<b:ifcond='data:view.isPost'>
<!--Code By Sĩ Ben - https://www.siblog.net-->
<!--form contact-->
<style>
.btn-popup-container input:focus::-webkit-input-placeholder{color:transparent}
.btn-popup-container input:focus:-moz-placeholder{color:transparent}
.btn-popup-container input:focus::-moz-placeholder{color:transparent}
.btn-popup-container input:focus:-ms-input-placeholder{color:transparent}
.btn-popup-container textarea:focus::-webkit-input-placeholder{color:transparent}
.btn-popup-container textarea:focus:-moz-placeholder{color:transparent}
.btn-popup-container textarea:focus::-moz-placeholder{color:transparent}
.btn-popup-container textarea:focus:-ms-input-placeholder{color:transparent}
.btn-popup-container input::-webkit-input-placeholder{color:#f0f1f5}
.btn-popup-container input:-moz-placeholder{color:#f0f1f5}
.btn-popup-container input::-moz-placeholder{color:#f0f1f5}
.btn-popup-container input:-ms-input-placeholder{color:#f0f1f5}
.btn-popup-container textarea::-webkit-input-placeholder{color:#f0f1f5}
.btn-popup-container textarea:-moz-placeholder{color:#f0f1f5}
.btn-popup-container textarea::-moz-placeholder{color:#f0f1f5}
.btn-popup-container textarea:-ms-input-placeholder{color:#f0f1f5}
.btn-popup-container input[type=text],.btn-popup-container input[type=email],.btn-popup-container textarea{background:#6bab82;width:100%;padding:8px 10px;border:1px solid #6bab82;border-radius:3px;box-sizing:border-box;margin-top:6px;margin-bottom:12px;resize:vertical;outline:none;font-family:Roboto,Arial,sans-serif;font-size:14px;color:#f0f1f5}
.btn-popup-container textarea{height:90px}
.btn-popup-container input[type=submit]{background:#6bab82;border:1px solid #6bab82;border-radius:3px;color:#f0f1f5;padding:8px 0;width:100%;letter-spacing:.007px;white-space:nowrap;font-size:15px;outline:none;cursor:pointer}
.btn-popup-container #status{margin-bottom:16px;font-style:italic;font-family:Arial;color:#f0f1f5}
.btn-popup-container label{font-size:14px;margin:0}
.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}
.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}
.close:not(:disabled):not(.disabled){cursor:pointer}
button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;outline:none}
[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}
.btn-popup{z-index:99;opacity:0;visibility:hidden;transition: .5s;transform: scale(1.015);background: radial-gradient(ellipse closest-corner,rgba(93,89,83,.3),rgba(93,89,83,.85));top: 0;left: 0;right: 0;bottom: 0;position: fixed}
.btn-popup-container h3{font-size:18px;font-weight:normal;text-transform:uppercase;color:#ffffff;margin-bottom:12px}
.btn-popup-container p{font-size:14px;margin-bottom:10px;line-height:1.5;color:#ffffff}
.btn-popup.is-visible{opacity:1;visibility:visible;transform: scale(1);transition: .5s}
@media screen and (min-width:415px){.btn-popup-container{max-width:460px}}
@media screen and (max-width:414px){.btn-popup-container{max-width:330px}.btn-popup-container h3{font-size:16px}}
.btn-popup-container{position:fixed;z-index:9999;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;background:#2c874c;color:#ffffff;padding:20px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.16);box-shadow:0 3px 10px rgba(0,0,0,0.16);line-height:normal}
.btn-popup-container .btn-popup-close{position:absolute;top:8px;right:8px;width:30px;height:30px;cursor:pointer}
.btn-popup-container .btn-popup-close::before,.btn-popup-container .btn-popup-close::after{content:&#39;&#39;;position:absolute;top:12px;width:18px;height:2px;background-color:#ffffff}
.btn-popup-container .btn-popup-close::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);left:4px}
.btn-popup-container .btn-popup-close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);right:8px}rotate(-45deg);right:8px}
</style>
<div class='btn-popup'role='alert'>
<div class='btn-popup-container'>
<h3>Gửi yêu cầu của bạn</h3>
<p>Chào bạn, nếu có gì thắc mắc cần giải đáp hãy để lại lời nhắn qua form dưới đây ! If you have any questions, please leave a message below !</p>
<label>Tên của bạn *</label>
<input id='hoten'name='hoten'placeholder='Nhập tên của bạn (Name)...'type='text' value=''/>
<label>Địa chỉ email *</label>
<inputid='emailAddress'name='emailAddress'placeholder='Nhập địa chỉ email...'type='text' value=''/>
<label>Nhu cầu của bạn</label>
<textarea id='noidung'name='noidung'placeholder='Nhập nội dung (Message)...'/>
<input id='submitEmail'type='submit'value='Gửi'/>
<span class='btn-popup-close img-replace'/>
</div>
</div>
<script>//<![CDATA[
$(window).on('load', function() {
$('.btn-popup-close').click(function() {
$('.btn-popup').removeClass('is-visible')
localStorage.setItem('is-clicked','true');
})
var local_Storage = localStorage.getItem('is-clicked');
if (local_Storage == "true") {
$('.btn-popup').removeClass('is-visible')
} else {
setTimeout(function() {
$('.btn-popup').addClass('is-visible')
}, 5000)
}
})
//]]></script>
<script>//<![CDATA[
$('.btn-popup-close').click(function() {
$('.btn-popup').removeClass('is-visible')
})
$('.email-popup').click(function() {
$('.btn-popup').addClass('is-visible')
})
$('#submitEmail').click(function(){
$(this).val('Loading...');
var hoten = document.getElementById("hoten").value;
var email = document.getElementById("emailAddress").value;
var noidung = document.getElementById("noidung").value;
if(hoten == "" || email == "" || noidung == ""){
$(this).val('Vui lòng nhập đầy đủ thông tin.');
return false;
}
if(!IsEmail(email) || email.length > 50){
$(this).val('Email không hợp lệ. Vui lòng nhập lại.');
return false;
}
if(hoten.length > 255){
$(this).val('Tên quá dài. Vui lòng nhập lại.');
return false;
}
if(noidung.length > 10000){
$(this).val('Nội dung quá dài. Vui lòng nhập lại.');
return false;
}
$.post("https://www.blogger.com/contact-form.do",
{name: hoten,
email: email,
message: noidung,
blogID: "4245348994605119666"},
function(data){
var data = JSON.parse(data);
if(data['details']['emailSentStatus'] == "true"){
$('#hoten').val('');
$('#emailAddress').val('');
$('#noidung').val('');
$('#submitEmail').val('Đã gửi thành công !');
}
})
})
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!regex.test(email)) {
return false;
}else{
return true;
}
}
//]]></script>
<!--form contact-->
</b:if>

Trong code có dòng

blogID: "4245348994605119666"

Hãy sửa 4245348994605119666thành ID của Blogspot của bạn nhé.

Demo

CLICK HERE

Lời kết

Chúc các bạn thành công nhé. Nhớ theo dõi Blog của mình thường xuyên ạ.

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait