Cách thêm lựa chọn hình ảnh trong biểu mẫu WordPress (Tăng tương tác)

Gần đây, một độc giả đã hỏi chúng tôi về cách thêm các lựa chọn hình ảnh vào biểu mẫu WordPress của họ. Có lẽ đây cũng là điều bạn băn khoăn.

Other :

Thay vì chỉ hiển thị các lựa chọn văn bản, hình ảnh có thể ngay lập tức làm cho biểu mẫu của bạn hấp dẫn hơn. Điều này có thể giúp cải thiện tỷ lệ phản hồi của bạn và hình thành chuyển đổi.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm các lựa chọn hình ảnh trong các biểu mẫu WordPress để tăng mức độ tương tác và chuyển đổi.

How to easily add image choices in a WordPress form

Lựa chọn Hình ảnh là gì và Tại sao Sử dụng Chúng trong Biểu mẫu của Bạn?

Lựa chọn hình ảnh là ảnh, hình minh họa, đồ họa hoặc biểu tượng mà người dùng của bạn có thể chọn giữa khi hoàn thành biểu mẫu của bạn.

Đây là một biểu mẫu sử dụng các lựa chọn hình ảnh, thay vì các tùy chọn văn bản thông thường. Lựa chọn đầu tiên, Dâu tây, đã được chọn:

An example of image choices in use in a form: shows colorful images for 6 fruit options

Lựa chọn hình ảnh có thể là một lợi thế theo nhiều cách. Trong mọi trường hợp, chúng cho phép bạn làm cho biểu mẫu của mình trở nên hấp dẫn và thu hút hơn về mặt hình ảnh.

Sử dụng hình ảnh cũng có thể giúp biểu mẫu của bạn trông bóng bẩy và chuyên nghiệp hơn. Họ cũng có thể giúp người dùng quyết định nhanh hơn.

Ví dụ: nếu bạn điều hành một nhà hàng cung cấp dịch vụ giao hàng, bạn sẽ muốn có một mẫu đơn đặt hàng trên trang web của mình. Bạn có thể sử dụng hình ảnh các món ăn khác nhau của mình để giúp khách hàng tiềm năng chọn món họ muốn.

Lựa chọn hình ảnh có thể giúp người đọc điền vào biểu mẫu của bạn dễ dàng hơn, đặc biệt là đối với những khán giả gặp khó khăn khi đọc hoặc người không thông thạo ngôn ngữ của bạn.

Đăng ký WPBeginner

Nếu bạn muốn hướng dẫn bằng văn bản, chỉ cần tiếp tục đọc.

Thêm lựa chọn hình ảnh vào biểu mẫu WordPress của bạn

Đối với hướng dẫn này, chúng tôi sẽ sử dụng plugin WPForms. Đây là plugin tạo biểu mẫu WordPress tốt nhất trên thị trường và cho phép bạn dễ dàng tạo biểu mẫu bằng cách sử dụng trình tạo biểu mẫu kéo và thả đơn giản.

Trước tiên, bạn cần cài đặt và kích hoạt plugin WPForms. Nếu bạn không chắc chắn về cách thực hiện điều đó, bạn có thể xem hướng dẫn từng bước trong hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

WPForms là một plugin WordPress cao cấp. Họ cũng cung cấp một phiên bản miễn phí có tên là WPForms Lite, cũng có tính năng lựa chọn hình ảnh.

Tạo biểu mẫu của bạn với WPForms

Khi bạn đã kích hoạt plugin, hãy truy cập trang WPForms »Thêm biểu mẫu trong bảng điều khiển WordPress của bạn để tạo biểu mẫu mới.

Creating a new form using WPForms

Trước tiên, hãy cung cấp tên cho biểu mẫu của bạn và sau đó bấm để chọn một mẫu. Chúng tôi sẽ sử dụng Biểu mẫu liên hệ đơn giản làm điểm khởi đầu.

Use the Simple Contact Form template

Thao tác này sẽ khởi chạy giao diện trình tạo WPForms với các trường biểu mẫu được tải trước. Bạn có thể chỉnh sửa bất kỳ trường biểu mẫu nào bằng cách nhấp vào nó, di chuyển nó lên và xuống hoặc xóa nó.

The default form created using WPForms' Contact Form template

