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.

Form Contact Cho Blogspot, Mẫu Liên Hệ Cho Blogspot Cực Đẹp, Tích Hợp Mẫu Form Contact Cực Nhẹ Và Đẹp Cho Blogspot

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


<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:'';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>

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

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

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

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

Demo

Lời kết

No comments

Bài đăng phổ biến

Nhận xét mới