Tạo trang liên hệ cho Blog

Việc tạo trang liên hệ cho một blog cũng như ta xây một cây cầu liên kết độc giả đến bạn một cách nhanh nhất. Trong bài viết này mình sẽ hướng dẫn các bạn tạo một trang liên hệ trên blogspot.

Bước 1: Thêm "contact form widget" vào blog.

Thực tế blogspot đã có widget contact form dùng để làm việc này, tuy nhiên mục tiêu ta đang hướng đến là tạo riêng 1 trang liên hệ, Ta làm như sau:

1. Đăng nhập vào tài khoản blog của bạn và đi đến mục bố cục (layout).
2. Nhấp vào nút  “Thêm tiện ích” (Add a Gadget) và chọn tiếp “Tiện ích khác”(More Gadgets).
3. Giờ thì tìm “Mẫu liên hệ”(Contact form) và nhấp chọn nó.
4. Giờ bạn có thể thay đổi tên nếu muốn và sau đó nhấn lưu.

Bước 2: Ẩn "contact form widget".

Điều này có nghĩa là giờ ta sẽ làm cho widget này không hiển thị lên trên trang web của chúng ta, đơn giản chỉ là làm cho nó "vô hình" trên trình duyệt, lưu ý là nó vẫn ở đó nhưng vô hình nhé.

Giờ ta chọn qua "Mẫu" và chọn "chỉnh sửa HTML", tìm đến dòng ]]

 và thêm vào bên dưới đoạn code sau :

#ContactForm1
{
display: none ! important;
}

Đoạn css trên thực hiện công việc là làm vô hình nốt DOM có class mang tên là ContactForm1, đó cũng chính là class chứa nội dung của Contact form widget.

Bước 3: Tạo trang liên hệ.

1. Nhấn vào "Trang" bên menu tay trái và chọn tiếp "Trang mới".
2. Chọn qua chế độ soạn thảo HTML và đưa vào đoạn code sau :

<form name="contact-form">

<p></p>

Tên bạn:<br />

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />

<p></p>

Địa chỉ Email:

<span style="font-weight: bolder;color:red;">*</span><br />

<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />

<p></p>

Thông điệp: <span style="font-weight: bolder;color:red;">*</span><br />

<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>

<p></p>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />

<p></p>

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

<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>

Giờ thì bạn cần thay đổi đôi chổ thành nội dung mà bạn mong muốn. Đến đây, bạn nhấn Lưu trang là đã hoàn thành rồi. Tất nhiên bạn có thể thêm hoa lá cành cho đẹp!

Nếu bạn đã làm theo hướng dẫn của mình mà khi test thử không nhận được email, hay báo lỗi, hay bất cứ lý do gì  bạn có thể liên lạc mình tại trang liên hệ của mình hoặc comment vào dưới bài viết này, mình sẽ hồi đáp nhanh nhất có thể.

Chúc bạn một ngày vui vẻ.