Cách thiết lập Trang liên hệ trong Giao diện Median UI v1.6

Nguồn: jagodesain.com

Làm theo hướng dẫn bên dưới để dễ dàng thêm trang liên hệ của chúng tôi vào mẫu Giao diện người dùng trung bình.

Sự chuẩn bị

Điều đầu tiên bạn phải làm là lấy mã ID blog của bạn, nó rất dễ dàng trên trang blogger, nhìn vào thanh địa chỉ, sau đó bạn sẽ tìm thấy một liên kết ví dụ như hình dưới đây;

https://www.blogger.com/blog/themes/1234567890000000000

phần được đánh dấu là mã id blog của bạn, vui lòng sao chép nó vì mã này sẽ cần thiết khi tạo trang liên hệ của chúng tôi

Hướng dẫn

1. Hãy tạo một trang mới, đừng quên điền vào mô tả tìm kiếm trên trang mới của bạn
2. Chuyển sang chế độ HTML, sau đó sao chép và dán mã bên dưới vào nội dung trang của bạn:

   <div class='ContactForm' id='ContactForm1'>
     <form name='contact-form'>
       <div class='input-area'>
         <label for='ContactForm1_contact-form-name'>Your name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
       <div class='input-area'>
         <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
       <div class='input-area'>
         <label for='ContactForm1_contact-form-email-message'>Message<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
       <div class='input-area'>
         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' /></div>
       <div class='notif-area'>
         <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
         <p class='contact-form-success-message' 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[
   if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1234567890000000000','//www.newtricks.online/','1234567890000000000');
   _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': '1234567890000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

   Thay đổi phần được đánh dấu trong mã ở trên bằng id blog của bạn, có ít nhất ba mã giống nhau mà bạn phải thay đổi thành id blog của mình

   Thông tin:

   • [1234567890000000000] : Id blog của bạn, có 4 lần viết mã trên
   • [www.newtricks.online] : Địa chỉ blog của bạn (không có http/https)
   • [Your Name, Email, Message] : Nhập tiêu đề vào biểu mẫu liên hệ
   • [Message] : Văn bản trên nút gửi
   • [Sending ...] : Văn bản khi gửi tin nhắn
   • [Your message has been sent.] : Đã gửi văn bản thông báo tin nhắn
   • [Cannot send message. Please try again later. ] : Văn bản thông báo tin nhắn không được gửi
   • [A valid email address is required. ] : Văn bản thông báo qua email không hợp lệ
   • [A Message field cannot be empty. ] : Thông báo bằng văn bản khi nội dung thư trống
3. Xuất bản trang của bạn và vui lòng kiểm tra xem tiện ích liên hệ có thành công hay không

Nếu được triển khai đúng cách, chẳng hạn như thêm id blog của bạn vào tất cả các phần được đánh dấu, sẽ không có lỗi.

Sự cố nút gửi không hoạt động

Chúng tôi không biết về vấn đề này cho đến khi một người dùng báo cáo sự cố này, sau khi chúng tôi kiểm tra thì hóa ra nguyên nhân của nút Submit bị trục trặc trên tiện ích ContactForm là do tập lệnh ToC trên một trang tĩnh:

<script>medianTOC();</script>