Hướng dẫn tạo trang liên hệ trong Blogger

(iCOM) Một website thông thường khi mới khởi tạo, mặc định có 3 trang là Home (Trang chủ), About (Giới thiệu) và Contact (Liên hệ). Nếu như Home và About tạo ra rất dễ dàng và chỉ cần gắn link là xong, thì việc xây dựng trang Contact với biểu mẫu đầy đủ - lại không phải là đơn giản trong Blogger. Ở bài viết này, tôi sẽ hướng dẫn bạn cách giải quyết vấn đề đó.

Bước 1: Đăng nhập vào Blogger » Bố cục » Thêm tiện ích

Tại của số của thêm tiện ích, các bạn nhìn sang menu bên trái, chọn vào tab Tiện ích Khác. Sau khi chọn vào tab đó bạn sẽ thấy tiện ích Biểu mẫu liên hệ, chọn và thêm nó vào blog của bạn.

Bước 2: Chúng ta sẽ làm ẩn đi tiên ích Biểu mẫu liên hệ đó (nếu bạn muốn giữ nguyên form Liên hệ này ở cột tiện ích mà không muốn ẩn đi, thì có thể bỏ qua bước này).

Vào trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML

Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên dòng đó:

.ContactForm {
  display: none;
}

* Tips: Để có 1 khung biểu mẫu đỡ đơn điệu, bạn có thể chèn thêm đoạn code sau trên thẻ ]]></b:skin>

/* Contact Form Container */
.contact-form-widget {
width: 600px;
max-width: 90%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Nhấn nút Lưu mẫu.

Bước 3: Chúng ta sẽ tạo một trang liên hệ bằng trang tĩnh tại blog của chúng ta. 

Tại trang tổng quan bạn chọn vào Trang » Trang mới. Tại phần nội dung của trang mới, bạn chuyển sang soạn thảo bằng HTML và thêm đoạn mã này vào:

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Họ Tên của bạn
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Lời nhắn *
<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="Submit" />
<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>

Nhấn nút Xuất bản.

Như vậy là chúng ta đã có 1 trang Liên hệ với form đơn giản để giao tiếp với khách hàng. Những nội dung mà khách hàng nhắn với chúng ta qua form này sẽ được chuyển đến email mà ta đăng ký. Một cách tiện lợi và nhanh chóng để giao tiếp cùng độc giả. Chúc các bạn thành công.

- Nguyễn Quốc Chiến,

Chuyên gia Tư vấn, Đào tạo

Nguồn: kslzone.net