Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot
Trước đây mình đã có một bài viết hướng dẫn làm thế nào để tạo trang liên hệ cho Blogger. Ở bài viết đó mình đã hướng dẫn với các bạn cách tạo và chia sẻ với các bạn một giao diện đơn giản cho trang liên hệ đó. Hôm nay mình lập này xin được chia sẻ với các bạn một giao diện mới theo ý kiến cá nhân của mình thì đẹp hơn so với giao diện trước đó, mời các bạn xem thử.
Trước khi thực hiện thêm giao diện này vào blog của bạn, nếu bạn có sử dụng đoạn css giao diện mà mình chia sẻ tải bài viết trước thi hãy xóa nó đi. Còn đối với những bạn chưa làm gì hết, thì hãy thêm vào blog của mình widget biểu mẫu liên hệ theo hướng dẫn ở bài viết trước luôn.
Bước tiếp theo cũng tương tự như bài viết thêm đoạn css căn chỉnh giao diện vào trước thẻ ]]></b:skin> trên phần chỉnh sửa template của bạn.
P/S: Cập nhật thêm video hướng dẫn http://youtu.be/oi10qyoLncE
Trước khi thực hiện thêm giao diện này vào blog của bạn, nếu bạn có sử dụng đoạn css giao diện mà mình chia sẻ tải bài viết trước thi hãy xóa nó đi. Còn đối với những bạn chưa làm gì hết, thì hãy thêm vào blog của mình widget biểu mẫu liên hệ theo hướng dẫn ở bài viết trước luôn.
Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot
Công việc đầu tiên bạn đối với những bạn chưa có trang liên hệ thì hãy tạo một trang trống rồi sao chép và dán đoạn mã sau đây vào trang đó, còn đối với những bạn có tạo trang liên hệ trước đó rồi thì hãy thay thế đoạn mã trước tại trang đó bạn đoạn mã này.<form name="contact-form"> <p></p> Họ và tên <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <p></p> Địa chỉ Email <span style="color: red; font-weight: bolder;">*</span> <p></p> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <p></p> Lời nhắn <span style="color: red; font-weight: bolder;">*</span> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <p></p> <input id="ContactForm1_contact-form-submit" type="button" value="Gửi" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form>Lưu ý đối với đoạn mã trên, mình không hề thêm một thẻ <br> ngắt dòng nào vì mình sử dụng Tùy chọn Nhấn "Enter" để ngắt dòng. Do đó nếu bạn nào sử dụng thẻ <br> thì tự thêm vào dùm mình nhé.
Bước tiếp theo cũng tương tự như bài viết thêm đoạn css căn chỉnh giao diện vào trước thẻ ]]></b:skin> trên phần chỉnh sửa template của bạn.
/* CSS Căn Chỉnh Biểu Mẫu Liên Hệ */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}
Sau khi hoàn tất thì lưu lại toàn bộ giao diện cũng như trang mà mình đã hướng dẫn các bạn tạo ở trên là hoàn tất.Lời kết
Về giao diện mới thành thì nó cũng tương đối là đơn giản, nhưng rõ rằng mà đẹp hơn khá nhiều, vì phông chữ đã được căn chỉnh cho to hơn và các phần để nhập văn bản cũng có kích thước hợp lý hơn và hiệu ứng đẹp hơn. Chúc các bạn ngon mắt hơn với giao diện này!P/S: Cập nhật thêm video hướng dẫn http://youtu.be/oi10qyoLncE
lúc 10:25 30 tháng 11, 2014
Bạn ơi, mình muốn cho cái form liên hệ này vào lightbox thì làm sao vậy bạn ? Trang mình hiện đang xài Lightbox mà mình chèn form này vào toàn bị lỗi ko gửi đc thư. Bạn giúp mình với nhé.
Link Website mình : http://www.siuhot.vn/
lúc 08:24 13 tháng 2, 2015
em làm được rồi nhưng mà sao cái nút bấm send nó bị mất một nữa rất khó chịu vậy bác, đọc giả củng phàn nàn rất khó bấm
site em: http://sshfree24h.blogspot.com
bác coi dùm em cái, nó nằm bên tay phải ý
lúc 08:31 13 tháng 2, 2015
Bác xóa mấy đoạn css #ContactForm1_contact-form-submit { ... }, và #ContactForm1_contact-form-submit:hover { ... } đi tại gặp cái đoạn css mặc định bên site bác nên nó lung tung như vậy.
lúc 19:51 30 tháng 3, 2015
sao mình làm và test thử nhưng ko nhận được thư nào là sao nhỉ
lúc 20:28 30 tháng 3, 2015
Đôi khi một số blog cũng không chạy và hỏi mình thì mình cũng không chắc tại sao nữa, mình có thử nhiều nhưng vẫn chưa gặp. Thôi thì bạn có thể xem thử qua thủ thuật này sao nhé, đáp ứng đầy đủ về một trang liên hệ có thể thêm hoặc bớt form nữa. http://www.kslzone.net/2014/09/tao-form-lien-he-voi-google-drive.html
lúc 09:38 4 tháng 9, 2015
Thanks ad nhiều
lúc 18:15 23 tháng 10, 2016
Mình làm được rồi nhé, cảm ơn bạn!
Mọi người có thẻ ghé qua nhà mình nhé. www.dangmylinh.com