Lập một form góp ý cho blog (Blogger)

Thông thường các website họ tạo trang liên hệ để người dùng trao đổi công việc gì đó hay liên hệ việc cần thiết. Đối với blog có tính chuyên nghiệp hoặc thiên về một lĩnh vực nào đó mới tạo trang liên hệ để người dùng trao đổi với họ.

Cấu hình file robots.txt cho Blogger

Thiết nghĩ một blog nhỏ chút xíu như tôi đây chẳng có gì liên hệ cả! Theo tôi, nên thay mục liên hệ bằng tiêu đề “góp ý” thì hay hơn. Bởi vì, hành trình chúng ta đang đi sẽ gặp nhiều khó khăn phía trước, đi để học tập... làm sao tránh khỏi sai lầm và thiếu sót. Bản thân tôi thiết kế cái giao diện blog chưa xong, bài viết thì lủng củng nên để người dùng nhận xét, phê bình qua mục góp ý của mình, có như vậy mình mới cầu tiến được.

Nói như vậy có thừa không? Dẫu rằng dưới mỗi bài viết có phần comments, người dùng có khả năng đánh giá, nhận xét hay góp ý ở đó. Vậy, tạo thêm mục góp ý để làm gì? Câu này tôi chịu!..  Nói ra các bạn cảm thông, nhưng đó cũng một ý hay, nên sau khi dạo quanh một vòng trên internet tôi quyết định viết bài này.

Cách tạo form góp ý/liên hệ cho website/blog thì có nhiều kiểu, biểu mẫu phong phú và đa dạng (các bạn có khả năng tham khảo các bài viết tạo form liên hệ để so sánh), nhưng form góp ý tôi làm cho blog này cũng khá hay, bạn xem demo tại đây. 

Có hai cách để đặt form góp ý trên trang blog.

1 Đặt form góp ý trên trang chủ và bất kỳ trang nào.

Đăng nhập Blogger => Bố cục => Thêm tiện ích => Chọn HTML/Javascript, đặt Tiêu đề là Góp ý và bạn dán đoạn code phía dưới vào, bấm Lưu. 

2 Đặt form góp ý vào một mục riêng biệt.

Đăng nhập Blogger => Trang => Trang mới. Đặt tiêu đề trang là Góp ý, bên phải có phần Mô tả tìm kiếm, bạn nhập vài từ khóa thích hợp hay một đoạn mô tả ngắn.

Trong chế độ Viết, bạn có khả năng soạn thảo một đoạn văn ngắn, nếu lười thì bê nguyên đoạn văn sau của tôi vào cũng được, không sao cả. "Vietinet tiếp thu, ghi nhận mọi ý kiến đánh giá, nhận xét, phê bình của bạn trên tinh thần đóng góp và xây dựng để chúng tôi hoàn thiện blog ngày càng tốt hơn. Xin trân trọng cám ơn.". Sau đó bạn chuyển sang chế độ HTML và dán đoạn code phía dưới vào, cuối cùng bấm Xuất bản.

Sau khi xuất bản bạn bấm nút xem để xem trang góp ý của mình, đồng thời copy đường link trên thanh địa chỉ đặt vào một vị trí nào đó trong blog mà bạn ưng ý. Nếu muốn hiển thị danh sách các trang độc lập trên blog, bạn xem thêm ở cuối bài viết này.

Đoạn code:

<style scoped="scoped" type="text/css">

.contact-form-box{width:50%;margin:20px auto;padding:0;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}

#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}

#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;} #ContactForm1_contact-form-submit:hover {background-color:#f5785f;}

#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}

#ContactForm1_contact-form-submit:focus{outline:none}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}

@media screen and (max-width: 768px){ .contact-form-box{width:100%;}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}

}

@media screen and (max-width: 480px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}

}

</style>

<br />

<div class="contact-form-box">

<form name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Tên của bạn" size="30" type="text" value="" /><br />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Địa chỉ Email" size="30" type="text" value="" /><br />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Nhập ý kiến của bạn…" rows="5"></textarea><br />

<input id="ContactForm1_contact-form-submit" type="button" value="Gửi" /><br />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

<script type="text/javascript">

//<![CDATA[

if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');

//]]>

