Tạo Biểu Mẫu Liên Hệ Cực Đẹp Cho Blogspot

Xin chào các bạn, hôm nay mình xin hướng dẫn các bạn tạo biểu mẫu liên hệ cực đẹp cho blogspot. Không dài dòng nữa, chúng ta cùng bắt đầu thôi! 😉

XEM DEMO

CÁC BƯỚC THỰC HIỆN

Bước 1: Các bạn đăng nhập Blogger Trang Trang mới.

Bước 2: Đặt tên cho trang đó theo ý thích của bạn. (Ví dụ: Biểu mẫu liên hệ, Contact Form, liên hệ Admin,...)

Bước 3: Các bạn dán đoạn code này vào trang các bạn vừa mới tạo.

<form name="contact-form">
Name<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
Email Address <span class="wajib">*</span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
Nội dung <span class="wajib">*</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="GỬI NGAY CHO ADMIN!" /><br />
<div class="formb">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<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'] = '1577355985338976579';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1577355985338976579','//thaitinh-it.tk/','1577355985338976579');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1577355985338976579', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<style type="text/css">
#ContactForm1{display:none}a.showcontent{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #ddd;transition:all 0.5s ease-in-out;box-shadow:none;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none; border-color: rgba(81,203,238,1);box-shadow: 0 0 5px rgba(81,203,238,0.7)!important;color:#444;background:#fff;}
#ContactForm1_contact-form-submit {font-family:Open Sans Condensed, sans-serif;float:left;border-radius:3px;
background:#07ACEC;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;
padding:5px 10px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.4s ease-out;}
#ContactForm1_contact-form-submit:hover {background:#444;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}.formb{max-width:22px;text-align:center;width:100%}.wajib{color:red;font-weight:bold}
</style>

Bước 4: Lưu lại và hưởng thụ thành quả thôi :))

LỜI KẾT

Bên trên là các bước để tạo biểu mẫu liên hệ cực đẹp cho blogspot rồi. Nếu thấy bài viết bổ ích đừng quên cho mình 1 share & 1 comment nhé. Nếu bạn nào không làm được thì đừng ngần ngại comment xuống phía dưới để mình hỗ trợ nha. Chúc các bạn thành công và đừng quên truy cập Blog để xem thêm nhiều bài viết hay hơn nữa nhé! 😊😋😆