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 !!!

Form liên hệ chuyên nghiệp bằng contact form 7

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

    Chọn Nước (required)

    Chọn Môn thể thao

    Chọn Fruit (required)
    TáoChuối

    Chọn Browser (required)

    1`235235234sasd





    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.

    Chọn Nước (required)
    [checkbox* your-country use_label_element "Viet Nam" "Lào" "Campuchia"]

    Chọn Môn thể thao
    [radio your-sports use_label_element default:2 "Đá bóng" "Tennis" "Bơi lội"]

    Chọn Fruit (required)
    [checkbox* your-fruit exclusive "Táo" "Chuối" "Lê"]

    Chọn Browser (required)
    [select* default:2 "Firefox" "Safari" "Opera" "Lynx"]

    [submit "Send"]

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

    Donate ủng hộ tinh thần

    Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

    Ủng hộ mình một ly cà phê nhé: Vì đầy là động lực để mình có thể giúp đỡ mọi người nhé.

    Ủng hộ bằng momo:

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

    1. Huy says:

      A cho hỏi cái phần drop-down menu giả sử e muốn cho nó thêm 1 drop-down menu liên kết với drop-down menu phía trên
      – Thí dụ e chọn trình duyệt Opera nó sẽ xuất hiện 1 drop-down menu phụ bên dưới Opera gồm các phiên bản opera

      • Thành Tuấn says:

        CF7 sử dụng select nên mình nghĩ việc tạo menu theo kiểu drop-down như vậy là k khả thi nhé. Hoặc có thể được mà mình không biết.

    Trả lời

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *