Trên thực tế, trang liên hệ không nhất thiết phải có trong blogspot, nhất là blog cá nhân. Tuy nhiên, theo quan điểm của mình thì trang liên hệ đóng vai trò khá quan trọng trong việc duy trì mối liên hệ giữa người đọc với quản trị viên theo đúng nghĩa đen “hợp tác, cùng phát triển”. Hơn nữa, việc xây dưng trang liên hệ trên blogspot cũng tương đối đơn giản , ngoáy vài thao tác, đi vài đường cơ bản là xong, vậy tội gì không làm nhỉ ? :)
So với mã nguồn wordpress, nền tảng blogger phải chịu thiệt thòi hơn hẳn khi không được hỗ trợ sẵn trang liên hệ. Hầu hết blogger khi tiến hành tạo mới trang liên hệ đều phải tự tay thực hiện từ A đến Z.
Để các bạn có thể nắm được trọn vẹn nội dung của bài viết, mình sẽ hướng dẫn cực kỳ cụ thể kèm theo giải thích luôn trong từng bước. Có thể bài viết hơi loằng ngoằng nhưng đảm bảo là việ tạo trang liên hệ 100% thành công nhé, không đúng không viết blog nữa :))
Giai đoạn 1: Tạo mới biểu mẫu lên hệ cho blogspot (blogspot contact form)
Với giai đoạn này, chúng ta sẽ phải sử dụng đến widget – các tiện ích có sẵn được cung cấp bởi blogger.
Lưu ý thêm : biểu mẫu liên hệ khác hẳn với trang liên hệ đấy nhé ! Biểu mẫu liên hệ thường được sắp xếp trong bố cục của trang liên hệ và chúng ta cũng có thể tách riêng chúng ra nếu muốn.
Bước 1 : Ở trang tổng quan của blogspot, tại thanh menu trái,chọn Bố cục ⇒ Thêm tiện ích để truy cập kho tiện ích.
Bước 2 : Theo mặc định, hệ thống blogger sẽ đưa chúng ta truy cập vào tab đầu tiên – Tiện ích Cơ bản. Tuy nhiên, với yêu cầu tạo mới biểu mẫu liện hệ cho blogspot thì chúng ta phải sử dụng đến tab thứ 2 – Tiện ích khác.
Khá dễ dàng đế thấy ngay tiện ích “Biểu mẫu liên hệ” ở phần đầu tiên , nhấn vào biểu tượng “+” màu xanhđể lựa chọn nhé.
Bước 3 : Đặt tiêu đề rồi nhấn Lưu để hoàn tất quá trình tạo mới biểu mẫu liên hệ trên blogspot
Bước 4 : F5 và kiểm tra lại giao diện của blogspot. Nhìn chung, thiết kế mặc định của biểu mẫu liên hệ tương đối đơn giản, thân thiện.
Nếu muốn thay đổi một chút để giao diện nhìn đẹp hơn, hãy thực hiện như sau :
1. Quay trở lại trang tổng quan blogspot, bên menu trái chọn Mẫu ⇒ Chỉnh sửa HTML.
2. Nhấn tổ hợp phím Ctrl + F để bật tính năng tìm kiếm trực tiếp ngay trên blogspot.
– Tìm đến thẻ <b:skin><
Bước 2 : Chuyển chế độ soạn thảo từ định dạng văn bản thông thường sang định dạng HTML (góc trên bên trái màn hình). Sau đó dán vào nội dung soạn thảo đoạn mã sau :
<div class=”contact-form-widget”>
<div class=”form” style=”width: 400px;”>
<form name=”contact-form”>
Họ tên
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”” />
E-mail người gửi *
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”” />
Nội dung câu hỏi *
<textarea
class=”contact-form-email-message” cols=”25″
id=”ContactForm1_contact-form-email-message” name=”email-message”
rows=”5″></textarea>
<input class=”contact-form-button
contact-form-button-submit” id=”ContactForm1_contact-form-submit”
type=”button” value=”Gửi thư” />
<br />
Chú ý : trường có dấu * là bắt buộc.
<br />
<div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”>
</div>
<div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”>
</div>
</form>
</div>
</div>
Bước 3 : Nhấn Xuất bản để đăng mới trang liên hệ trên blogspot.
Bước 4 : Theo quy định thì mỗi nền tảng blogger chỉ được hỗ trợ tối đa 1 biểu mẫu liên hệ. Nếu bạn tạo thêm và sử dụng cùng lúc 2 biểu mẫu khác nhau thì chỉ có duy nhất 1 cái hoạt động được.
Do đó, khi chúng ta tạo mới 1 biểu mẫu liên hệ và đặt nó nằm trong trang liên hệ ở giai đoạn 2 thì biểu mẫu đã tạo ở giai đoạn 1 sẽ không hoạt động được nữa và phải bị ẩn đi ở bước 5 + bước 6.
Bước 5 : Quay trở lại trang tổng quan blogspot, trên menu trái chọn Mẫu ⇒chỉnh sửa HTML
Trên thanh menu ngang, chọn tiếp Chuyển đến tiện ích ⇒ContactForm1rồi thay thế toàn bộ nội dung của cặp thẻ <b:widget …></b:widget> hiện tại bằng đoạn mã sau :
<b:widget id=’ContactForm1′ locked=’false’ title=’Liên hệ’ type=’ContactForm’>
<b:includable id=’main’>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>
Bước 6 : Sau bước 5, nội dung cũ trên biểu mẫu liên hệ 1 đã bị xóa bỏ hoàn toàn, tuy nhiên tiện ích vẫn còn tồn tại trong giao diện blogspot. Để ẩn tiện ích này, nhấn ổ hợp phím Ctrl + F , tìm đến thẻ <b:skin><
