Blogspot: Tạo trang liên hệ cho Blogspot

Để tạo một trang liên hệ cho trang Blog của bạn thật đơn giản. Blogger đã bổ sung mẫu form liên hệ cho người dùng thông qua một tiện ích mới có tên gọi "Biểu mẫu liên hệ". Trước đây chúng ta đều phải sử dụng một dịch vụ khác từ nhà cung cấp thứ 3, và nay thì mọi thứ đơn giản hơn, bạn có thể nhận tin nhắn từ người gửi qua email trong tab "Xã hội" của Gmail.

Hướng dẫn tạo from liên hệ cho blogspot miễn phí

Bước 1: Tạo biểu mẫu liên hệ cơ bản bằng cách đăng nhập vào Blogger.com và chọn Bố cục, trong phần Layout bạn có thể tùy thích đặt Biểu mẫu liên hệ của bạn và chọn vào Thêm tiện ích

Bước 2: Chọn tab Tiện ích khác và kéo thanh trượt xuống chọn vào Biểu mẫu liên hệ

Các bạn có thể sửa lại tên nếu thích và cuối cùng là chọn Lưu và sau đó các bạn có thể thử Biểu mẫu liên hệ của các bạn.

Để tạo trang liên hệ mạng tính chuyên nghiệp hơn các bạn có thể sửa lại hay cài đặt thêm css cho biểu mẫu liên hệ của mình. Và giờ mình chỉ cho các bạn một cách làm khác là tạo trang liên hệ riêng biệt.

Bước 1: Các bạn chọn Mẫu \ Chỉnh sửa HTML, trong ô soạn thảo các bạn nhấn đồng thời hai phím Ctrl + F và tìm thẻ </footer> và Copy đoạn mã sau Paste vào như hình bên dưới

Code

<!-- Contact Us form --> <div class='hidden-contact' style='display:none;'> <b:section class='contact' id='contact' maxwidgets='1' showaddelement='no'> <b:widget id='ContactForm10' locked='true' title='Contact us' type='ContactForm'> <b:includable id='main'> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> </b:includable> </b:widget> </b:section> </div>

Sau khi dán xong các bạn đóng trình chỉnh sửa HTML lại và bắt đầu tạo trang liên hệ.

Bước 2: Để tạo trang liên hệ các bạn chọn Trang \ Trang mới, trong trình soạn thảo trang liên hệ các bạn chọn tab HTML và tải tập tin Contact Form về Copy đoạn mã trong tập tin Paste vào trang và Lưu lại

Sau khi các bạn đã làm các bước trên thì giao diện trang liên hệ của các bạn như hình sau

Phần 1: Hướng dẫn tạo Blog tin tức với giao diện chuyên nghiệp

Chúc các bạn thực hiện thành công trang liên hệ cho Blogspot của các bạn.