Tiếp theo, chúng tôi sẽ thêm vào một trường trắc nghiệm để khách hàng có thể chọn loại trái cây họ muốn.

Lưu ý: Các lựa chọn hình ảnh cũng hoạt động với trường Hộp kiểm. Sử dụng tùy chọn đó nếu bạn muốn người dùng của mình có thể chọn nhiều tùy chọn.

Để thêm trường, chỉ cần kéo và thả trường Nhiều Lựa chọn từ phần Trường Chuẩn ở phía bên trái màn hình của bạn. Chúng tôi sẽ đặt nó ngay phía trên hộp ‘Nhận xét hoặc Tin nhắn’.

Adding a multiple choice field to your form

Như bạn có thể thấy, trường trắc nghiệm có các tùy chọn văn bản theo mặc định. Nếu bạn nhấp vào trường để chỉnh sửa nó, bạn sẽ thấy các tùy chọn trường ở phía bên trái của màn hình.

Editing the multiple choice field for your form

Ở đây, bạn chỉ cần chọn hộp ‘Sử dụng lựa chọn hình ảnh’ và WPForms sẽ tự động cập nhật trường.

The 'Use image choices' option in WPForms

Bạn có thể nhập bất cứ thứ gì bạn muốn cho nhãn văn bản của trường và sau đó nhấp vào nút ‘Tải lên Hình ảnh’. Bạn có thể tải lên một hình ảnh từ máy tính của mình hoặc chọn một hình ảnh từ thư viện phương tiện WordPress.

Uploading images for the different choices on your form

Chúng tôi khuyên bạn nên sử dụng hình ảnh .jpg hoặc .png không quá 250px x 250px. Hình ảnh của bạn sẽ trông đẹp nhất ở dạng của bạn nếu chúng có cùng kích thước.

Quan trọng: WPForms sẽ không thay đổi kích thước hình ảnh của bạn. Bạn sẽ cần đảm bảo rằng chúng có kích thước như bạn muốn trước khi tải chúng lên. Ngoài ra, bạn có thể chỉnh sửa hình ảnh của mình trong chính WordPress trước khi thêm chúng vào biểu mẫu của bạn.

Nếu bạn có nhiều hơn 3 tùy chọn để bao gồm, chỉ cần nhấp vào nút (+) để thêm lựa chọn mới. Bạn có thể sử dụng nút (-) để xóa lựa chọn.

Adding more multiple choice options to your form

Thay đổi cách lựa chọn hình ảnh của bạn hiển thị trên biểu mẫu của bạn

WPForms giúp bạn dễ dàng thay đổi bố cục lựa chọn hình ảnh và các cài đặt khác từ tab ‘Tùy chọn nâng cao’.

Open up the Advanced Options to fine-tune how your images display

Bạn có thể chọn hộp ‘Lựa chọn ngẫu nhiên’ nếu bạn muốn hiển thị các lựa chọn hình ảnh của mình một cách ngẫu nhiên, thay vì theo một thứ tự cụ thể. Điều này hữu ích nếu bạn đang tạo một cuộc khảo sát và bạn muốn loại bỏ sự thiên vị lựa chọn đầu tiên trong kết quả.

Trong ‘Kiểu lựa chọn hình ảnh’, bạn có thể chọn cách bạn muốn tạo kiểu cho hình ảnh của mình. Kiểu mặc định là Hiện đại, trông giống như thế này với tùy chọn Dâu tây được chọn:

The image choices with the default Modern style applied

Thay vào đó, bạn có thể chọn kiểu Cổ điển, trông giống như thế này khi tùy chọn Dâu tây được chọn:

The image choices with the Classic style applied (thicker border, no shadow, no bold text, no checkmark)

Ngoài ra, bạn có thể chọn ‘Không có’ cho kiểu này. Trong trường hợp này, hình ảnh của bạn sẽ chỉ là hình ảnh thông thường không có đường viền hoặc kiểu dáng khác. Các nhãn sẽ được hiển thị bằng các nút radio.

The image choices with no styling

Nếu muốn, bạn cũng có thể thay đổi cách sắp xếp các lựa chọn của mình bằng cách sử dụng menu thả xuống ‘Bố cục Lựa chọn’. Giá trị mặc định là ‘Nội tuyến’ với các lựa chọn của bạn xuất hiện bên cạnh nhau cho đến khi chúng chuyển sang một dòng mới.

