Tùy Biến Form CF7 – Chia cột & Chèn icon lên Form tạo bằng CF7 bắt mắt

34 lượt xem 10/07/2024 Học CSS, Flatsome, Học HTML, Wordpress

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.

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.

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

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

tuy bien form cf7 tiencuongwp

5/5 - (2 bình chọn)
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x