CODE Biểu mẫu liên hệ cho bloger

by Khogiaodienblogger on January 23, 2018 in Tips

Biểu mẫu liên hệ đẹp cho blogger

T

rao đổi ý kiến có khi là một việc rất cần thiết đối với đọc giả và người quản trị. Bởi vì thực tế có nhiều vấn đề đòi hỏi cả hai bên phải trực tiếp trao đổi với nhau mà không thông qua bên thứ ba nào khác. Và như bạn đã biết, với tiện ích liên hệ có sẵn của blogger, chỉ vài thao tác đơn giản và trong khoảng chưa đầy 2 phút bạn đã có một biểu mẫu liên hệ cho blog của mình. Nhưng làm thế nào để mẫu liên hệ của bạn không xuất hiện ở trang chủ mà hiển thị tại một trang nhất định khác? Và làm thế nào để có một giao diện trang liên hệ cho phép bạn tùy chỉnh nó? Ở bài viết này chia sẻ với bạn cách để thực hiện điều đó.

Cách thực hiện:

I> THÊM BIỂU MẪU LIÊN HỆ VÀO BLOGGER.

Để thực hiện điều này bạn làm như sau:
1. Đăng nhập vào tài khoản blogger của bạn.
2. Nhìn sang bên trái bảng điểu khiển và nhấp chuột vào bố cục
3. Nhấp chuột chọn thêm tiện ích - tiện ích khác
4. Nhấp chuột vào biểu tượng hộp thư màu xanh dương có dòng tiêu đề biểu mẫu liên hệ - lưu.

Bây giờ bạn đã thêm thành công tiện ích mẫu liên hệ vào blog của mình, chắc chắn mẫu liên lệ này sẽ xuất hiện ngay tại trang chính blog của bạn. Từ giờ đọc giả của bạn có thể dễ dàng tương tác với bạn. Nhưng nếu bạn không muốn cho mẫu liên hệ này xuất hiện ở trang chủ thì phải làm thế nào? Sau đây là cách giải quyết vấn đề của bạn.

II> ẨN BIỂU MẪU LIÊN HỆ TRÊN TRANG CHỦ BLOGGER.

Để ẩn biểu mẩu liên hệ bạn hãy vào phần chủ đề tiếp tục nhấp vào chỉnh sửa HTML, nhấp chuột vào giữa bảng điều khiển và nhấn tổ hợp phím Ctrl+f tìm đến ]]></b:skin> sau đó dán đoạn mã dưới đây vào trước nó và lưu lại.

div#ContactForm1 {

display: none !important;

III> CHÈN MÃ ĐỂ TẠO TRANG LIÊN HỆ.

. Vào chủ đề chọn chỉnh sửa HTML tiếp theo tìm đến thẻ </head>

. Dán đoạn mã dưới đây vào trước thẻ </head> sau đó lưu mẫu.

IV> TẠO TRANG LIÊN HỆ CHO BLOGGER

Bạn có thể tạo trang liên hệ dạng trang tĩnh cách làm như sau:
. Vào trang và chọn trang mới.

. Đặt tiêu đề trang sau đó chuyển sang chế độ soạn thảo bằng HTML. Coppy và dán một trong các đoạn code bên dưới vào. Nhấp vào biểu tượng bánh răng bên phải giao diện để cài đặt các tùy chọn. Bấm hoàn thành và xuất bản là xong.

V> CODE TẠO TRANG LIÊN HỆ CHO BLOGGER.

Mẫu liên hệ 1

Đây là một biểu mẫu có phong cách đơn giản, Được thiết kế dòng mô tả nằm trong khung. Với mẫu này cũng bạn dễ dàng sửa lại nội dung, tùy chỉnh kích thước, thay đổi màu sắc...bằng cách cài đặt lại code mẫu 1 theo ý thích của bạn.

Code mẫu 1

