Biểu mẫu liên hệ con đường ngắn nhất giúp người truy cập và chủ sở hữu website trao đổi thông tin gắn kết với nhau. Nó cũng hữu ích để các webmaster thu thập email tạo nên một danh bạ tiện lợi cho việc quảng bá sản phẩm.
Nó còn giúp người sở hữu website đó hoàn thiện những thiếu xót mà họ trình bày bằng cách nhận thông báo của người xem. Ví dụ: lỗi sai chính tả trong bài viết :D, file download bị lỗi, một đường link bị hỏng...
Vì vậy. Trang liên hệ, Biểu mẫu liên hệ là vô cùng cực quan trọng dành cho một website nói chung hay Blogger nói riêng.
Thường thì mình thấy các blogger tạo biểu mẫu liên hệ từ cơ sở dữ liệu của một website khác. Như là : https://www.123formbuilder.com/contact-form-for-blogger.html
Sau đây mình sẽ chỉ bạn tạo một trang liên hệ "Contact Form" đúng chuẩn Blogspot. Gửi tin nhắn rất dễ dàng nhanh chóng tới chủ sở hữu website đó.
Cách tạo một trang liên hệ Blogspot.
1. Đăng nhập vào Blogger.com và đi tới phần Trang → tạo Trang Mới
2. Đặt tên Trang sau đó chuyển qua tab HTML và Sao chép đoạn mã code bên dưới đây Dán chúng vào, sau đó ấn Xuất bản
Code:
{codeBox} <form name="contact-form"> <div class="formcolumn1"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /></div> <div class="formcolumn2"> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /></div> <div class="formcolumn3"> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br /></div> <div class="formcolumn4"> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br /></div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <br /> <style scoped="" type="text/css"> #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduBAZJO8KkRdcHH3cf5g6FUazOLjtAYomd8jsadEJKTdjjUETKqxMsy-tODWQEGy_M8tGp4Y2oZb8wakne6YHX9Wd4ZMf8uNK2Y00_an6fUgKfBCwWn7u6lBgbNhNGA63XAEavsjCa7zY/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{float:left;width:50%} .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0} .formcolumn2{padding:0 0 0 10px} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style><br /> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br /> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '06731248849483653067';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d06731248849483653067','//longkool.com/','06731248849483653067'); _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': '06731248849483653067', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>
Chỉnh sửa những dòng tô màu nha:
Thay longkool.com bằng địa chỉ url blog của bạn. (và nhớ bỏ 3 chữ "www" trong url blog)
Thay 06731248849483653067 thành ID hồ sơ blog của bạn.
Cách lấy ID hồ sờ blog truy cập đường link : https://www.blogger.com/edit-profile.g cài đặt hồ sơ sau đó ấn Lưu hồ sơ - Save. Ấn tiếp vào Xem hồ sơ cập nhập và Sao chép ID hồ sơ blog trên thanh địa chỉ trình duyệt web. (như hình bên dưới)
Kết Quả:
Chúc các bạn thành công. Còn rất nhiều Style biểu mẫu liên hệ khác, có thời gian mình lại đi lượm lặt về chia sẻ :D
Tags:
Blogger Tutorials