Hướng dẫn tạo contact form biểu mẫu liên hệ cho blogspot

Hướng dẫn tạo Contact Form biểu mẫu liên hệ cho Blogspot đơn giản và đẹp nhất được cung cấp từ blogger. Là một blogger bạn sẽ phải cần đến một trang liên hệ để cập nhật ý kiến phản hồi từ phía độc giả, trước đây chúng ta đều phải sử dụng dịch vụ của một bên thứ ba. Nay thì mọi thứ đơn giản hơn, bạn có thể nhận tin nhắn từ người đọc ngay trong email đang quản lí blog đó mà không cần cung cấp địa chỉ email ra bên ngoài.

Bloggger vừa bổ sung mẫu form liên hệ chính thức của riêng mình cho người dùng thông qua mộttiện ích mới có tên gọi Biểu mẫu liên hệ (Contact form). 

Bước 1: Đầu tiên để sử dụng form liên hệ này bạn chỉ cần đăng nhập Blogger > Bố cục > Thêm tiện ích > Tiện ích khác > Biểu mẫu liên hệ: (Xem hình minh họa bên dưới)

Click vào tab "Tiện ích khác"->"Thêm tiện ích biểu mẫu liên hệ"

Nhập vào tiêu đề là "Contactform", bấm 'Lưu' lại.

Bước 2: Giữ nguyên mẫu form liên hệ mà bạn vừa tạo lúc nãy và tiếp tục các bước để lôi form liên hệ cho blogspot ra trang page mà bạn muốn.

Nhấn Mẫu > Chỉnh sửa HTML để chỉnh sửa lại templates cho hợp lý:

Nhấn tổ hợp phím Control+F rồi nhập vào ô tìm kiếm từ khóa 'Contactform' sẽ hiện ra dòng như hình dưới, xóa hết đoạn code mặc định bên trong nó, như bạn nhìn thấy dưới đây, và sau đó Lưu mẫu.

Để điều chỉnh kích thước bạn cần chèn thêm đoạn CSS sau đây phía trên thẻ ]]></b:skin>

.contact-form-name,.contact-form-email {max-width: 200px;width: 100%;}
.contact-form-email-message {max-width: 500px;width: 100%;height: 200px;}

Bước 3: Tạo trang chứa form liên hệ trên blogspot/blogger

 Thêm trang mới:  Nhấn Trang > Trang mới > Trang trống để tạo. Nếu bạn đã có trang liên hệ rồi thì không cần tạo nữa...

Ghõ tiêu đề cho trang là 'Contact' hoặc 'Liên hệ', cố gắng để có một đường link page ok nhất đại loại như 'http://www.kieuquangtieu.com/p/contact.html'.

Chọn chế độ soạn HTML rồi dán đoạn code này vào chổ viết bài, bạn vào tùy chọn bên phải rồi tick vào "Không cho phép" việc này sẽ ẩn cái commet bên dưới trang đó vì trang liên hệ không cần comment:

<span style="background-color: white; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 27.9px; text-align: justify;"><span style="color: purple;"><b>Nếu có thắc mắc hay góp ý gì cho Blog các bạn có thể phẩn hồi về cho tôi theo mẫu dưới đây. Tôi sẽ trả lời ngay khi nhận được tin của bạn.</b></span></span> 

<form name="contact-form"><b><span style="color: blue;">Name*:</span></b><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<b><span style="color: blue;">Email*:</span></b><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<b><span style="color: blue;">Message*:</span></b><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="Send" /><div style="max-width: 222px; text-align: center; width: 100%;"><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></div></form>

Bạn có thể chuyển qua chế độ "Viết" để chỉnh sửa lại cho vừa ý, bạn có thể thay đổi những dòng màu  Blue theo sở thích, sau đó nhấn "Xuất bản".

Bước 4: Test xem form đã hoạt động chưa, khi bạn nhập dữ liệu vào form và nhấn nút SEND , mẫu tin nhắn sẽ được gửi đến email mà bạn đang đăng ký blogspot. Hãy test và xem kết quả nhé.

Chúc các bạn thành công!

www.kieuquangtieu.com