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

Xin chào mọi người, hôm nay mình rảnh và cũng chả bận gì nhiều nên muốn đăng bài này chia sẻ cho các bạn một cách tạo biểu mẫu liên hệ cực đẹp cho blogspot của các bạn !

Demo

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

Bước 1: Các bạn đăng nhập Blogger Tạo 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. (HTML)

<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 tôi"/><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'] = '94525206769855746';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d94525206769855746','//baoshady.blogspot.com/','94525206769855746');

_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': '94525206769855746', '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 ( Xuất Bản )
- Dưới đây là hình ảnh minh họa của mình nhé ! 
- Có nhiều bạn cũng thắc mắc là nó sẽ gửi tin nhắn đó về đâu ?
- Sau khi khách truy cập website bạn liên hệ mẫu này thì tin nhắn đó sẽ về thư của Quản Trị Viên Blogger nhé !

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ại comment xuống phía dưới để mình hỗ trợ nha.

Nguồn : Tính Getter

32

• Nhận liên kết

Hashtag: #Tất Cả #Thủ Thuật Blogger

Huỳnh Hoài Bảo

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!

Bài cùng chuyên mục