Tạo biểu mẫu liên hệ Contact Form nổi bật cho Blogspot

[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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz27Nd_yEcZvUT2aQx_tRpbstouZJdIKQD9IP8RDfUZk1iaFMRx4dxRc0deESpeRLPbdiFBXx3DFBZpX4uAgf-HTVLW2ks_i6ENH771uWwJgqQCLtp6WMy1fHddxnlF0RcXiac4pq8IWI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihU5XKX5JpoRpPqIW_O_EIE8dIHI7C1y5hWBqMrbgABNdpaRmbmF_eNPIP99MHtf0WYbcMCbZILmF1zuaW_5X0PLibrIWKiNwQy51MYh6mzksjX_Yf0zqXlrTCPA7ycFPQWqdRmZi_Yq4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1KpUymwNsgMNnG9m6B8745aLiPZgC1ADotWu3NyhK8uA23T0u9-DGYq6M2DKmllfb3eAE5WWc2xZc1qdCfPo8tSgIDretUpT5oWQLMoJ96lmXZD_5DZ2T0CVvZQn51rovl4n6CK8DbU/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!

Terocket.com