Easily add an Image Radio Field in your Elementor forms using Cool FormKit for more visual and engaging user input options.
What is Image Radio?
An Image Radio Field allows users to select an option by clicking on an image instead of plain text. It behaves like a standard radio button; only one selection is allowed, but each option is represented visually.
Enable Image Radio
* Firstly, make sure you have “Turned on“ the image radio field feature in the WordPress Admin Panel >> Elementor >> Cool FormKit >> Form Elements Tab.
- Navigate to the Content section of your Form Field. From the Field Type dropdown, select Image Radio Field.
Customization
Once you’ve added the image radio field, you can customize it by using the following options:
- Field Type: Choose between Radio (single selection) or Checkbox (multiple selections).
- Choose Style: Select vertical or horizontal style for the image radio according to your requirements.
- Label/Value: Set a custom label (display text) and value (submitted data) for each image radio item.
- Image/Icon: Upload an image or select an icon to visually represent each option.
To add more choices, click the “Add Item” button.
To customize the image radio in your Elementor form, go to the advanced section and use the following settings:
- Selected Border color: Changes the border color when input is selected.
- Selected Background color: Define the background color of a selected item.
- Selected Text color: Sets the text color of input fields that will change during selection.
- Hover Border color: Adjust the border color when users hover over an option.
- Image/Icon size: Increase or decrease the size of images or Icons.
- Gap between fields: Adjust the gap between fields using this setting.
- Min Width: Set the minimum width of checkboxes or radio.
- Padding: Adjust the space between the content (such as text or images) and the element’s border.
That’s it with these customization options, you can easily implement visually appealing and intuitive image-based selections.