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