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 Formvớ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 HTMLvà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ằngContact 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ạnclass=”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ạnCSSchia 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 “CustomCSS” 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!