.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><div class="tb-contact-form-widget">
<form name="contact-form">
<div class="name">
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nhập tên của bạn"/>
<label for="name">Tên</label>
</div>
<div class="email">
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Địa chỉ email"/>
<label for="email">E-mail *</label>
</div>
<div style="clear: both;"></div>
<div class="message">
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Viết nội dung...">
</textarea>
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Đệ trình" />
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div></div></form></div>

Mẫu liên hệ 2
Mẫu này có chèn ảnh biểu tượng trong các khung, dòng tên được đặt bên ngoài hộp. Bất cứ điều gì bạn cũng có thể thay đổi bằng cách can thiệp vào code mẫu 2, chẳng hạn bạn có thể thay đổi màu nền bằng cách dán bất kỳ mã màu nào mà bạn thích vào #afafaf hoặc thay đổi phong chữ , kích thước các hộp...

Code mẫu 2

<div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p class='text'>Tên</p> <input class='name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p class='text'>E-Mail *</p> <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p class='text'>Nội dung *</p> <textarea class='message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Đệ trình'/> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div> <style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold; font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;} .contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form textarea{background: #afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form input.name {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2cgZCQp-Pr46mtVkmiQWo3o0zRcnqBXzb6ZYwvaG2yjmgdcWJyoKtH7jQqQrJRD_dWXBS2iJ4k_oqeyY2dy34XB1eC93SYAe88-R183_eqvQ3nV_0taAERlbYpivFXfPe1KKY9HitDXW/s1600/pro-pic.png);background-position: 11px 8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;} .form input.email {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJLo4A045z9BNrpGB1pwygjcewShztwFILHH4cRFb31l6Bcw7rHCjkjOi_7vvgpTOOSfxBG31tjK9bSoXnrQeEBn9N1aV6CUYJki5WopJsFUI1Mz6EHrAGIWCBmGU0LItlrqGy0pvzgma/s1600/msg-box.png);background-repeat: no-repeat; padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form input.message {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6TCtH373v30g-veOr-YVc5k-okBIUmpT1LC1y0QX3hEoXtRQBkePMjKghd8sgFcP0mdwEP6yaOOd6vHqUnzKt9FTPZe4gTSm_ctYuxDgmt78e63qfDNIC4LBCRQKRX3isTfAomXA0GgW/s1600/pencil.png);background-repeat: no-repeat;background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .form input:focus, .form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3, #416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px) { .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;} </style>

Mẫu liên hệ 3

Code mẫu 3

Mẫu liên hệ 4

Code mẫu 4

<style>

.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2d8F6432C-T51ib2WoOMCSEPiVhscp7OtPjMFvA9eImfdEi_UlMOWJ6CN_hikmxng2nEE8Tl5VG4S4fZ9458b7XM3puhXa_Fly9PAA0oiu6pO0kuzsMO5ZIa2u8NhvBUgzNOTt_LRZEY/s1600/contact.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}

.srbtn{display:inline-block;}

.cform-button, .btn-reset{background-color:#fffcfc;padding:5px 30px;}

.cform-button:hover {background-color: #277fba;color: #fff;}

.btn-reset:hover {background-color: red;color: #fff;}

.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}

.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;

-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}

.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;

-moz-box-shadow: 0 0 0 1px #e8c291 inset;

-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}

.b-social-buttons{list-style-type:none;text-align:center;}

.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}

.b-social-buttons li a{color:#333;text-decoration:none;}

#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}

</style>

<h3>Trang mạng xã hội</h3>

<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>

<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>

<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>

</ul></div></form></div>

Nếu có bất kỳ khó khăn gì trong việc cài đặt, hãy để lại lời nhắn trong biểu mẫu liên hệ.

Chúc bạn thành công!

About Khogiaodienblogger
Đây là một trang tài nguyên chia sẻ mẫu blogger chất lượng cao với bố cục cao cấp và thiết kế mạnh mẽ.

Khogiaodienblogger.blogspot.com

.