Cách tạo biểu mẫu liên hệ Divi linh hoạt bằng cách sử dụng logic có điều kiện

Blair Jersyer H Oct 11, 2021

Không phải mọi khách truy cập vào trang web của bạn đều có cùng mục đích. Bạn rất có thể cung cấp nhiều mặt hàng hoặc dịch vụ khác nhau cho khách hàng và khách hàng, thay vì chỉ đơn giản là một. Đó là lý do tại sao có nhiều biểu mẫu liên hệ được nhắm mục tiêu khác nhau có thể hỗ trợ việc hoàn thiện UX trên trang web của bạn để khách hàng của bạn (và những khách hàng tương lai) có thể liên hệ với bạn mà không gặp nhiều khó khăn nhất có thể về chính xác những gì họ cần. Chúng tôi sẽ hướng dẫn bạn cách xây dựng đường dẫn tối ưu giữa bạn và người dùng của bạn bằng cách sử dụng mô-đun biểu mẫu liên hệ Divi và chức năng logic có điều kiện của chúng tôi.

Nhìn lén biểu mẫu liên hệ có điều kiện

Khi tất cả được nói và làm xong, bạn sẽ có một cái gì đó tương tự như thế này trên trang web của mình, sẵn sàng cho khách truy cập của bạn sử dụng.

Logic có điều kiện chính xác là gì?

Để bắt đầu, chúng tôi muốn xác định logic có điều kiện một cách ngắn gọn. Trong bài học này, chúng tôi sẽ thiết lập một loạt các biểu mẫu liên hệ xuất hiện tùy thuộc vào lựa chọn của người dùng thực hiện hoặc không thực hiện.

Ví dụ: bạn có thể có một biểu mẫu liên hệ duy nhất thay đổi tùy thuộc vào dịch vụ hoặc sản phẩm mà khách truy cập cần. Bằng cách đó, thay vì họ phải viết nó ra, bạn có thể có thông tin bạn cần ở định dạng bạn yêu cầu. Logic có điều kiện của biểu mẫu liên hệ giúp cải thiện giao tiếp và tăng tốc khả năng cung cấp cho người dùng của bạn.

Tạo trang web tuyệt vời

Với trình tạo trang miễn phí tốt nhất Elementor

Bắt đầu bây giờ

Với ý nghĩ đó, hãy bắt đầu phát triển các biểu mẫu liên hệ được nhắm mục tiêu.

Cách sử dụng logic có điều kiện để tạo biểu mẫu liên hệ

Mở Divi Builder.

Chúng tôi sẽ cần nhập Trình tạo Divi vì chúng tôi đang sử dụng mô-đun Biểu mẫu Liên hệ Divi. Trong hướng dẫn này, chúng tôi sẽ sử dụng gói bố cục Bảo trì Cảnh quan làm ví dụ. Bạn có thể sử dụng bất kỳ bố cục hoặc thiết kế nào bạn thích, nhưng bạn phải có khả năng sử dụng và tạo kiểu cho Mô-đun Biểu mẫu Liên hệ Divi.

Để bắt đầu, hãy điều hướng đến Trình tạo Divi trong phần phụ trợ của trang web WordPress của bạn. Bên trong Trình chỉnh sửa Trang, bạn sẽ nhận thấy một nút màu tím có nhãn "Sử dụng Trình tạo Divi" (hoặc Chỉnh sửa bằng Trình tạo Divi nếu bạn đã tạo Trang).

Chèn hoặc định vị Mô-đun Biểu mẫu Liên hệ.

Sau đó, xác định Mô-đun biểu mẫu liên hệ hiện có trên trang hoặc nhấp vào biểu tượng Vòng tròn màu đen \ 002B và chọn Biểu mẫu liên hệ từ menu thả xuống.

Điền vào Cài đặt Biểu mẫu Liên hệ