</script>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6589001665501126375';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6589001665501126375','//www.kompiajaib.com/','6589001665501126375'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Đang gửi...', 'contactFormMessageSentMsg': 'Ý kiến của bạn đã được gửi.', 'contactFormMessageNotSentMsg': 'Ý kiến không thể gửi được. Vui lòng thử lại.', 'contactFormInvalidEmailMsg': 'Địa chỉ email không hợp lệ.', 'contactFormEmptyMessageMsg': 'Không thể để trống trường ý kiến.', 'title': 'Contact Form', 'blogId': '6589001665501126375', 'contactFormNameMsg': 'Tên của bạn', 'contactFormEmailMsg': 'Địa chỉ Email', 'contactFormMessageMsg': 'Nhập ý kiến của bạn…', 'contactFormSendMsg': 'Gửi', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

Đoạn code trên tôi đã chỉnh sang tiếng Việt, khi người dùng nhập thông tin vào form góp ý, nếu nhập địa chỉ email không đúng thì phía dưới form sẽ xuất hiện dòng chữ: Địa chỉ email không hợp lệ. Không nhập ý kiến, dưới form sẽ báo: Không thể để trống trường ý kiến. Nếu nhập thông tin đầy đủ rồi bấm gửi, dòng chữ Đang gửi sẽ xuất hiện, sau đó là dòng: Ý kiến của bạn đã được gửi. Vì một lý do nào đó không gửi được, dưới form cũng hiện: Ý kiến không thể gửi được. Vui lòng thử lại.

Bạn thay ID 6589001665501126375 thành ID của bạn. Bạn đăng nhập vào Bảng điều khiển, nhìn lên thanh địa chỉ trình duyệt có dãy số, đó chính là blogID của bạn.

Bạn có khả năng tùy biến form này thành form liên hệ cũng được nếu bạn không thích, chỉ cần thay chữ "ý kiến" thành chữ "tin nhắn".

Tạo biểu mẫu trả lời thư tự động khi người dùng góp ý.

Để người dùng nhận được thư trả lời nhanh nhất khi họ góp ý cho bạn, bạn làm như sau:

  

Đăng nhập tài khoản Gmail => Cài đặt => Chung => Kéo xuống chọn Tự động trả lời thư => Chọn Bật tự động trả lời thư.

Trong ô Chủ đề bạn nhập: Thư trả lời góp ý.

Trong ô Thư bạn nhập: Cám ơn bạn! Ý kiến của bạn đã được ghi nhận. Chúng tôi sẽ phản hồi sớm nhất có khả năng.

Bấm Lưu thay đổi.

Cái này có một bất tiện là tất cả thư gửi đến đều nhận tin nhắn này. Không sao? Cần thiết thì bạn tạo một tài khoản Google khác để liên lạc với bạn bè và người thân. Bạn nào có cách gì hay hơn xin góp ý.

Quản lý hộp thư góp ý trong Gmail.

Mỗi ngày địa chỉ email của bạn có khả năng nhận rất nhiều thư, bạn không phân biệt được thư nào là thư góp ý của người dùng, do vậy bạn cần thiết tạo một Nhãn Góp ý để tiện việc quản lý số thư này. Thư gửi qua form góp ý trên blog thường có dạng như sau:

Để tất cả thư góp ý nằm trong Nhãn này, bạn cần làm thêm một thủ tục nữa, bạn mở thư góp ý ra, nhấn vào Nhãn (phía trên), chọn Góp ý. Như vậy, tất cả thư góp ý gửi đến bạn sẽ nằm trong Nhãn này và sẽ xuất hiện thêm chữ Góp ý bên cạnh.

Tạo trang độc lập trên blog của bạn.

Đăng nhập Blogger => Bố cục => Thêm tiện ích => Kéo xuống chọn Trang => Chọn Thêm liên kết bên ngoài. 

Chú ý: Mục Tiêu đề (tùy chọn) có khả năng bỏ trống hoặc thêm câu gì đó tùy bạn. Bỏ dấu Trang chủ nếu không muốn nó hiển thị.

Tiếp theo bạn nhập Tiêu đề trang là Góp ý và dán link trang góp ý của bạn vào ô Địa chỉ web (URL), bấm Lưu liên kết.

Ngoài ra các bạn muốn đặt form góp ý vào một nơi nào đó mình thấy hợp lý nhưng thực hiện không được, bạn liên hệ với tôi qua form góp ý hoặc comments phía dưới, tôi sẽ giúp bạn.