Hộp form liên hệ ẩn hiện ở chân trang cho Blogger Blogspot

Hiện nay có rất nhiều form liên hệ dạng plugin dành cho Blogger Blogspot. Nhìn chung thì rất đa dạng, dễ dàng tích hợp, tùy biến cao. Nhưng khi làm blogger, hầu hết chúng ta đều biết, càng dùng nhiều plugin thì tốc độ tải trang blog của mình càng chậm đi vì còn phải lệ thuôc vào tốc độ máy chủ của những plugin đó nữa.

Đã từ lâu, Blogspot đã hộ trợ sẵn một tiện ích form liên hệ nhưng hiện vẫn ít được các Blogger sử dụng. Dựa trên tiện ích có sẵn này, mình đã xây dựng một hộp liên hệ hấp dẫn hơn, độc đáo hơn, hoàn toàn không phụ thuộc vào plugin bên ngoài, và đảm bảo tối ưu cho tốc độ tải trang.

DEMO: Shareplainly.blogspot.com hoặc Bitcoinsurfer.blogspot.com đang sử dụng.

Hộp form liên hệ ẩn hiện Blogger Blogspot

Hộp form liên hệ ẩn hiện Blogger Blogspot

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

Bước 1: 

Đăng nhập vào Blogger.com >> Vào blog cần sửa (Blog của tôi) >> Chọn Bố cục >> Chọn Thêm tiện ích >> Chuyển qua tab Tiện ích khác >> Chọn Biểu mẫu liên hệ >> Chọn Lưu

Bước 2:

Trở lại Blog của tôi >> Chọn Mẫu >> (Lưu ý: trước khi làm bước chỉnh sửa HTML này, bạn nên sao lưu mẫu HTML của mình lại, phòng khi có lỗi phát sinh trong quá trình chỉnh sửa, ta có thể khôi phục lại mẫu HTML ban đầu) Chọn Chỉnh sửa HTML >> Chọn Chuyển đến tiện ích >> chọn ContactForm1 (xem hình)

Hộp form liên hệ ẩn hiện Blogger Blogspot

Sau đó xóa hết những thứ bên trong tiện ích này, chỉ để lại các thẻ như sau:

<b:widget id='ContactForm1' locked='false' title='LIÊN HỆ' type='ContactForm'><b:includable id='main'></b:includable></b:widget>

Tiếp theo thêm: #ContactForm1 {display:none} vào trước thẻ ]]></b:skin>

Và thêm code sau vào trước thẻ </body>

<style> #form-plainly {position: fixed;bottom:0;right:30px;z-index:1000;margin:0;padding:0;} #form-plainly .button:hover {background:#7f6000;border:1px #7f6000;} #form-plainly .button {background:#FDA100;border:1px #FDA100;cursor:pointer;font-size:13px;margin:0;padding:4px;width:230px;color:#fff;font-weight: bold;} .contact-form-button-submit {background:#FDA100;border-color:#FDA100} .contact-form-button-submit:hover {background:#7f6000;border-color:#7f6000} .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {border-color:#FDA100} </style><br /> <div id='form-plainly'> <div> <input class='button' onclick='if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'LIÊN HỆ SHARE PLAINLY'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'LIÊN HỆ SHARE PLAINLY'; }' type='button' value='LIÊN HỆ SHARE PLAINLY'/><br /> </div> <div> <div style='background:#fff; border: 1px solid #ddd; display: none;padding: 4px;width:220px'> <div style='text-align: justify;'> Mời bạn để lại lời nhắn.<br /> Chúng tôi sẽ sớm gửi hồi đáp qua Email.<br /> Chân thành cảm ơn bạn!</div> <form name='contact-form'> <p/>Tên<br /> <br/><br /> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><br /> <p/>Email<br /> <span style='font-weight: bolder;'>*</span><br /> <br/><br /> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><br /> <p/>Lời nhắn<br /> <span style='font-weight: bolder;'>*</span><br /> <br/><br /> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'/><br /> <p/><input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gửi'/><br /> <p/><div style='text-align: center; max-width: 210px;'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'/> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'/> </div> </form> </div> </div> </div>

Chú ý:
Bạn có thể tùy chỉnh màu cho nút ấn hay màu đường viền với các css trong
Thay đổi các đoạn văn bản tùy thích trong code: value='LIÊN HỆ SHARE PLAINLY' và "Mời bạn để lại lời nhắn. Chúng tôi sẽ sớm gửi hồi đáp qua Email. Chân thành cảm ơn bạn!"

Cuối cùng chọn Lưu mẫu và tải lại blog của mình để xem kết quả.

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