Tạo Biểu Mẫu Liên Hệ Cho Blogspot

Tạo Biểu Mẫu Liên Hệ Cho Blogspot

Để 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/AVvXsEhydJFG3bEZKDQsiSMlX9aEV0UD0gJvkWFcZ4b-U_v_czMIA79glJ-16Cb0jQu2VkA3O3LeyIo_pUeI3ZDWAOVh0cuwxaY77dAeVwxdQF6cy8VExRr4-yQ0z2FLrl17HJDY4dQ0PgAe_s4/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/AVvXsEhwVv8YIAG2MnWYzV7yZti5ID1mDs5VNMdFBVRsiSCfG3yftMC5azLDAUzx3Q9VxfWzXa380Dn7c_4sS4mjuvWF1aVrchvWUfeYwmtUZccZfXW4N4jKbWKd6wctEbZyteZyAidbaYuyX7Q/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/AVvXsEh2FXW56HRvzEoapQ1KbNzrdLx0P7C1M1oOvXY0k8W5H_xTiW_P_cH92SH2If_DJ6l6TGhOZN5Tk2t2OSM0kyhoC73jhViqJWj1vz14w60bZCt72ULMzrVnbLN9jXSF23uiSqPZ7vN-vk8/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>

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