Chào các bạn, lại là mình và chủ đề tùy biến form CF7 sao cho thật bắt mắt với người dùng, qua đó, phần nào làm tăng tỉ lệ chuyển đổi khi khách hàng cũng như đối tượng người dùng website của các bạn khi họ ghé thăm website. Các icon này, mình sử dụng bộ icon mặc định của Flatsome nên nếu cảm thấy hạn chế, các bạn có thể chèn bộ icon của Font Awesome vào để đa dạng hơn nhé!
Tương tự như các bài viết trước, mình sẽ sử dụng HTML & CSS để chia cột và chèn icon lên form CF7, các bạn có thể coppy lại & thay thế mã màu hoặc icon sao cho phù hợp với mục đích sử dụng của các bạn.
HTML Chèn vào Form
Các bạn coppy lại và chèn vào tab “Nội dung Form”, các bạn có thể tùy chỉnh thay đổi icon hoặc trường form phù hợp với mục đích của các bạn.
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="form-contact-tcwpcol"> <div id="info-left"> <p>[text* your-name class:contact-input placeholder "Họ tên *"]<i id="icon-form" class="icon-user"></i></p> </div> <div id="info-right"> <p>[tel* your-number class:contact-input placeholder "Di động *"]<i id="icon-form" class="icon-phone"></i></p> </div> </div> <p>[email your-email class:contact-input placeholder "Email"]<i id="icon-form" class="icon-envelop"></i></p> <p>[text your-subject class:contact-input placeholder "Tiêu đề email "]<i id="icon-form" class="icon-search"></i></p> <p>[textarea your-message class:contact-input placeholder "Nội dung email..."]<i id="icon-form" class="icon-chat"></i></p> <center>[submit class:tcwp-custom-button primary "Gửi Đi"]</center> |
Đoạn CSS chia cột & chèn icon lên Form CF7
Đoạn CSS này dùng để chia cột và chèn icon vào Form CF7, các bạn có thể thay đổi lại các mã màu icon, đoạn ghi chú, background…. và 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /*-- chia cột Form --*/ #info-left { width: 49%; float: left; margin-right:2%; } #info-right { width: 49%; float: right; } .form-contact-tcwpcol:after { content:"020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; margin-bottom:10px; } .form-contact-tcwpcol { display:block; } /*-- Màu Background Row --*/ .tuy-bien-form{ background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);} /*-- Chèn icons lên Form --*/ .wpcf7 p{ position: relative; } #icon-form{ position: absolute; color: #ffffff; z-index: 100; font-size: 18px; top: 8px; left: 10px; } .wpcf7 p>span>input { border: 0 solid; border-bottom: 1px solid #ffffff; -webkit-box-shadow:unset; box-shadow: unset; background: transparent!important; } .wpcf7 p>span>textarea { border: 0 solid; border-bottom: 1px solid #ffffff; -webkit-box-shadow:unset; box-shadow: unset; background: transparent; } .wpcf7 input::placeholder{ color: #ffffff; } .wpcf7 textarea::placeholder{ color: #ffffff; } .contact-input { padding-left: 40px!important; } .tcwp-custom-button{ border: 1px solid white!important; } .wpcf7-spinner{ display:none } |
- Mình CSS đặt màu trắng làm màu chủ đạo của Form nên Form sẽ không hiển thị trên nền background trắng. Các bạn có thể thay đổi mã màu trắng – ” #ffffff ” thành mã màu phù hợp để điều chỉnh cho Form theo ý của các bạn.
- Hoặc để tạo background như bản demo của mình phía dưới, các bạn tạo row, đặt class cho row là “tuy-bien-form“, tạo 1 column và gọi form ra là được.
Bài viết mới cập nhật:
- Tổng hợp code hay cho flatsome bán hàng cực chất
- Chia sẽ code functions hữu ích cho wordpress – flatsome
- Chính sách bảo hành
- Tùy Biến Form CF7 – Chia cột & Chèn icon lên Form tạo bằng CF7 bắt mắt
- Contact us all-in-one button – Plugin tạo nút liên hệ chuyên nghiệp
- Cách chèn quảng cáo Google Adsense vào giữa bài viết trong WordPress
- Thêm nội dung vào trước và sau giá của sản phẩm trong Woocommerce
- CSS tạo Line Effect khi hover
Nguyễn Tiến Cường
Bài Viết Cùng Chủ Đề:
