Tạo biểu mẫu liên hệ - Contact Form mới nhất cho Blogspot Blogger

 Biểu mẫu liên hệ/ Contact Form là một khung liên hệ, dành cho người dùng khi truy cập website nhằm mục đích liên hệ với quản trị viên website đó

Hôm nay Duy Anh - Media sẽ giới thiệu cho bạn một kiểu biểu mẫu đẹp mà mình đang sử dụng. Đây là một tiện ích thủ thuật blog cực kỳ hay, khi khách hàng gửi biểu mẫu lập tức sẽ được chuyển về email quản trị blog của bạn.

Cách tiến hành :

Bước 1 : Tạo 1 page - Chuyển sang chế độ HTML

Bước 2 : Dán code phía dưới vào - thay đổi chỗ bôi đỏ bằng ID blog của bạn rồi lưu Template lại nhé

<div><div>&nbsp; &nbsp;</div><div><style scoped="scoped" type="text/css">
.contact-form-box{width:50%;margin:20px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #000;color:black;border-radius:8px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #000;color:black;font-family:Arial, sans-serif;border-radius:8px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px ;border:1px solid #eb7d67;border-radius:7px;text-shadow:0px 1px 0px #de5135;} #ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px ;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}
@media screen and (max-width: 768px){ .contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style><div class="contact-form-box">
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Tên" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email"  placeholder= "Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Nội dung" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Gửi" /><br />
<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>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1550924285005316086';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1550924285005316086','//duyanhmedia.com/','1550924285005316086'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Đang gửi...', 'contactFormMessageSentMsg': 'Tin nhắn của bạn đã được gửi.', 'contactFormMessageNotSentMsg': 'Không thể gửi tin nhắn. Vui lòng thử lại sau...', 'contactFormInvalidEmailMsg': 'Nhập 1 địa chỉ email hợp lệ.', 'contactFormEmptyMessageMsg': 'Nội dung không được để trống.', 'title': 'Contact Form', 'blogId': '1550924285005316086', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script></div></div>