Theo mặc định, mô-đun Biểu mẫu Liên hệ Divi bao gồm ba trường: Tên, Email và Tin nhắn. Chúng tôi sẽ tạo một biểu mẫu liên hệ để những tùy chọn đó không xuất hiện cho đến khi khách truy cập đã cung cấp cho chúng tôi đủ thông tin để hướng dẫn yêu cầu của họ.

Thêm câu hỏi điều kiện đầu tiên

Điền vào chỗ trống với câu hỏi điều kiện đầu tiên. Bạn có thể tìm thấy nút " Thêm trường mới " trong tab Nội dung , bên dưới bất kỳ trường hiện có nào trong biểu mẫu. Đơn giản chỉ cần nhấp vào đó.

Thao tác này sẽ hiển thị hộp Cài đặt Trường , nơi bạn sẽ thấy các trường cho IDTiêu đề trường . ID trường là dành cho bạn. Đó là những gì xuất hiện trong cài đặt mô-đun để bạn theo dõi. Tiêu đề là văn bản mà khách truy cập của bạn sẽ thấy trên giao diện người dùng của biểu mẫu. (Tiêu đề cũng sẽ hiển thị trong email bạn nhận được sau khi gửi biểu mẫu.)

ID Trường được gắn thẻ "Có điều kiện" vì đây là câu hỏi đầu tiên mà khách truy cập sẽ thấy trên biểu mẫu. Những gì họ nhìn thấy tiếp theo sẽ được quyết định bởi phản ứng của họ với nó. Đây là một cách đơn giản để theo dõi luồng câu hỏi và câu trả lời của biểu mẫu.

Thêm tùy chọn trường

Cuộn xuống phần Tùy chọn Trường bên dưới Tab Nội dung. Đây là nơi bạn sẽ đặt các tùy chọn để người dùng lựa chọn. Mỗi điều này sẽ đóng vai trò như một lời nhắc cho việc đặt câu hỏi bổ sung. Hộp kiểm được sử dụng làm kiểu đầu vào trong ví dụ này. Điều này có nghĩa là người tiêu dùng có quyền lựa chọn bao nhiêu tùy thích.

Ngoài Hộp kiểm, Divi hỗ trợ các tính năng bổ sung sau: Trường nhập và Khu vực văn bản cho các phản hồi đã nhập của chính người dùng, Chọn nút thả xuống và nút radio cho các lựa chọn riêng lẻ mà bạn cung cấp và Trường email để nhập địa chỉ email. Trường Tên mặc định là Trường Nhập, trong khi Trường Thông báo mặc định là Vùng văn bản.

Với Hộp kiểm được chọn, chúng tôi sẽ nhập các tùy chọn mà chúng tôi muốn kích hoạt sau đó. Sau đó, để ngăn người dùng gửi biểu mẫu sớm, chúng tôi muốn đặt trường này thành Trường bắt buộc .

Cần lưu ý rằng chúng tôi không sử dụng Logic có điều kiện trong giai đoạn này. Bởi vì đây là trình kích hoạt, nó sẽ xuất hiện cho người dùng bất kể.

Tạo trường phản hồi có điều kiện mới

Tuy nhiên, đối với các Trường mới mà chúng tôi thêm làm phản hồi tiếp theo, chúng tôi sẽ thêm Logic có điều kiện tiếp theo. Bởi vì chúng tôi đã bao gồm ba tùy chọn cho câu hỏi đầu tiên, chúng tôi sẽ thêm ba trường tương đương mới vào biểu mẫu. Bạn sẽ cần lặp lại các bước bên dưới cho từng bước.

Đặt tên cho các câu trả lời có điều kiện trên các trường mới

Chúng tôi đã sử dụng cách đặt tên có Điều kiện 1 (để biểu thị trình kích hoạt có điều kiện đầu tiên), tiếp theo là 1a, 1b và 1c cho các phản hồi tiếp theo. Chúng tôi cũng đã gắn nhãn chúng một cách thích hợp để chúng tôi biết chúng là gì.

