Cảm ơn bạn đã tham gia khảo sát
Đóng góp của bạn sẽ giúp chúng tôi dần cải thiện về mặt nội dung cũng như giao diện của trang.

Khanh Blogger

Khanh Blogger

Tạo hộp liên hệ (Contact Form) ẩn hiện dưới chân trang cho Blogspot

Tiếp nối bài viết hướng dẫn tạo hộp đăng ký theo dõi giống CanhMe cho Blogspot thì hôm nay, Khanh Blogger sẽ mang tới cho bạn một tiện ích mặc định của Blogger.com nhưng được tùy biến cũng như có nhiều chức năng hơn, đó là cách tạo hộp liên hệ (Contact Form) ẩn hiện dưới chân trang cho Blogspot. Thay vì mặc định widget được đặt ở sidebar thì widget ở bài viết hôm nay sẽ có dạng ẩn hiện như một thanh Chat. Để hình dung rõ hơn, xem Demo ở phía dưới nhé !


Tạo hộp liên hệ (Contact Form) ẩn hiện dưới chân trang cho Blogspot
Ảnh minh họa

XEM DEMO


Cách thực hiện

Bước 1: Đăng nhập vào Blogger.com > Chủ đề > Chỉnh sửa HTML > Chèn toàn bộ code dưới đây vào phía trên thẻ đóng </body>:

<div class='content-form'> <div class='box-form'> <a href='#chat-now'>Leave a message <i class='fa fa-comments'/></a> </div> <div class='entry-form'> <div class='widget ContactForm container' id='ContactForm1'> <div class='contact-form-widget' data-scroll-reveal='enter right and move 50px'> <div class='form'> <p></p> <form name='contact-form'> <div class='fm_namer'> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' onblur='this.placeholder = &apos;Name&apos;' onfocus='this.placeholder = &apos;&apos;' placeholder='Name' size='30' type='text' value=''/> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' onblur='this.placeholder = &apos;E-mail&apos;' onfocus='this.placeholder = &apos;&apos;' placeholder='E-mail' size='30' type='text' value=''/></div> <div class='fm_message'> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' onblur='this.placeholder = &apos;Message&apos;' onfocus='this.placeholder = &apos;&apos;' placeholder='Message' rows='7'/> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/> <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> </div> </div> </div> </div>
<style> .contact-form-name, .contact-form-email,.contact-form-email-message {font-size:15px; color: #333; font-family: Arial,sans-serif;} .contact-form-name, .contact-form-email {margin-bottom: 10px; padding:10px; display:block;} .contact-form-email-message {width:100%; max-width: 100%; height:100px; margin-bottom:10px; padding:10px; font-size:16px; } .contact-form-button-submit {border: none; display:block; border-radius:4px; background: #444; color: #fff; cursor:pointer; margin-bottom: 5px; font-size:16px; padding:20px 30px;} .contact-form-button-submit:hover{opacity:.9;} .content-form {width:260px; position: fixed; right: 5%; bottom: 0; z-index: 999;} .box-form a {padding: 5px 10px; border-radius:5px 5px 0 0; background: #008fcc; color: white; display: block;} .entry-form {border: 1px solid #ccc; background:#fff; padding: 10px; display: none;} .box-form {text-align: left;} .box-form i{float:right; font-size:18px; margin-top:2px;} .entry-form .contact-form-widget {width: 100%; max-width: 100%;} .entry-form .contact-form-name, .entry-form .contact-form-email {padding:5px; font-size:13px; max-width: 240px} .entry-form .contact-form-email-message {width: 100%; height:80px; padding:5px; font-size:13px; margin-bottom:6px;} .entry-form .contact-form-button-submit {font-size:13px; padding:4px 20px; height:30px} .entry-form p{font-size:11.5px; line-height:15px; margin-bottom:6px;} </style>
<script> var move_up = false; $(&#39;.box-form a&#39;).click(function(){ if (!move_up) { move_up = true; $(&#39;.entry-form&#39;).slideDown(); } else { move_up = false; $(&#39;.entry-form&#39;).slideUp(); } }); </script>

Bạn đang thắc mắc vì chưa thấy nó gửi đến Email khi điền contact đúng không. Bước tiếp theo sẽ là bước cuối cùng hoàn thành widget.

Bước 2: Vào Bố cục > thêm tiện ích > Biểu mẫu liên hệ > Lưu

Chú ý : 

  • Thủ thuật này chỉ hoạt động khi blog của bạn chưa xóa CSS và JS mặc định của Blogger.com.
  • Nếu lỗi CSS, bạn hãy xóa CSS cũ của mẫu Contact Form trong HTML blog nhé !
Chúc các bạn thành công !

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm