Tùy biến Contact Form 7 phong cách mới đẹp và gọn

Trong form mặc định của CF7 có mẫu chia cột cho Form đăng ký được tạo bằng plugin Contact Form 7. Ở bài viết này, Tôi xin chia sẻ với các bạn cách để chèn icon vào Form với bộ icon mặc định của Flatsome để Form Liên Hệ được bắt mắt hơn.

Cách này đơn giản nhất là chúng ta chỉ 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. Ngoài ra có thể kết hợp thêm các phong cách có sẵn trong thêm Flasome để hiển thị đẹp mắt hơn.

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:

Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome.
Xem thêm: Hướng dẫn chia cột cho Form sử dụng Contact Form 7.

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

}