Chia 2 cột Liên hệ cho Contact Form 7

Contact Form 7 là một trong những plugin tạo form liên hệ phổ biến nhất trên WordPress, nhờ tính đơn giản, dễ tùy chỉnh và khả năng mở rộng mạnh mẽ. Tuy nhiên, khi thiết kế form mặc định, các trường liên hệ thường hiển thị theo dạng dọc (một cột), khiến bố cục form có thể dài và chưa tối ưu trải nghiệm người dùng.

Để cải thiện giao diện, nhiều người lựa chọn chia form liên hệ thành 2 cột. Việc này giúp:

• Bố cục gọn gàng, chuyên nghiệp hơn
• Tối ưu không gian hiển thị
• Người dùng dễ dàng nhập thông tin
• Tăng tính thẩm mỹ, phù hợp với thiết kế website hiện đại

Chia 2 cột Liên hệ cho Contact Form 7 một cách đơn giản và đẹp mắt trong Contact Form 7, bạn có thể làm theo 2 bước như sau:

Tạo Form mới trong Contact Form 7

<div class="form-lienhe-twocol">
   <div id="info-trai">
   [text* your-name placeholder "Họ tên *"]
   </div>
   <div id="info-phai">
   [tel* your-number placeholder "Di động *"]
   </div>
   <div id="info-trai">
   [email* your-email placeholder "Email *"]
   </div>
   <div id="info-phai">
   [text your-note placeholder "Ghi chú..."]
   </div>
</div>
[submit class:contact-button "Gửi đi"]

Thêm CSS cho Form để chia 2 cột

/* Chia 2 cột trong Liên hệ Contact Form 7 - thangoi.com*/
#info-trai {
    width: 49%;
    float: left;
    margin-right:2%;
}
#info-phai {
    width: 49%;
    float: right;
}
.form-lienhe-twocol:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
.form-lienhe-twocol {
    display:block;
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.contact-button {
    padding: 9px 23px;
    border-radius: 20px;
    border: none;
    background: #c9548b;
    color: #fff;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required
.wpcf7-form-control-wrap{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}