Hế lô hê sờ li các bạn.Tiếp tục với các thủ thuật Blogspot mà Tin Tức 247 đang giới thiệu, hôm nay tui sẽ giới thiệu cho các bạn Biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger V1. Với phiên bản này, biểu mẫu liên hệ hay còn gọi là Biểu mẫu liên hệ / Contact Form sẽ trông nổi bật lên, bóng bẩy và cực kỳ hiện đại. Tạo điểm nhất rất tốt đến trải nghiệm người dùng, giúp họ bị gây chú ý và điền thông tin gửi ngay lập tức.
|
| Tạo biểu mẫu liên hệ / Contact Form nổi bật cho Blogspot Blogger |
Để 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.
Tạo một Page Contact Form / Biểu mẫu liên hệ
Bước 1: Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.
Bước 2: Trên Trang tổng quan Blogger, nhấp vào Trang .
Bước 4: Nhấp vào TRANG MỚI , bạn sẽ được chuyển qua phần HMTL -> copy đoạn iframe vào phần nội dung.
<p>Có một câu hỏi? Chúng tôi rất muốn nghe từ bạn. Gửi tin nhắn cho chúng tôi và chúng tôi sẽ trả lời sớm nhất có thể.</p>
<div class='ContactForm' id='ContactForm1'>
<form name='cForm'>
<div class='cArea'>
<label>
<input class='cInpt cName' id='ContactForm1_contact-form-name' name='name' type='text' />
<span class='n'>Name</span>
</label>
</div>
<div class='cArea'>
<label>
<input class='cInpt cMail' id='ContactForm1_contact-form-email' name='email' type='email' />
<span class='n req'>Email</span>
</label>
<span class='h'>Valid email required</span>
</div>
<div class='cArea'>
<label>
<textarea class='cInpt cMsg' id='ContactForm1_contact-form-email-message' name='message' rows='3'></textarea>
<span class='n req'>Message</span>
</label>
</div>
<div class='cArea'>
<input class='cBtn' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
</div>
<div class='tNtf alt'><p id='ContactForm1_contact-form-error-message'></p></div>
<div class='tNtf alt'><p id='ContactForm1_contact-form-success-message'></p></div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>
/*<![CDATA[*/
/* Contact Form Settings */
var contactSettings = {
'domain': blogUrl,
'blogId': blogID,
'contactFormMessageSendingMsg': '<span>Sending...</span>',
'contactFormMessageSentMsg': '<span><i class="check"></i>Your message has been sent.</span>',
'contactFormMessageNotSentMsg': '<span>Message could not be sent. Please try again later.</span>',
'contactFormInvalidEmailMsg': '<span><i class="warn"></i>A valid email address is required.</span>',
'contactFormEmptyMessageMsg': '<span><i class="warn"></i>Message field cannot be empty.</span>',
'title': 'Contact Form',
'contactFormNameMsg': 'Name',
'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message',
'contactFormSendMsg': 'Send',
'submitUrl': 'https://www.blogger.com/contact-form.do'
};
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
window['blogger_templates_experiment_id'] = "templatesV1";
window['blogger_blog_id'] = contactSettings['blogId'];
BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\\' + contactSettings['blogId'], contactSettings['domain'], contactSettings['blogId']);
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, getid('ContactForm1'), contactSettings, 'displayModeFull'));
var inputs = qSell('.widget input[type=text], .widget input[type=email], .widget textarea');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('input', function() {
var bg = this.value ? 'fl' : 'nfl';
this.setAttribute('data-text', bg);
});
}
/*]]>*/
</script>
Xuất bản/Lưu lại và dùng thôi
Lời kết
Vậy là tui đã hướng dẫn xong rồi.Nếu có thắc mắc gì hãy để lại bên dưới để được hỗ trợ nhé.
Tags:
Blogger
