Chia sẻ mẫu trang liên hệ đẹp mắt cho blogger

Chia sẻ mẫu trang liên hệ đẹp mắt cho blogger

Với mẫu trang liên hệ tạo sự chuyên nghiệp cho blog của bạn tăng sự tương tác giữa khách hàng với website của bạn. Dưới đây là mẫu trang liên hệ của Bchiase.com cho trang www.thucleblogs.tk để tạo trang liên hệ đẹp mắt như vậy bạn cần làm theo các bước sau. 

Xem thêm: Hướng dẫn xóa bản quyền chân trang mà không sợ chuyển hướng về
B1: Tạo trang mới vào mục Trang - Trang mới.

B2: Chuyển sang mục html các bạn dán đoạn code dưới đây vào

Chào mừng bạn đến với Thucle' Blog Nếu bạn có thắc mắc gì hay muốn góp ý thêm về website này bạn có thể gửi mail về địa chỉ <a href="lethuc21891@gmail.com">lethuc21891@gmail.com</a>
<form name="contact-form"><span style="color: white; font-size: 1.2em;"><i class="fa fa-check-square-o"></i> Name </span><br>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">  <br>
<br>
<span style="color: white; font-size: 1.2em;"><i class="fa fa-envelope-o"></i> Email Address <span style="color: #ffff99; font-size: x-small; font-weight: bold;">important</span></span> <br>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">  <br>
<br>
<span style="color: white; font-size: 1.2em;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #ffff99; font-size: x-small; font-weight: bold;">important</span></span><br>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message">  <br>
<div style="max-width: 100%; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br>
<style scoped="" type="text/css">
.breadcrumbs, .post_meta {display: none;}
form {background: #B32F60;padding: 9px;}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:100%;height:auto;margin:10px auto;padding:12px;background:#fff;color:#444;border:1px solid transparent;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all .5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:140px;margin:10px 0;padding:12px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid transparent;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;}
#ContactForm1_contact-form-submit{width:100%;font-family:'Open Sans';float:left;background:#494158;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:15px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border:1px solid transparent;transition:all .6s ease}
#ContactForm1_contact-form-submit:hover {color:#fff;background:#584f69;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:rgba(255,255,255,0.2);border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media screen and (max-width:640px){
#outer-wrapper {margin:0 20px;}}
</style>  <script type="text/javascript">
//<![CDATA[
var submit = document.getElementById('ContactForm1_contact-form-submit');
submit.addEventListener("click", function () {
    var email = document.getElementById('ContactForm1_contact-form-email').value,
        filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        alert('Please enter a valid email!');
    }
}, !1)
//]]>
</script>

B3: Lưu lại trang và dẫn link của trang về Menu hoặc chèn link vào bài viết hoặc bất cứ đâu bạn muốn.

Các bạn có thể chỉnh sửa các mục được mình tô đỏ ở trên nhé theo ý các bạn.

Chúc các bạn thành công và có mẫu trang liên hệ đẹp mắt nhé !!! Các bạn có thể tham khảo mẫu này tại www.thucleblogs.tk/p/contact.html