Giới thiệu về Contact Form 7 Multi-Step Forms
Trong quá trình thiết kế website, việc tạo biểu mẫu liên hệ là một phần quan trọng để tương tác với người dùng. Tuy nhiên, trong một số trường hợp, biểu mẫu liên hệ có thể phức tạp với nhiều bước và thông tin cần thu thập. Để giải quyết vấn đề này, plugin Contact Form 7 Multi-Step Forms ra đời nhằm hỗ trợ tạo biểu mẫu liên hệ trải qua nhiều trang và thu thập tất cả thông tin để gửi qua email.
Ứng dụng của Contact Form 7 Multi-Step Forms
Plugin này rất hữu ích trong việc xây dựng các biểu mẫu liên hệ phức tạp như đăng ký, đặt hàng, hoặc bất kỳ biểu mẫu nào yêu cầu nhiều bước để hoàn thành. Với Contact Form 7 Multi-Step Forms, bạn có thể chia các bước thành các trang riêng biệt và thu thập thông tin từng bước một. Sau đó, thông tin được gửi qua email để xử lý hoặc lưu trữ.
Cách sử dụng Contact Form 7 Multi-Step Forms
Để sử dụng plugin này, bạn cần thực hiện các bước sau:
Bước 1: Tạo các trang cho từng bước của biểu mẫu
Bạn cần tạo các trang hoặc bài viết riêng biệt cho mỗi bước trong quy trình biểu mẫu liên hệ. Ví dụ, nếu bạn có 3 bước, hãy tạo 3 trang. Bạn cần lưu lại địa chỉ URL của từng trang này để sử dụng khi tạo biểu mẫu.
Bước 2: Tạo biểu mẫu liên hệ bằng Contact Form 7
Sau khi tạo các trang cho từng bước, bạn cần tạo biểu mẫu liên hệ bằng plugin Contact Form 7. Đặt con trỏ vào cuối biểu mẫu và chuyển sang tab “Form”.
Trên tab “Form”, bạn sẽ thấy một nút có tên “multistep”. Bấm vào nút này để thêm thẻ “multistep” vào biểu mẫu. Thẻ này sẽ giúp xác định bước đầu tiên và bước cuối cùng của biểu mẫu.
Trong cửa sổ hiển thị, bạn cần kiểm tra hộp chọn “First Step” nếu đây là bước đầu tiên của biểu mẫu và kiểm tra hộp chọn “Last Step” nếu đây là bước cuối cùng. Các hộp chọn khác là tùy chọn.
Để tiếp tục với bước tiếp theo, bạn cần nhập URL của trang chứa biểu mẫu tiếp theo vào ô “Next Page URL”. Nếu biểu mẫu hiện tại là bước cuối cùng, bạn có thể để trường URL trống.
Sau khi nhập đầy đủ thông tin, bấm vào nút “Insert Tag” để thêm thẻ vào biểu mẫu. Sau đó, lưu biểu mẫu và đặt shortcode của biểu mẫu vào trang hoặc bài viết tương ứng.
Bước 3: Lặp lại quy trình cho các biểu mẫu tiếp theo
Nếu bạn có nhiều biểu mẫu liên kết với nhau để tạo thành quy trình đa bước, hãy lặp lại quy trình trên cho từng biểu mẫu. Đặt các trang và biểu mẫu tương ứng cho mỗi bước.
Bước 4: Gửi email khi hoàn thành quy trình
Trên bước cuối cùng của quy trình đa bước, bạn có thể cần gửi một email để thông báo hoặc xử lý thông tin đã thu thập từ người dùng. Đảm bảo kiểm tra hộp chọn “Send Email” trong bước 5. Tiếp theo, vào tab “Mail” và nhập các mail-tags như thông thường. Ví dụ, nếu trường “your-email” có trong biểu mẫu đầu tiên, bạn có thể nhập [your-email] vào tab “Mail” của biểu mẫu cuối cùng.
Lưu ý: Plugin Contact Form 7 có thể hiển thị thông báo lỗi vì trường “your-email” không xuất hiện trong biểu mẫu hiện tại. Tuy nhiên, bạn có thể bỏ qua thông báo lỗi này.
Các tùy chọn trong thẻ Multistep
Thẻ “multistep” có các tùy chọn sau:
- Name: Tên của thẻ multistep. Tuy nhiên, tùy chọn này hiện tại không được sử dụng.
- First Step: Đánh dấu bước đầu tiên trong quy trình đa bước. Điều này cho phép hiển thị biểu mẫu khi không có dữ liệu từ các bước trước.
- Last Step: Đánh dấu bước cuối cùng trong quy trình. Khi người dùng hoàn thành biểu mẫu này, dữ liệu sẽ không còn xuất hiện trong các biểu mẫu tiếp theo.
- Send Email: Nếu được chọn, biểu mẫu sẽ gửi email như một biểu mẫu Contact Form 7 thông thường.
- Skip Save: Nếu bạn sử dụng các plugin như Flamingo hoặc CFDB7 để lưu dữ liệu, tùy chọn này sẽ ngăn plugin lưu dữ liệu của biểu mẫu này.
- Next Page URL: Đây là URL mà người dùng sẽ được chuyển đến sau khi gửi biểu mẫu. Nếu đây là bước cuối cùng, bạn có thể để trường URL trống.
Các thẻ bổ sung
Plugin cung cấp các thẻ bổ sung để hiển thị thông tin từ các bước trước đó và tạo nút chuyển đến bước trước đó. Ví dụ:
[multiform "your-name"]: Hiển thị trường “your-name” từ một bước trước đó.[previous "Go Back"]: Hiển thị nút “Go Back” để chuyển đến bước trước đó.
Các vấn đề thường gặp và giải pháp
Trong quá trình sử dụng plugin, có thể bạn gặp phải một số vấn đề. Dưới đây là một số giải pháp cho những vấn đề thường gặp:
Vấn đề: Nút “Next” không hiển thị
Giống như các biểu mẫu Contact Form 7 thông thường, bạn cần thêm một nút để gửi biểu mẫu. Sử dụng nút submit thông thường với nhãn tùy chọn, ví dụ như: [submit "Next"].
Đồng thời, cần chú ý rằng thẻ “multistep” là một trường ẩn và không thêm khoảng trống vào biểu mẫu. Điều này có thể dẫn đến việc ẩn các phần tử ngay sau thẻ này. Để khắc phục, bạn có thể thêm một dòng trống sau thẻ “multistep” hoặc đặt thẻ này cuối cùng trong biểu mẫu.
Vấn đề: Hiển thị thông báo “Please fill out the form on the previous page”
Có một số nguyên nhân có thể dẫn đến thông báo này:
- Hệ thống caching của bạn không cho phép cookies được thiết lập theo cách thông thường. Để khắc phục, bạn cần tắt caching cho cookies có tên “cf7*”.
- Protocol hoặc domain không giống nhau trên các trang. Mỗi trang chứa biểu mẫu cần có cùng protocol và domain. Ví dụ, nếu trang đầu tiên sử dụng giao thức https như https://webheadcoder.com, trang thứ hai không thể sử dụng giao thức http hoặc là một subdomain của trang đầu tiên.
- Đảm bảo biểu mẫu đầu tiên có thuộc tính “first_step” trong thẻ multistep. Ví dụ:
[multistep multistep-123 first_step "/your-next-url/"]
Vấn đề: Dữ liệu không được truyền từ biểu mẫu này sang biểu mẫu khác
Nếu biểu mẫu của bạn tải lại trang sau khi nhấn nút gửi, có thể bạn đã tắt WordPress REST API hoặc javascript cho Contact Form 7 không hoạt động đúng. Vui lòng xem trang hướng dẫn sửa lỗi của Contact Form 7 để biết thêm thông tin chi tiết: https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
Vấn đề: Hiển thị tổng kết thông tin người dùng đã nhập hoặc hiển thị các trường từ các bước trước đó
Bạn có thể sử dụng thẻ “multiform” để hiển thị thông tin từ các bước trước đó. Thay “your-name” bằng tên của trường tương ứng. Ví dụ: [multiform "your-name"]
Vấn đề: Dữ liệu biểu mẫu không được gửi trong email
Thẻ “multiform” chỉ nên được sử dụng trên tab “Form”. Trên tab “Mail”, bạn nên tuân theo hướng dẫn từ tài liệu của Contact Form 7. Ví dụ, nếu bạn muốn hiển thị trường “your-name”, hãy nhập [your-name]. Đồng thời, đảm bảo rằng biểu mẫu cuối cùng có thẻ “multistep”.
Vấn đề: Gửi email trong bước đầu tiên của quy trình đa bước
Đúng, bạn có thể gửi email trong bước đầu tiên của quy trình đa bước. Đảm bảo kiểm tra hộp chọn “Send Email” hoặc có thuộc tính “send_email” trong thẻ multistep. Ví dụ: [multistep multistep-123 first_step send_email "/your-next-url/"]
Vấn đề: Biểu mẫu không hoạt động như mong đợi
Đảm bảo rằng bạn đã thêm thẻ “multistep” vào từng biểu mẫu. Ngoài ra, có thể một số plugin khác gây ra lỗi javascript, ảnh hưởng đến hoạt động của plugin này. Hãy tắt tất cả các plugin khác và thử lại.
Vấn đề: Tại sao cần “đặt con trỏ vào cuối biểu mẫu” trước khi thêm thẻ multistep?
Thẻ “multistep” là một trường ẩn và không thêm khoảng trống vào biểu mẫu. Điều này có thể dẫn đến việc ẩn các phần tử ngay sau thẻ này. Để khắc phục, bạn có thể thêm một dòng trống sau thẻ “multistep” hoặc đặt thẻ này cuối cùng trong biểu mẫu.
Vấn đề: Làm thế nào để Flamingo hoặc CFDB7 không lưu mọi biểu mẫu?
Đảm bảo kiểm tra hộp chọn “Skip Save” hoặc có thuộc tính “skip_save” trong thẻ multistep. Ví dụ: [multistep multistep-123 skip_save "/your-next-url/"]
Vấn đề: Khi không chọn các trường checkbox, email hiển thị [field-name] thay vì giá trị thực
Điều này có thể xảy ra khi không chọn các trường checkbox. Để khắc phục, bạn cần đảm bảo đã chọn ít nhất một trường checkbox hoặc sử dụng các giá trị mặc định khác khi không có trường checkbox được chọn.
Trên đây là những thông tin chi tiết về plugin Contact Form 7 Multi-Step Forms, một công cụ hữu ích để xây dựng các biểu mẫu liên hệ đa bước. Plugin này giúp tạo ra trải nghiệm tốt hơn cho người dùng và thu thập thông tin một cách dễ dàng và có tổ chức. Hy vọng rằng bạn đã tìm thấy các thông tin hữu ích và có thể áp dụng vào công việc của mình.
Link tải: https://wordpress.org/plugins/contact-form-7-multi-step-module/