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ử.

Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot

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

7 bình luận

  1. avatar says

    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/

  2. avatar says

    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 ý

  3. avatar says

    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.

  4. avatar says

    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ỉ

  5. avatar says

    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

  6. avatar says

    lúc 09:38 4 tháng 9, 2015

    Thanks ad nhiều

  7. avatar says

    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

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.