Tùy biến Contact Form 7 - Chia Form thành 2 cột & Chèn icon vào Form

Tương tự như ở bài viết trước, mình sẽ sử dụng đoạn HTML và CSS để thực hiện việc chia Form Liên Hệ thành 2 cột và chèn icon vào Form để giúp mẫu Form tạo bằng Contact Form 7 được bắt mắt và chuyên nghiệp hơn với người dùng.

Các icon ở đây, mình đều dùng bộ có sẵn của Flatsome, để thay đổi biểu tượng của icon, các bạn chỉ cần thay đổi lại đoạn class=”icon-xxx”. Chi tiết bộ Flatsome icons và cách dùng, bạn xem tại đây:

Đoạn HTML chèn vào tab “Nội dung Form”

<div class="form-contact-twocol">
   <div id="info-left">
   <p>[text* your-name placeholder "Họ tên *"]<i id="icon-form" class="icon-user"></i></p>
   </div>
   <div id="info-right">
   <p>[tel* your-number placeholder "Di động *"]<i id="icon-form" class="icon-phone"></i></p>
   </div>
</div>
   <p>[email your-email placeholder "Email"]<i id="icon-form" class="icon-envelop"></i></p>
   <p>[text your-subject placeholder "Tiêu đề email "]<i id="icon-form" class="icon-pen-alt-fill"></i></p>
   <p>[textarea your-message placeholder "Nội dung email..."]<i id="icon-form" class="icon-chat"></i></p>
<center>[submit class:button primary "Gửi Đi"]</center>

Đoạn CSS chia cột và chèn icon vào Form, các bạn 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 Flatsome.

/*-- 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;
}
/*-- Chèn icons lên Form --*/
.wpcf7 p{ position: relative; }
#icon-form{
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 8px;
  right: 10px;
}

Kết quả hiển thị trên Flatsome