Hướng dẫn cách chèn tính năng chọn hình ảnh vào Form trong WordPress

Gần đây độc giả đã đặt câu hỏi cho chúng tôi về cách thêm tính năng chọn hình ảnh vào form WordPress của họ.

Thay vì chỉ hiển thị các lựa chọn văn bản, việc lựa chọn bằng hình ảnh làm cho form của bạn trông bắt mắt thu hút hơn. Tính năng này có thể cải thiện tỷ lệ phản hồi của bạn và tỉ lệ chuyển đổi người dùng.

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

Tính năng chọn hình ảnh là gì? Tại sao nên dùng tính năng này vào Form của Bạn?

Tính năng 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ó thể chọn khi tạo form.

Dưới đây là form demo chúng tôi đã sử dụng các tính năng chọn hình ảnh. Thay vì các dòng chữ đơn điệu, chúng tôi đã chèn vào mỗi tuỳ chọn là hình ảnh mô tả đi kèm nhìn cũng rất là này nọ đấy chứ :

Tính năng chọn hình ảnh mang lợi rất nhiều lợi ích nếu được dùng đúng cách. Trong mọi trường hợp, tính năng này sẽ cho phép bạn làm cho form của mình trở nên hấp dẫn và thu hút hơn cho người xem.

Sử dụng tính năng chọn hình ảnh cũng có thể giúp form của bạn trông bóng bẩy và chuyên nghiệp cool ngầu 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 hoặc ăn uống, bạn sẽ cần một form đặt hàng tiếp đó là sử dụng hình ảnh các món ăn khác nhau để giúp khách hàng chọn món họ muốn. Việc có thêm hình ảnh đính kèm cũng sẽ giúp cho các thực khách hoặc khách hàng lựa chọn nhanh hơn rất nhiều, giúp tiết kiệm được thời gian.

Bên cạnh đó tính năng chọn hình ảnh sẽ giúp người đọc điền vào form của bạn dễ dàng hơn, đặc biệt là đối với những gặp khó khăn khi đọc hoặc người không biết ngôn ngữ của nước bạn.

Video Hướng Dẫn

Trên đây là video hướng dẫn, nếu bạn không thích video hay vẫn chưa hiểu cách làm thì bạn có thể xem bài viết bên dưới của chúng tôi nhé.

Thêm tính năng chọn hình ảnh vào form WordPress của bạn

Với bài hướng dẫn này, chúng tôi sẽ sử dụng plugin WPForms. Đây là plugin trình tạo form WordPress tốt nhất trên thị trường và cho phép bạn dễ dàng tạo form bằng cách sử dụng giao diện 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.

WPForms là một plugin WordPress cao cấp. Có phiên bản miễn phí có tên WPForms Lite, cũng có tính năng tính năng chọn hình ảnh đi kèm.

Tạo form với WPForms

Khi kích hoạt plugin, truy cập trang WPForms » Add Form trong dashboardWordPress để tạo form mới.

Trước tiên, điền tên cho form của bạn và sau đó chọn template. Chúng tôi sẽ sử dụng Simple Contact Form làm điểm khởi đầu.

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

Tiếp theo, chúng tôi sẽ thêm vào trường multiple choice để 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 Checkboxes . Sử dụng tùy chọn này 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 Multiple Choice từ phần Standard Fields ở phía bên trái của màn hình. Chúng tôi sẽ đặt ngay phía trên hộp Comment or Message.

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

Tại đây, bạn chỉ cần tích vào ô Use image choices và WPForms sẽ tự động cập nhật trường đó cho bạn.

Bạn có thể nhập bất kỳ thứ gì bạn muốn và sau đó nhấp vào nút Upload Image. Bạn có thể tải lên 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 media WordPress.

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 nếu chúng có kích thước này.

Quan trọng: WPForms sẽ không thay đổi kích thước hình ảnh của bạn. Bạn 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 trong chính WordPress trước khi thêm vào form của bạn.

Nếu bạn có nhiều hơn 3 tùy chọn, 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 đó đi.

Thay đổi cách chọn hình ảnh hiển thị trên form 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 Advanced Options.

Bạn có thể chọn hộp Randomize Choices 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 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.

Trong Image Choice Style, bạn có thể tạo kiểu cho hình ảnh của mình. Kiểu mặc định là Modern, trông giống như hình dưới với tùy chọn Strawberries được chọn:

Thay vào đó, bạn có thể chọn kiểu Classic, nó sẽ trông như này khi tùy chọn Strawberries được chọn:

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

Nếu muốn, bạn cũng có thể thay đổi cách bố trí các lựa chọn bằng cách sử dụng menu dropdown Choice Layout. Giá trị mặc định sẽ là Inline với các lựa chọn xuất hiện bên cạnh nhau cho đến khi 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 theo hình dọc, chỉ cần chọn One Column từ menu dropdown. Lựa chọn hình ảnh của bạn sau đó sẽ giống như sau:

Cũng có tùy chọn Hide Label. Lựa chọn này sẽ không có bất kỳ văn bản nào bên dưới hình ảnh. Ví dụ: bạn có thể yêu cầu mọi người bình chọn 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 nhãn có liên quan chút. Đ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 đối với người dùng khiếm thị.

Thêm, Sửa Xóa trường trên Form của bạn

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

Ví dụ: bạn muốn thay đổi trường Comment or Message 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 ở bên trái màn hình

Chỉ cần nhập nhãn bạn muốn sử dụng và bỏ tích ô Required để đặt trường này là tùy chọn.

Để 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 đỏ.

Khi đã tạo xong form, hãy nhấp vào nút Save ở đầu màn hình.

Thêm form của bạn vào trang web của bạn

Bạn có thể thêm form 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.

Đi tới Pages » Add New, sau đó nhấp vào nút (+) để thêm block vào trang của bạn.

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

Tiếp theo, nhấp vào menu thả xuống Select a Form và nhấp vào tên form của bạn để chọn.

Bây giờ bạn đã sẵn sàng xuất trang của mình. Và đây là giao diện demo của chúng tôi:

Nếu bạn muốn thay đổi form, bạn có thể tìm form trong WPForms » All Forms các form trong dashboard. Khi lưu các thay đổi, form 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 qua bài hướng dẫn này đã giúp bạn hiểu được cách thêm tính năng chọn ảnh trong form WordPress. Bạn cũng có thể tham khảo bài  hướng dẫn về cách tạo khảo sát trong WordPress và so sánh về các plugin tạo trang WordPress tốt nhất tại đây.

Nếu thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook để cập nhật các thông tin mới nhất từ cunghocwp.com

Chúc các bạn thành công!