Tùy biến plugin contact form 7 thành 2 cột

Plugin contact form 7 không còn xa lạ với những người thiết kế web bằng wordpress, đây là plugin giúp bạn tạo form liên hệ vô cùng tiện lợi, dễ dàng sử dụng và cài đặt. Là plugin nên cài đặt trong mỗi website wordpress. Tuy nhiên, mặc định form của plugin này khá đơn điệu không được đẹp mắt, mặc định form trình bày 1 cột từ trên xuống nhìn khá cơ bản, ở bài này mình sẽ chia sẻ cách tùy biến plugin contact form 7 thành 2 cột để form liên hệ của bạn chuyên nghiệp hơn trong mắt người dùng.

Hình ảnh dưới đây là mục đích đạt được của bài này. Form đầy đủ những thông tin cần thiết như họ tên, email, số điện thoại, tiêu đề, tin nhắn.

tùy biến plugin contact form 7 thành 2 cột

Các bước tùy biến plugin contact form 7 thành 2 cột

Bước 1 : Tạo 1 form liên hệ mới và sử dụng đoạn code HTML của form sau :

Bước 2 : Sau khi đã có bộ khung của form, chúng ta tiến hành CSS cho form đẹp hơn và được như mục đích ban đầu. Ở đây mình hướng dẫn css phù hợp cho cả desktop và mobile.

Thêm đoạn code css sau vào file style.css trong theme.

Tiếp tục thêm đoạn code css sau đây vào.

Đến đây là bạn đã xong công việc, mở ra xem thành quả nữa thôi.

Lời kết : Việc tùy biến cho form sử dụng plugin contact form 7 tùy thuộc vào khả năng css của bạn, nhiều người có nhu cầu sử dụng khác nhau, ở bài này mới chỉ hướng dẫn tùy biến thành 2 cột, vậy muốn tùy biến thành 3 cột hay nhiều hơn thế nữa thì phải làm sao?

Ở bài tiếp theo mình sẽ hướng dẫn yêu cầu này. Tùy biến plugin contact form 7 thành 3 cột và nhiều hơn thế nữa. Chúc bạn thành công!

Share this post

Add Comment