Tạo form chuyên nghiệp với plugin contact form 7

Bữa trước có một số bạn hỏi mình làm thế nào để có thể thêm cái input HTML khác vào contact form 7. Thì nay mình xin chia sẻ các bạn cách để có thể thực hiện được việc này.

Thật ra thì các bạn chịu khó đọc DOC của CF7 là sẽ biết ngay cách làm thôi.

Bắt đầu nào !!!

Bảng demo

Đầu tiên mình sẽ tạo ra một bản demo với radio và checkbox và drop-down nhé.

Mình chưa css nên form còn khá thô ^^.

Cách tạo các input trong contact form 7

Tạo input radio.

Để tạo input radio, các bạn chỉ cần thêm radio vào sau thẻ mở shortcode

VD: [radio your-sports use_label_element default:2 “Đá bóng” “Tennis” “Bơi lội”]

Trong đó thứ tự các trường sẽ là

Class: your-sports

use_label_element : Để khi click vào label nó vẫn sẽ tự động chọn input radio.

default:2 : Mặc định sẽ chọn radio thứ 2, ở đây là tennis

Như vậy là xong phần tạo Radio.

Tạo checkbox

Tương tự, bạn cũng sẽ thêm checkbox vào sau ký tự mở shortcode.

[checkbox* your-country use_label_element “Viet Nam” “Lào” “Campuchia”]

Cái này cũng tương tự như radio, phần tử bên trong cũng là class và chọn label, bạn thử thêm defaut xem nó có hoạt động không nhé.

Tạo select

Cũng tương tự như vậy, bạn chỉ cần thêm seclect

VD: [select* your-browser include_blank “Firefox” “Safari” “Opera” “Lynx”]

Bạn có thể sử dụng include_blank để chèn dữ liệu trống hoặc dụng defaut: để chọn giá trị mặc định.

Vầy là xong, bạn chỉ cần CSS lại cho đẹp mắt nữa là được.

Dưới đây là đoạn code của ví dụ trên.

Mọi người có thể đọc thêm tại đây nhé! https://contactform7.com/checkboxes-radio-buttons-and-menus/

À ngoài ra các bạn có thể xem bài viết cách chống gửi nhiều thông tin trùng nhau trong contactform 7 nhé.