Tương tự như câu hỏi đầu tiên, chúng tôi sẽ nhập Tiêu đề là câu hỏi mà khách truy cập sẽ thấy.

Thêm Logic có điều kiện vào các trường phản hồi.

Sau đó, đi xuống phần Logic có điều kiện của tab Nội dung của trường đó. Bật chuyển đổi Logic có điều kiện . Sau đó, đối với trường hợp này, hãy chọn Mối quan hệ, có nghĩa là bạn có thể đặt nó thành bất kỳ (bất kỳ số lượng câu trả lời nào có thể khiến lựa chọn này hiển thị) hoặc tất cả (chỉ sự kết hợp cụ thể của các câu trả lời mới làm cho trường này xuất hiện).

Nếu bạn chỉ sử dụng một quy tắc kích hoạt duy nhất, giống như chúng tôi, bất kỳ hoặc tất cả sẽ hoạt động.

Bạn sẽ nhận thấy trường kích hoạt trường này trong Quy tắc và ở bên phải, bạn có thể chọn tùy chọn sẽ kích hoạt trường này. Vòng loại, chẳng hạn như bằng, không bằng, nhỏ hơn, hơn, v.v., nằm ở trung tâm. Đối với trường này, chúng tôi sẽ chọn câu hỏi có Điều kiện 1 và sau đó là lựa chọn bên trong nó khiến trường này xuất hiện một cách rõ ràng.

Lặp lại bước đó cho tất cả các Câu trả lời có điều kiện.

Vì chúng tôi đã giới thiệu ba câu trả lời có thể có cho câu hỏi điều kiện duy nhất của mình, chúng tôi sẽ làm tương tự cho các trường khác. Chỉ các câu trả lời tương ứng thích hợp cho lựa chọn đó mới được tạo.

Đặt â € ˜Tên / Email / Tin nhắn 'của các trường trong biểu mẫu liên hệ để xuất hiện

Khi bạn đã định cấu hình các câu trả lời cho logic có điều kiện, chúng tôi muốn khách truy cập có thể gửi biểu mẫu. Để thực hiện điều này, chúng tôi sẽ sửa đổi logic Điều kiện trong các trường Tên , EmailTin nhắn . Vì sự chuẩn bị cho mỗi cái đều giống nhau, bạn sẽ lặp lại điều này ba lần.

Chuyển đến Logic có điều kiện trong cài đặt trường Tên, Email và Tin nhắn. Bật nó và nhập nhiều câu trả lời cuối cùng cho các câu hỏi tiếp theo có điều kiện của bạn như bạn có. Trong ví dụ này, chúng tôi có ba yêu cầu tiếp theo, do đó chúng tôi áp dụng ba quy tắc.

Chọn câu hỏi tiếp theo làm trình kích hoạt cho mỗi quy tắc. Đặt bộ định tính thành không trống, có nghĩa là điều kiện được đáp ứng miễn là khách truy cập trả lời câu hỏi. Ô cuối cùng sẽ có màu xám, cho thấy rằng câu trả lời nào là phù hợp.

Lưu các thay đổi của bạn, sau đó lặp lại cho bất kỳ trường nào khác mà bạn muốn xuất hiện để cho phép gửi biểu mẫu. Thats tất cả để có nó! Biểu mẫu của bạn sẽ tự động thích ứng với nhu cầu của người tiêu dùng.

Kết quả cuối cùng

Bạn có thể xem cách logic có điều kiện hoạt động trong thực tế trong video dưới đây.

Lời kết

Một trong những phần phổ biến nhất của trang web là biểu mẫu liên hệ. Hầu hết mọi trang web đều có một và hầu hết mọi trang web đều cần một. Tuy nhiên, không phải mọi người đều truy cập trang web của bạn vì lý do giống nhau. Bạn có thể chuyển đổi biểu mẫu liên hệ của mình thành một công cụ động để người dùng của bạn giao tiếp bằng cách sử dụng chức năng logic có điều kiện của Divi.

Divi WordPress Theme