Cách tạo biểu mẫu WordPress với trường thả xuống (Phương pháp dễ dàng)
Nhiều chủ sở hữu trang web gặp khó khăn trong việc thu thập thông tin đầu vào của người dùng mà không khiến những người dùng đó choáng ngợp với các biểu mẫu dài dòng.
Các trường thả xuống giúp biểu mẫu đơn giản hơn bằng cách trình bày danh sách tùy chọn ngắn gọn. Điều này có nghĩa là chúng có thể tăng tỷ lệ hoàn thành biểu mẫu của bạn và cải thiện trải nghiệm người dùng.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo biểu mẫu WordPress với các trường thả xuống.
Trường thả xuống là gì và tại sao nên sử dụng chúng?
Trường thả xuống cho phép người dùng chọn một tùy chọn từ danh sách tập hợp các biến thể khác nhau. Người dùng chỉ cần nhấp vào trường này để xem tất cả các lựa chọn thả xuống.
Với tư cách là chủ sở hữu trang web, bạn có thể sử dụng các trường thả xuống để tạo biểu mẫu web, chẳng hạn như đăng ký bản tin email, biểu mẫu liên hệ, biểu mẫu đăng ký sự kiện hoặc biểu mẫu đặt hàng sản phẩm.
Các trường thả xuống có thể cải thiện hiệu quả của biểu mẫu của bạn. Dưới đây là một vài lợi thế:
Tính nhất quán. Danh sách các tùy chọn được thiết lập sẽ giữ cho dữ liệu được thu thập nhất quán và ngăn chặn các mục nhập không hợp lệ. Điều này làm cho việc phân tích dữ liệu chính xác hơn.
Trường động. Các trường thả xuống giúp việc đặt logic có điều kiện dễ dàng hơn. Danh sách tùy chọn đã thiết lập cho phép bạn hiển thị các trường bổ sung dựa trên lựa chọn của người dùng mà không gặp trở ngại không cần thiết.
Giảm độ dài biểu mẫu. Việc kết hợp nhiều tùy chọn vào một menu thả xuống nhỏ gọn làm cho biểu mẫu của bạn trông ít đáng sợ hơn. Điều này có thể mang lại trải nghiệm người dùng tốt hơn.
Như đã nói, chúng ta hãy xem cách tạo biểu mẫu với các trường thả xuống trong WordPress. Dưới đây là tổng quan nhanh về các bước chúng tôi sẽ đề cập trong hướng dẫn này:
Hãy bắt đầu!
Bước 1: Cài đặt WPForms
WPForms là plugin WordPress kéo và thả thân thiện với người mới bắt đầu tốt nhất để tạo biểu mẫu. Trình tạo biểu mẫu này có hơn 1.800 mẫu, giúp bạn tạo biểu mẫu thân thiện với người dùng chỉ bằng vài cú nhấp chuột.
Nó cũng cho phép bạn tích hợp các nền tảng thanh toán và tiếp thị của bên thứ ba, bao gồm Constant Contact và Stripe.
Lưu ý: WPForms Lite đi kèm với tính năng trường thả xuống. Điều đó có nghĩa là, chúng tôi khuyên bạn nên tải phiên bản cao cấp của plugin để có thể đặt logic có điều kiện và cải thiện trải nghiệm người dùng trên biểu mẫu của mình.
Tin vui là độc giả WPBeginner sẽ được giảm giá đặc biệt 50% khi sử dụng phiếu giảm giá WPForms: SAVE50.
Để cài đặt và kích hoạt WPForms, bạn có thể đọc hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.
Bước 2: Tạo biểu mẫu mới
Sau khi kích hoạt, bạn sẽ thấy menu WPForms trong khu vực quản trị WordPress của mình như thế này:
Giờ đây, bạn sẽ có thể truy cập vào giao diện trình tạo WPForms và tạo biểu mẫu với các trường thả xuống.
Để bắt đầu tạo biểu mẫu mới, hãy di chuột qua WPForms và nhấp vào ‘Thêm mới’.
Ngoài ra, bạn có thể nhấp vào WPForms. Thao tác này sẽ chuyển hướng bạn đến phần 'Tổng quan về biểu mẫu' của trình tạo.
Để bắt đầu, hãy nhấp vào nút ‘+ Thêm mới’.
Bây giờ, bạn sẽ thấy bảng ‘Cài đặt’ trong trình tạo biểu mẫu WPForms. Trong bảng này, điều đầu tiên bạn cần làm là đặt tên cho biểu mẫu của mình.
Ví dụ: bạn có thể nhập 'Biểu mẫu liên hệ đơn giản' hoặc chỉ 'Biểu mẫu liên hệ' vào trường 'Đặt tên cho biểu mẫu của bạn'.
Khi đã xong, đã đến lúc chọn một mẫu.
Để sử dụng mẫu biểu mẫu, tất cả những gì bạn phải làm là di chuột qua mẫu bạn muốn và nhấp vào 'Sử dụng mẫu'. Trong ví dụ này, chúng tôi sẽ sử dụng ‘Biểu mẫu liên hệ đơn giản’.
Để tìm hiểu thêm về cách tạo biểu mẫu liên hệ, hãy xem hướng dẫn chi tiết của chúng tôi về cách tạo biểu mẫu liên hệ trong WordPress.
Bước 3: Thêm trường thả xuống
Sau khi hoàn tất quá trình thiết lập, bạn sẽ được chuyển hướng đến trình tạo biểu mẫu, nơi có danh sách các trường ở bên trái và bản xem trước trực tiếp ở bên phải.
Bây giờ, chúng tôi muốn thêm trường thả xuống vào biểu mẫu liên hệ của mình.
Chỉ cần nhấp vào 'Thả xuống' và kéo nó vào bên phải của biểu mẫu.
Lưu ý: Tất cả các trường trong danh mục ‘Trường tiêu chuẩn’ đều có sẵn trên WPForms Lite. Vì vậy, bạn có thể tạo biểu mẫu với các trường trắc nghiệm hoặc thêm CAPTCHA vào biểu mẫu đăng nhập và đăng ký miễn phí.
Ở bên phải bảng điều khiển, bạn sẽ có thể thấy trường thả xuống trên biểu mẫu liên hệ của mình. Bạn có thể di chuột qua trường để truy cập cài đặt của nó, bao gồm:
Một nút sao chép
Một nút xóa
Hướng dẫn ‘Nhấp để chỉnh sửa’
Hướng dẫn ‘Kéo để sắp xếp lại’
Sử dụng tính năng kéo và thả, hãy di chuyển trường thả xuống phía trên 'Nhận xét hoặc Tin nhắn'.
Bằng cách có trường đoạn 'Nhận xét hoặc Tin nhắn' ngay trước nút gửi, bạn sẽ cung cấp quy trình tốt hơn cho quá trình hoàn thành biểu mẫu. Nó cũng làm cho trường thả xuống của bạn hiển thị rõ hơn để người dùng không bỏ qua nó.
Bước 4: Định cấu hình trường thả xuống
Trong bước này, bạn sẽ đặt nhãn, tùy chọn và mô tả cho trường thả xuống của mình. Danh sách các tùy chọn của bạn phải phù hợp với loại biểu mẫu của bạn. Vì chúng tôi đang tạo biểu mẫu liên hệ nên hãy cung cấp tùy chọn đăng ký bản tin.
Nhấp vào trường thả xuống của bạn và sau đó đi tới 'Tùy chọn trường'.
Trên tab 'Chung', điền các chi tiết cần thiết:
Nhãn. Trong các trường thả xuống, nhãn thường là câu hỏi. Chúng tôi sẽ sử dụng ‘Bạn có muốn đăng ký nhận bản tin của chúng tôi không?’ làm ví dụ.
Lựa chọn. Hãy thêm 'Có, vui lòng.' và 'Không, cảm ơn bạn.'
Mô tả. Bạn có thể để lại ‘Bạn có thể hủy đăng ký bất kỳ lúc nào.’ trong trường này.
Bắt buộc. Chuyển đổi tùy chọn này để yêu cầu khách truy cập hoàn thành trường này.
Tiếp theo, hãy đặt logic có điều kiện.
Logic có điều kiện có nghĩa là đưa ra quyết định bằng câu lệnh 'nếu' và 'thì'. Khi được sử dụng trong biểu mẫu, nó sẽ quyết định điều gì xảy ra tiếp theo dựa trên câu trả lời mà người dùng đưa ra.
Việc thiết lập logic có điều kiện giúp việc hoàn thành biểu mẫu dễ dàng hơn. Bằng cách chỉ hiển thị các tùy chọn có liên quan dựa trên các lựa chọn trước đó, biểu mẫu của bạn sẽ không khiến người dùng choáng ngợp với những lựa chọn không cần thiết.
Trong ví dụ này, hãy hiển thị một trường bổ sung nếu người dùng chọn tùy chọn 'Có, vui lòng'. Chúng tôi sẽ cho phép người đăng ký chọn tần suất họ muốn nhận email quảng cáo.
Trước đó, bạn sẽ cần chuẩn bị một lĩnh vực mới. Quay lại tab 'Thêm trường' và nhấp vào 'Thả xuống' hoặc bất kỳ loại trường nào khác. Sau đó, hoàn thành các chi tiết của trường mới.
Đây là một ví dụ:
Bây giờ trường mới đã sẵn sàng, hãy nhấp vào trường đó và điều hướng đến tab ‘Logic thông minh’.
Từ đây, bạn có thể kích hoạt logic có điều kiện bằng cách bật tùy chọn ‘Bật logic có điều kiện’.
Sau khi kích hoạt, bạn có thể định cấu hình logic có điều kiện cho trường mới của mình.
Bắt đầu bằng việc chọn 'Hiển thị' hoặc 'Ẩn' trường mới. Sau đó, chọn trường hiện có và thông tin đầu vào của người dùng.
Đây là cấu hình của chúng tôi để tham khảo: 'Hiển thị' trường này nếu 'Bạn có muốn đăng ký nhận bản tin của chúng tôi' là 'Có, vui lòng'.
Mẹo của chuyên gia: Bạn muốn thêm người dùng trực tiếp vào danh sách email của mình? Chỉ cần xem hướng dẫn của chúng tôi về cách xây dựng danh sách email trong WordPress.
Bước 5: Cá nhân hóa biểu mẫu của bạn
Đã đến lúc cá nhân hóa biểu mẫu mới của bạn.
Bạn có thể bắt đầu bằng cách thiết lập thông báo qua email mỗi khi người dùng mới gửi biểu mẫu. Đi tới Cài đặt » Thông báo và chuyển đổi tùy chọn 'Bật thông báo'.
Sau đó, xem chi tiết thông báo mặc định của biểu mẫu bên dưới nút chuyển đổi.
Một số mục trong trường ‘Thông báo mặc định’ có ‘Thẻ thông minh’. Thẻ này giả định nơi gửi thông báo gửi biểu mẫu, trong số những thông báo khác. Điều đó nói lên rằng, bạn có thể điều chỉnh cài đặt dựa trên nhu cầu của mình.
Ví dụ: trường 'Đã gửi đến địa chỉ email' có 'Thẻ thông minh' {admin_email}. Theo mặc định, đây sẽ là email quản trị trang WordPress của bạn. Vì vậy, mọi thông báo gửi biểu mẫu sẽ chuyển đến hộp thư đến của email quản trị viên.
Bạn có thể thêm nhiều người nhận hơn, chẳng hạn như chuyên gia tiếp thị qua email của bạn. Chỉ cần đảm bảo phân tách từng email bằng dấu phẩy.
Nếu bạn muốn tìm hiểu cách gửi email biểu mẫu của mình cho nhiều người hoặc các bộ phận khác nhau, hãy đọc hướng dẫn của chúng tôi về cách tạo biểu mẫu liên hệ với nhiều người nhận.
Tiếp theo, bản sao mặc định cho ‘Dòng chủ đề email’ của bạn là ‘Mục nhập mới: Tên biểu mẫu của bạn’. Tuy nhiên, bạn có thể thay đổi dòng chủ đề theo ý thích miễn là dễ nhận biết.
Người dùng gửi biểu mẫu sẽ nhận được thông báo trong email của họ. Trường 'Từ Tên' cho phép người dùng biết ai gửi email thông báo.
Trường tiếp theo là 'Từ Email' và 'Thẻ thông minh' cho trường này là {admin_email}.
Với cài đặt mặc định này, người dùng sẽ nhận được email thông báo từ email quản trị viên trang web của bạn.
Phần được đánh dấu cho bạn biết rằng địa chỉ email quản trị viên trang web của bạn nằm trên một miền khác, ví dụ: @gmail.com. Điều này có thể dẫn đến các vấn đề về khả năng gửi, chẳng hạn như email nằm trong hộp 'Thư rác'.
Bạn có thể đọc hướng dẫn của chúng tôi về cách thiết lập WP Mail SMTP để đảm bảo rằng email của bạn sẽ đến được hộp thư đến của người đọc.
Đối với mỗi email thông báo được gửi đi, người nhận cũng có tùy chọn trả lời email đó.
Trong trường 'Trả lời', bạn có thể đặt địa chỉ email nào sẽ nhận được phản hồi của người dùng. 'Thẻ thông minh' của trường này là {field_id= “1”}. Điều đó có nghĩa là thư trả lời của người dùng sẽ được gửi đến cùng một địa chỉ email với địa chỉ trong trường ‘Từ Email’.
Cuối cùng, trường 'Thông báo email' có 'Thẻ thông minh' {all_fields}. Vì vậy, thông báo email của bạn sẽ chứa các trường biểu mẫu cùng với phản hồi của người dùng.
Sau khi bạn hoàn tất việc tùy chỉnh thông báo của mình, hãy điều hướng đến 'Xác nhận'. Trong phần này, bạn sẽ thiết lập cách hiển thị xác nhận sau khi gửi biểu mẫu.
Trước tiên, bạn có thể chọn 'Tin nhắn', 'Hiển thị trang' hoặc 'Truy cập URL (Chuyển hướng)' làm loại xác nhận của mình.
Nếu bạn chọn 'Thông báo' làm loại xác nhận, bạn sẽ hiển thị thông báo xác nhận để cho người dùng biết bạn đã nhận được nội dung gửi biểu mẫu của họ.
Với loại xác nhận này, bạn có thể chỉnh sửa tin nhắn mặc định cho phù hợp với thương hiệu của mình. Đi tới trường 'Thông báo xác nhận' và nhập thông báo tùy chỉnh của bạn vào hộp văn bản.
Nếu bạn chọn ‘Hiển thị trang’, bạn sẽ cần chọn một trang hiện có trên trang web WordPress của mình. Và nếu bạn chọn ‘Truy cập URL (Chuyển hướng)’, bạn sẽ chèn URL trang.
Trước khi chuyển sang bước tiếp theo, hãy nhấp vào ‘Lưu’ để không bị mất tiến trình của mình.
Khi đã xong, bạn đã sẵn sàng hiển thị biểu mẫu mới trên trang web WordPress của mình.
Bước 6: Nhúng biểu mẫu của bạn vào WordPress
Để hiển thị biểu mẫu mới trên trang web WordPress của bạn, bạn có thể sử dụng trình hướng dẫn ‘Nhúng’ trong trình tạo biểu mẫu WPForms.
Thao tác này sẽ kích hoạt cửa sổ bật lên 'Nhúng vào Trang'. Trên đó, bạn có thể chọn ‘Chọn trang hiện có’ hoặc ‘Tạo trang mới’, tùy theo điều kiện nào phù hợp với bạn.
Trong ví dụ này, hãy bắt đầu với 'Chọn trang hiện có'.
Bước tiếp theo là chọn trang bạn muốn hiển thị biểu mẫu mới của mình.
Chỉ cần nhấp vào menu thả xuống và chọn một trang web hiện có. Khi bạn làm điều đó, hãy nhấp vào 'Let's Go!'.
Sau đó, bạn sẽ được chuyển hướng đến trình chỉnh sửa khối WordPress với hướng dẫn của WPForms.
Bạn có thể nhấp vào nút ‘Xong’ để ẩn các hướng dẫn này.
Từ đây, bạn cần nhấp vào nút ‘+’ để thêm khối WPForms.
Nhập ‘WPForms’ vào thanh tìm kiếm. Sau đó, bạn sẽ thấy khối WPForms trên kết quả tìm kiếm. Nhấn vào đây để thêm nó.
Sau khi thêm khối WPForms, bạn sẽ thấy menu thả xuống trên trang của mình.
Chỉ cần nhấp vào danh sách thả xuống và chọn một biểu mẫu từ danh sách. Hãy chọn 'Biểu mẫu liên hệ' vì đó là biểu mẫu chúng tôi vừa tạo.
Bước 7: Xuất bản biểu mẫu
Trong giai đoạn cuối cùng này, hãy xem trước biểu mẫu trước khi xuất bản để đảm bảo mọi thứ trông hoàn hảo. Trong trình chỉnh sửa khối WordPress, nhấp vào Xem » Xem trước trong tab mới.
Nếu muốn, bạn cũng có thể xem trước biểu mẫu trông như thế nào trên máy tính bảng và thiết bị di động. Tất cả những gì bạn phải làm là nhấp vào Xem » Máy tính bảng hoặc Điện thoại di động » Xem trước trong tab mới.
Cuối cùng, nếu không cần điều chỉnh gì thêm, hãy nhấn 'Cập nhật'.
Chúc mừng! Bạn đã thêm thành công biểu mẫu liên hệ mới với các trường thả xuống trên trang web WordPress của mình.
Đây là giao diện trên trang web demo của chúng tôi:
Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách tạo biểu mẫu WordPress với các trường thả xuống. Tiếp theo, bạn có thể muốn tìm hiểu cách sử dụng biểu mẫu liên hệ để phát triển danh sách email của mình và cách thiết lập theo dõi biểu mẫu trong Google Analytics để tối ưu hóa hiệu suất của biểu mẫu.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.