Thư viện

Trải nghiệm

Thứ Bảy, tháng 11 15, 2014

[Tips] - Tạo biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger V1

Hướng dẫn thủ thuật Tạo biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger V1 cực kỳ đẹp mắt cùng Terocket nào cả nhà ơi!

Chia sẻ:
[Tips] - Tạo biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger V1

Tiếp tục với chuỗi thủ thuật blog mà Terocket đang giới thiệu, hôm nay sẽ ra thủ thuật mới có tên là Biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger V1. Với phiên bản này, biểu mẫu liên hệ hay còn gọi là Biểu mẫu liên hệ / Contact Form sẽ trông nổi bật lên, bóng bẩy và cực kỳ hiện đại. Tạo điểm nhất rất tốt đến trải nghiệm người dùng, giúp họ bị gây chú ý và điền thông tin gửi ngay lập tức.

Live Demo

Để thực hiện thủ thuật Biểu mẫu liên hệ / Contact Form V1 này cho blogger blogspot rất đơn giản, các bạn chỉ cần làm theo vài bước ở dưới đây, bạn sẽ tạo được Biểu mẫu liên hệ / Contact Form cự kỳ hiện đại.

Bước 1 - Tạo một widget Contact Form / Biểu mẫu liên hệ

Đầu tiên bạn vào Blogger.com → Blog Title → Layout → Add Widget → More Gadgets → Contact Form → Lưu lại.
Bước này cực kỳ đơn giản, chỉ cần click là tạo được

Bước 2 - Chèn CSS vào mẫu templates của bạn

Bạn cần tạo CSS cho Contact Form / Biểu mẫu liên hệ trong tiện ích này. Đầu tiên bạn cần vào Blog Title → Template → Edit HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm ]]></b:skin>. Và chèn đoạn mã CSS sau đây ở trên ]]></b:skin>. Sau đó Lưu lại là xong!

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Bước 3 - Đặt biểu mẫu liên hệ / Contact Form vào trong một trang cố định.

Ở bước này, bạn cần tạo một trang địa chỉ để đặt biểu mẫu liên hệ / Contact Form này. Ví dụ Terocket lấy địa chỉ là http://www.terocket.com/p/contact.html chẳng hạn. Để tạo được một trang như vậy, bạn cần vào Blogger -> Blog Title -> Trang -> Trang mới -> HTML -> Và copy đoạn mã code dưới đây vào trong HTML -> Xuất bản! Thế là xong!

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<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>
</div>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Vậy là đã xong tiện ích biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger V1 rồi. Đây là một tiện ích thủ thuật blog cực kỳ hay, tạo sự chuyên nghiệp cho blog của bạn ngay từ cái nhìn đầu tiên. Hãy thực hiện đi nhé!

Nếu thấy thủ thuật blog này hay, hãy share đến bạn bè các bạn nhé, nếu có chổ nào chưa hiểu, hãy gửi một bình luận ở dưới đây, Terocket sẽ giải đáp cho các bạn kịp thời nha!
Trứng Vịt - Terocket

20 nhận xét:

  1. Ồ bài này hay quá INRI Blogger
    Mình đã áp dụng và thành công rồi. Thanks
    Nhưng xin hỏi là thủ thật hay như vậy mà sao Terocket không áp dụng
    Và liệu nó có xảy ra lỗi hay xung đột với các đoạn mã khác trong tương lại hay không

    Trả lờiXóa
    Trả lời
    1. Chúc mừng bạn đã làm được nhé, :D Bên mình dùng thủ thuật khác bạn à :D

      Xóa
  2. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. mình tạo được form rồi, nhưng ấn Submit thì lại ko thấy gửi?
    bạn có thể chỉ mình ko ?
    http://danchungkhoan.blogspot.com/p/contact.html

    Trả lờiXóa
  5. Minh cũng làm nhưng không thấy gửi mong bạn giúp đỡ

    Trả lờiXóa
  6. tạo ra được rồi nhưng không Submit được :(

    Trả lờiXóa
  7. vào trong HTML ==> ctrl+F báo không tìm thấy

    Trả lờiXóa
  8. Cái này hơi phức tạp có thể dùng http://foxyform.com/ nhanh chóng hơn nhưng các bạn nên dùng chỗ post nhé tạo page nó bị lỗi

    mua khô mực ở sài gòn

    Trả lờiXóa
  9. mình thử rồi mà cái phần tin nhắn nó bị lệch, bạn xem hộ mình với.
    http://dothiminhhieu.blogspot.com/p/blog-page_45.html
    Mình cảm ơn trước nhé :D

    Trả lờiXóa
  10. sao mình việt hóa thì nó không chạy vậy bạn .mình muốn làm cho nó ẩn hiện cuối trang khi di chuột !

    Trả lờiXóa
  11. Cảm ơn ad, nhờ ad mà mình đã hoàn thành xong blog... Không biết là việc sao chép copy một số bài viết có bị ảnh hưởng gì đến blog hay không. Và việc đặt quảng cáo nhiều có hại gì không. Mình là người mới chơi blog. Tks
    http://chiase720.blogspot.com/

    Trả lờiXóa
  12. Quá ghiền luôn ,cám ơn ông admin

    Trả lờiXóa
  13. Chào Ad mình muốn làm một table có chứa các mục như liên hệ qua fecebook, skype, yahoo, zalo... có bạn nào biết không chỉ mình với, mình muốn áp dụng trên blog của mình là: http://datnenvietsingbinhduong.blogspot.com/ rất mong nhận được sự giúp đỡ từ các bạn.
    Trân trọng cảm ơn!

    Trả lờiXóa
  14. sao mình test nó không qua mail được bạn ơi, bạn xem giúp mình được không
    http://www.marinecitycualap.com/p/ang-ky-nhan-thong-tin-du-an.html

    Trả lờiXóa
  15. form liên hệ của mình không trỏ con chuột vào mấy cái ô ghi chữ đc :(

    Trả lờiXóa
  16. form liên hệ của mình không trỏ con chuột vào mấy cái ô ghi chữ đc :(

    Trả lờiXóa
  17. tào lao. làm cho có chứ có gửi được khỉ móc gi đaâu, toàn bừa bịp lẫn nhau!!! nản

    Trả lờiXóa