Thay vào đó, bạn có thể chọn hiển thị các lựa chọn của mình trong một số cột. Nếu bạn muốn có một danh sách dọc, chỉ cần chọn ‘Một cột’ từ menu thả xuống. Lựa chọn hình ảnh của bạn sau đó sẽ giống như sau:

Image choices in a single vertical column

Ở đây cũng có tùy chọn ‘Ẩn Nhãn’ cho các lựa chọn hình ảnh của bạn. Điều này có nghĩa là sẽ không có bất kỳ văn bản nào bên dưới hình ảnh. Trong một số trường hợp, có thể hợp lý khi làm điều này. Ví dụ: bạn có thể yêu cầu mọi người bỏ phiếu cho thiết kế logo mới mà họ thích nhất.

Tuy nhiên, hãy đảm bảo rằng bạn nhập một nhãn có liên quan và hữu ích nếu có thể. Điều này sẽ được hiển thị dưới dạng văn bản thay thế cho hình ảnh của bạn, giúp trang web của bạn dễ tiếp cận hơn với người dùng khiếm thị.

Thêm, Xóa hoặc Chỉnh sửa Trường trên Biểu mẫu của bạn

Bạn có thể thêm, bớt hoặc chỉnh sửa các trường trên biểu mẫu của mình. Để chỉnh sửa một trường, chỉ cần nhấp vào nó.

Ví dụ: bạn có thể muốn thay đổi trường ‘Nhận xét hoặc Tin nhắn’ thành tùy chọn và có một nhãn khác. Sau khi bạn nhấp vào trường, bạn có thể chỉnh sửa nó ở phía bên trái của màn hình.

Chỉ cần nhập nhãn bạn muốn sử dụng và bỏ chọn hộp ‘Bắt buộc’ để làm trường tùy chọn.

Editing the 'Comment or Message' field in WPForms

Để xóa một trường, hãy chạy con trỏ qua trường đó rồi nhấp vào biểu tượng thùng rác màu đỏ.

Deleting a field in WPForms

Khi bạn hài lòng với biểu mẫu của mình, hãy nhấp vào nút ‘Lưu’ ở đầu màn hình.

Thêm biểu mẫu của bạn vào trang web của bạn

Bạn có thể thêm biểu mẫu của mình vào bất kỳ bài đăng hoặc trang nào trên trang web của mình chỉ với một vài cú nhấp chuột. Chúng tôi sẽ tạo một trang mới cho trang của chúng tôi.

Đi tới Trang »Thêm mới , sau đó nhấp vào nút (+) để thêm khối vào trang của bạn.

Tìm khối WPForms trong phần Widget hoặc tìm kiếm nó bằng thanh tìm kiếm. Sau đó, chỉ cần nhấp vào khối để thêm nó vào trang của bạn.

Adding the WPForms block to your page or post

Tiếp theo, nhấp vào menu thả xuống ‘Chọn một biểu mẫu’ và nhấp vào tên biểu mẫu của bạn để chọn nó. Chúng tôi đang sử dụng mẫu đơn đặt hàng hộp trái cây của chúng tôi tại đây.

Selecting the form you want from the WPForms dropdown

Bây giờ bạn đã sẵn sàng xuất bản trang của mình và xem biểu mẫu trực tiếp trên trang web của bạn. Đây là giao diện của chúng tôi:

The finished image choices in the form

Nếu bạn muốn thực hiện các thay đổi đối với biểu mẫu của mình, bạn có thể tìm thấy nó trong WPForms »Tất cả các biểu mẫu trong trang tổng quan của bạn. Khi bạn đã lưu các thay đổi của mình, biểu mẫu của bạn cũng sẽ tự động được cập nhật trên trang của bạn.

Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách thêm các lựa chọn hình ảnh trong các biểu mẫu WordPress. Bạn cũng có thể thích hướng dẫn của chúng tôi về cách tạo khảo sát trong WordPress và so sánh của chúng tôi về các plugin tạo trang WordPress tốt nhất.

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 các 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.

Free Download Cách thêm lựa chọn hình ảnh trong biểu mẫu WordPress (Tăng tương tác) :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress