Hướng dẫn chia cột cho Form sử dụng Contact Form 7

Đầ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 form tạo bởi contact form 7 thành 2 cột

Để 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