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”.

Đ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


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!