Contact Form 7 là một plugin tạo form liên hệ rất phổ biến và hữu ích, tuy nhiên cách hiển thị form mặc định lại khá hạn chế. Bài viết này, Blog Công Nghệ 360 sẽ chia sẻ cách để các bạn tùy biến lại một chút cho Form sử dụng Contact Form 7 được bắt mắt hơn.
Đầu tiên, bạn vào danh sách form, tạo một form liên hệ mới hoặc sao chép từ form cũ. Sau đó, coppy đoạn mã html dưới đây, dán vào tab “Nội dung Form” của Form mới, và bổ các mail-tag [your-name], [your-number], [your-email], [your-note] cho tab “Cấu hình Mail” để điều chỉnh nội dung nhận mail thông báo.
<div class="form-contact-twocol"> <div id="info-left"> [text* your-name placeholder "Họ tên *"] </div> <div id="info-right"> [tel* your-number placeholder "Di động *"] </div> <div id="info-left"> [email* your-email placeholder "Email *"] </div> <div id="info-right"> [text your-note placeholder "Ghi chú..."] </div> </div> [submit class:button primary "Gửi Đi"]
Sau khi chèn đoạn html trên, Form liên hệ của bạn sẽ hiển thị như thế này
Để chia mẫu form liên hệ trên thành 2 cột, các bạn coppy đoạn CSS dưới đây, dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme.
/*-- Start chia cột Form --*/
#info-left {
width: 49%;
float: left;
margin-right:2%;
}
#info-right {
width: 49%;
float: right;
}
.form-contact-twocol:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}
.form-contact-twocol {
display:block;
}
/*-- End chia cột Form --*/
Xong xuôi, Form của bạn sẽ hiển thị tương tự như dưới đây
Trong quá trình thực hiện, có thắc mắc nào, các bạn có thể để lại comment cho mình phía dưới bài viết.
Chúc các bạn thành công!