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”
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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.
|
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 |
/*-- 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
rong 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.
Xem thêm:
- Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng
- Xoá chữ CATEGORY ARCHIVES trong theme Flatsome
- Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form
- DevVN Woocommerce Reviews – Plugin đánh giá cho WooCommerce tuyệt đẹp
- Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
Bài viết cùng chủ đề:
-
Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed
-
Cách tắt tính năng tự động cập nhật trong WordPress (auto update)
-
Xoá chữ CATEGORY ARCHIVES trong theme Flatsome
-
Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS
-
Hướng dẫn custom bộ lọc của woocommerce wordpress
-
Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome
-
Hướng dẫn các tạo bảng thông tin khuyến mãi và chỉ hiển thị cho các sản phẩm được lựa chọn
-
Hướng dẫn cách thêm các gợi ý đánh giá tự động cho woocommerce – Hỗ trợ SEO
-
Code tự động lưu ảnh vào host khi copy nội dung từ website khác
-
Sửa lỗi file tìm kiếm search của Flatsome bị treo khi tìm kiếm
-
Lập Kế Hoạch Digital Marketing – Phiên Bản Tinh Gọn
-
21 Cách tăng 3 lần tỷ lệ chuyển đổi của các trang E-Commerce
-
10 Yếu Tố Xếp Hạng Từ Khóa SEO Google (Cập Nhật 03/2020)
-
Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng
-
Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress
-
Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome
