Mình đã từng dùng khá nhiều plugin cho việc tạo form, những plugin giúp việc tạo form dễ hơn form7, nhiều tùy biến nâng cao hơn form7. Tuy nhiên, sau một thời gian tôi vẫn quay lại form7 vì sự đơn giản nhưng hiệu quả của nó. Show Điểm trừ lớn nhất của form7 có thể là giao diện làm việc không trực quan, khó sử dụng với những ai ít khi tiếp xúc với website, vì thế bài viết này mình sẽ hướng dẫn cơ bản về việc sử dụng chức năng này. Cách tạo form liên hệ mới với Contact Form 7Hướng dẫn chỉnh sửa Contact Form7Quản lý form liên hệKhi thiết kế website cho các bạn, mình đã tạo sẵn một(hoặc một vài form) cho các bạn, các bạn có thề vào quản trị website –> Form liên hệ để xem quan các form này. Cài đặt email nhận thông tin từ formNếu bạn muốn thay đổi email nhận thông tin từ form trên website, bạn truy cập vào quản trị website –> Form liên hệ, chọn form một trong những form bạn muốn đổi cài đặt email báo giá. Tại vùng chỉnh sửa, bạn nhấp vào tab “cấu hình mail”,sau đó sửa lại Email nhận, rồi lưu lại Bạn sửa tương tự với các form còn lại. Chỉnh sửa nội dung formNếu bạn có nhu cầu cần đổi lại những thông tin cần điền trong form, hoặc xóa dòng nào đó bạn nghĩ là không cần thiết, bạn nhấp vào form cần chỉnh sửa, giao diện làm việc sẽ tương tự thế này Nhìn khá rối đúng không nào 😅😅 và đây là cách mà nó hiển thị ở ngoài Tuy nhiên mình sẽ phân tích 1 đoạn trong đó, bạn sẽ hiểu và chỉnh sửa được cái thứ rối ren này <p><span class=”fa fa-user formxd”></span>[text* your-name placeholder “Tên Bạn”] </p> Bạn chỉ cần quan tâm những nội dung trong ngoặc vuông [text* your-name placeholder “Tên Bạn”]
Ngoài text, còn có 1 số trường quy định văn bản như :
VD thay đổi 1 dòng trong formNhiều bạn cảm thấy dòng email là không cần thiết và muốn sửa thành dòng địa chỉ, bạn sửa như sau: <p><span class=”fa fa-envelope formxd”></span>[email email-604 placeholder “Email”]</p> Đây là dòng quy định gốc, để sửa thành địa chỉ, bạn cần sửa qui định dòng từ email thành text, và Hiển thị từ Email thành Địa chỉ, ta sẽ có <p><span class=”fa fa-envelope formxd”></span>[text email-604 placeholder “Địa Chỉ”]</p> Bạn ấn lưu lại để hoàn thành Làm Màu Cho Contact Form 7 Với ElementorLàm Màu Cho Contact Form 7 Với CSSCode CSS: .wpcf7 input:not([type=”submit”]), .wpcf7 select, .wpcf7 textarea { width: 100%; padding: .75em; background: Nếu bạn muốn style cho nhiều form khác nhau trên website.Website có nhiều form, bạn muốn style css khác nhau trên mỗi form, hãy đặt class cho shortcode của bạn bằng các sau: Sửa shortcode –> nâng cao –> Class CSS , đặt tên cho class, tên gì cũng được, miễn sao không dấu và viết liền là được, ở đây mình đặt là vinhxd Khi đó đoạn css cho form sẽ là.vinhxd .wpcf7 input:not([type=”submit”]), .wpcf7 select, .wpcf7 textarea { width: 100%; padding: .75em; background: với form thứ 2, thứ 3, bạn chỉ cần thay class, sau đó thay mã màu, khoảng cách trong đoạn {} thì phần làm màu sẽ áp dụng theo class mới. |