When visitors come to your page or form, they can get easily distracted. It is in human nature. This comes to the fact of how important are visuals on your forms. According to neilpatel.com, visuals lead to more engagement and that means more leads. Adding image choices in your WordPress forms is an excellent idea to spice up your product order forms, online quizzes, polls, or other types of your forms.
Luckily, Ninja Forms offer a Select Image Field that lets you upload images to your form field! This helps you enhance user engagement and add excitement to your form which leads to a lower form abandonment rate.
So what do you say? Are you ready to perk up your WordPress forms and learn how you can add image choices to your form with ease? Let’s get started!
Table of Contents
1. What is a Select Image Field?
The Select Image field is a form field that presents images as selectable list options. You can use any image from your Media Library as a list option. Users can make a single selection or multiple selections depending on their settings.
You can add a select image field to your form by clicking the blue plus icon on your form builder. This will open the list of available form fields. This field is located under the Common Fields section.
General Select Image Field Settings
After you add your Select Image Field to your form, you can see various settings. You can rename or hide the Label name, mark this field as required, set up your image option settings, change the orientation of your list, allow multiple selections, or select the number of columns. Additionally, you can include help text or add a description to the field.
Label
If you don’t want to display the Label of each image option, you can toggle off the Show Labels button or you can delete the names from each Label.
Value & Calc Value
When you add image choices in WordPress Forms and you want to use Conditional Logic, it is very important you don’t forget to fill out the Value of each image option. The same applies when you are using our free Calculations feature. You need to fill out the calculation value (Calc Value) otherwise, you will not get the correct calculation.
Image
If you would like to add an additional select image list option, you can click Add New. To select an image from your Media Library that will display for this list option, click the Media Library icon. Once you upload your images or icons to this field, the Label and Value of the field will be automatically populated with the name of your file.
Image display options
The option to allow multiple selections gives you the ability to allow users to select more than one option on your form. You can also easily change the orientation of your list field to vertical or horizontal.
Number of columns
When Horizontal orientation is selected, this number determines the maximum number of columns the field will display images in. Depending on screen size (how much room actually exists to display from left to right) the field may display fewer columns than this setting.
Check column
Whichever list option is checked next to Calc Value, it will display as the default option to the user.
Help text
If you want to give a piece of extra information to your user for this specific field, you can use the Help text option. It will display as an information icon next to the field label and once a user hovers over the icon, it will show the additional text.
Description text
The Description text option lets you include additional text to the Select Image field and will display by default below the form field.
2. When to use the Select Image field?
Select Image field lets you be creative on your forms and make the list options more appealing to your users. A very popular way to use the Select Image field is if you are a restaurant that provides bookings for a specific part of the day (breakfast, lunch, dinner). You can include the icons rather than just displaying a vague list of options. If you are a company that offers language courses, you can run fun quizzes including image options that make the form more engaging and interactive. If you sell your products online, including visuals in your list selection is a must.
Another popular way to use the Select Image field is on your payment form as an example below:
Whether you offer only one or multiple payment options on your form, showing the credit card icons and other payment option icons makes people feel more secure and confident about their purchase. If you would like to offer multiple payment options that lead to higher conversions, you’ll want the Conditional Logic add-on. This extension will allow you to display dynamic data based on users’ selection on their form.
Another good reason to display the payment method with images is demographics. Some credit cards are not offered in specific countries. Displaying the familiar payment icons helps users to see what type of payment is accepted on your WordPress website.
3. Give the Select Image field style
The general Select Image field settings provide multiple ways to easily style the field without the use of any styling plugin. You can change the number of columns you want to display the list selection, you can change orientation to vertical or horizontal, and you even have the option to define custom class names for the container and element.
However, if you want to take the styling of the Select Image field further including font size, text color, background, border, and much more, you can use our Layout and Styles add-on. Once installed, you will see the Styling settings available that let you further customize this list field. You can also enter your own CSS rules.
The Layout & Styles add-on gives you options to style your Select Image Field per individual form or globally across all forms. If you want to make changes in your Select Image field across all your forms, you want to navigate to Ninja Forms > Styling > Field Type Styles > Select Image. Any styling changes you make here will affect all your existing forms and any future forms you’ll create. You also want to make sure that Opinionated Styles are set to None under the Ninja Forms > Settings.
If you want to make styling changes on a specific form, you do that by navigating to Ninja Forms Dashboard and selecting the specific form > Select Image field > Styles.
Want to learn more about how to style your WordPress forms? Check our deep-dive guides to form styling: How To Style Your WordPress Forms (Easy Examples) or How to Customize WordPress Forms (Font Styling).
Perk up your forms with the Select Image field on your WordPress form!
That’s it! You’ve just learned a great way how you can spice up your WordPress forms using our Select Image field! Adding image choices to your forms is super easy. You don’t need to have premium Ninja Forms to use this field. Unlike our competitors, this field is free to use by any Ninja Forms user.
The Select Image field can be styled easily without the styling plugin but if you would like to take the styling further, you can unlock additional styling options with our Layout and Styles add-on!
Want to learn more about our form fields Ninja Forms offers? Make sure to check our documentation on Field Types that will walk you through all our existing form fields!
Did you enjoy reading this blog post? If so, sign up for our newsletter below so you never miss any fresh content! It’s free so what do you have to lose?
Margaret says:
I want user to choose only 5 images from a set of 20 images, How I can add this condition in image select field ?
Shaylee Hansen says:
👋 Margaret,
Our Select Image field does not include an image restriction feature at this time. You can, however, use Conditional Logic to hide or show the forms Submit button based on how many images the user selected. To do so, first, add a calc value to the image option. Next, add the Select Image field to the Calculations section of your form. After that, set up Conditional Logic to evaluate the Calculation total to determine whether or not to hide the Submit field. For further assistance, please reach out to our customer support team: https://ninjaforms.com/contact.