Form liên hệ là phần cần thiết trong website và năm vừa rồi google hỗ trợ thêm tính năng add widget contact form vào template nhưng khó tùy ...
Form liên hệ là phần cần thiết trong website và năm vừa rồi google hỗ trợ thêm tính năng add widget contact form vào template nhưng khó tùy biến thêm vào trang tĩnh nên bài viết này sẻ giúp bạn thêm form liên hệ ở trang tĩnh của blogspot.
Biểu mẫu liên hệ/ Contact Form được tạo ra mặc định thường nằm ở cột Sitebar hoặc là Footer, đó là đều bất tiện trong việc bố trí giao diện đặc biệt hơn nó không thể hiện tính chuyên nghiệp của một blogger.
Biểu mẫu liên hệ Contact vào một trang cố định cho web/Blogspot thành công 100%
Tạo một trang liên hệ trên Blogger thì có rất nhiều cách nhưng nó chỉ đơn giản đối với những người đã thành thành thạo Blogger, nhưng nó lại là một công việc khó chịu khi thêm mẫu liên hệ trong blogger đối với người mới.
Blogger mặc định chỉ cung cấp một Mẫu liên hệ bên widget (phía bên blog) để làm hình thức liên lạc của bạn, do đó bạn cần một số kỹ thuật để biến nó thành trang liên hệ cho blog.
Hôm nay ngocanhblog.com sẽ giới thiệu cho bạn một biểu mẫu đẹp để cho bạn chèn vào blog mà ngocanhblog đã thực hiện thành công 100%.
Đây là một tiện ích thủ thuật blog cực kỳ hay, tạo sự chuyên nghiệp cho blog của bạn ngay từ cái nhìn đầu tiên. Bắt đầu thực hiện đi nhé!
Tạo ra một biểu mẫu liên hệ/ Contact Form
Bước 1: Blog => Bố cục => Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ => Lưu lạiBước 2: Tới Mẫu => Chỉnh sửa HTML => Nhấn tổ hợp Ctrl + F và tìm kiếm ]]></b:skin> và chèn đoạn mã CSS sau đây ở trên ]]></b:skin>. Sau đó Lưu lại. (Bước này thực hiện nhằm ẩn Biểu mẫu liên hệ mặc định của blogger tạo ra)
#ContactForm1{Bước 3: Cũng làm tượng tự Blog => Trang => Trang mới => HTML => Và copy đoạn mã code dưới đây vào trong HTML => Xuất bản!
display: none ! important;
}
<span style="color: red; font-size: x-large;">Liên hệ với blog NgocAnhBlog</span><br />( Thay đổi NgocAnhBlog tùy ý bạn )
<form name="contact-form">
<b>Tên của bạn</b><br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="60" type="text" value="">
<br><br>
<b>Email của bạn</b><br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="60" type="text" value="">
<br><br>
<b>Câu hỏi hoặc góp ý</b><br>
<textarea class="contact-form-email-message" cols="50" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br>
<br>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gởi cho NgocAnhBlog">
<br>
<div style="font-size: 16px; text-align: center;">
<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ước 4: Bạn cũng vào Blog => Mẫu = > Chỉnh sữa HTML. Nhấn tổ hợp Ctrl + F và tìm kiếm ]]></b:skin> và chèn đoạn mã CSS sau đây ở trên ]]></b:skin>. Sau đó Lưu lại là xong!
/* CUSTOM CONTACT FORM BY NGOCANHBLOG */- 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 ở trên để trang trí cho nó thêm đẹp hơn trong mẫu của bạn
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}
.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 900px; /* CHANGE WIDTH OF FORM ENTRIES */ }
.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%; /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}
.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}
.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}
.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px;
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center;
}
/* END CUSTOM CONTACT FORM BY XOMISSE */
/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}
.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }
.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE; /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333; /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%; /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}
.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666; /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF; /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}
.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}
.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666; /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px;
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center;
}
/* END CUSTOM CONTACT FORM BY NGOCANHBLOG */
- Biểu mẫu trong Blog chỉ chứa 3 mục Tên, Địa chỉ email liên hệ và Nội dung, có một số bạn lại thêm Tiêu đề hay Số điện thoại liên các mục này sẽ không gửi đi được đâu thêm vô cũng bằng thừa trừ khi bạn có Hosting riêng.
- Các Biểu mẫu liên hệ trên đều có đoạn CSS riêng nên bạn có thể sửa đổi theo ý muốn của bạn (sẽ không ảnh hưởng CSS trong template của bạn).
- 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!
Xem thêm : Tạo trang sitemap người dùng cho blog/web đẹp chuẩn seo
Chia sẻ:
Nhận cập nhật các bài viết mới của Ngocanhblog
Mẹo nhỏ khi bình luận