Chèn biểu mẫu liên hệ vào một trang cố định của Blogspot

Biểu mẫu liên hệ đã trở thành một tiện ích không thể thiếu đối với một trang web hay blog cá nhân. Đối với blogger, từ giữa năm 2013 thì Google đã chính thức tích hợp tiện ích Contact Form vào Blogspot, vì vậy việc thêm tiện ích này vào blog của bạn không có gì là khó khăn nữa.
Tuy vậy, tùy vào nhu cầu cá nhân mà bạn không muốn Biểu mẫu liên hệ xuất hiện trên sidebar hay footer mà chỉ muốn nó xuất hiện tại một trang cố định riêng lẽ độc lập. Vì thế, trong bài viết này mình sẽ hướng dẫn các bạn chèn Biễu mẫu liên hệ vào một trang riêng biệt cho blogspot (ở đây ta sẻ chèn nó vào trang tĩnh)

Chèn Biễu mẫu liên hệ vào trang tĩnh (Static Pages) của Blogspot

Để thêm Biểu mẫu liên hệ (Contact Form) vào blogspot của bạn, trước tiên đăng nhập vào blogger >> đến Bố cục và chọn Thêm Tiện ích trong cửa sổ mới hiện lên, bạn chọn tab Tiện ích khác >> Biểu mẫu liên hệ và Lưu lại.

- Trở lại trang chủ bạn sẽ thấy Biểu mẫu liên hệ xuất hiện tại vị trí bạn thêm tiện ích
- Tiếp theo, vào Mẫu >> Chỉnh sửa HTML tìm ContactForm1 (Nhấn tổ hợp phím Ctrl + F để tìm)
và xóa đi các mã trong <b:includable id='main'> ..xóa mã ở đây.. </b:includable> tương tự như hình dưới

- Bước kế tiếp, tạo một Trang mới. Tại trang tổng quan blogspot vào Trang >> Trang mới. Tại phần nội dung của trang mới, bạn chuyển sang tab soạn thảo HTML và thêm đoạn mã phía dưới 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>

- Xuất bản trang và xem kết quả.
- Về mặt thẩm mỹ thì biểu mẫu liên hệ vẩn chưa đẹp mắt, bạn có thể sử dụng đoạn CSS dưới đây để trang trí cho nó thêm đẹp hơn bằng cách thêm nó vào trước ]]></b:skin> hoặc </style> trong mẫu của bạn

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

/* 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;
}

Hy vọng với hướng dẫn này sẻ giúp bạn có được một trang liên hệ cá nhân mang phong cách riêng. Chúc thành công!