---
title: "Add Image Radio Field"
url: https://docs.coolplugins.net/doc/add-image-radio-field/
date: 2025-06-02
modified: 2026-03-02
author: "Satinder Singh"
description: "Easily add an Image Radio Field in your Elementor forms using Cool FormKit for more visual and engaging user input options. https://youtu.be/-9jkjUQha1c What is Image Radio? An Image Radio Field..."
categories:
  - "Cool FormKit for Elementor"
word_count: 302
---

# Add Image Radio Field

Easily add an **Image Radio Field** in your Elementor forms using **Cool FormKit** for more visual and engaging user input options.

https://youtu.be/-9jkjUQha1c

## What is Image Radio?

An **[Image Radio Field](https://coolformkit.com/features/image-radio-for-elementor-form/)** 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**.

[![image radio field type](https://docs.coolplugins.net/wp-content/uploads/2025/06/image-radio-field-type.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/06/image-radio-field-type.jpg)

## Customization

Once you’ve added the image radio field, you can customize it by using the following options:

[![image radio customization](https://docs.coolplugins.net/wp-content/uploads/2025/06/image-radio-customization.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/06/image-radio-customization.jpg)

- **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:

[![image radio advanced settings](https://docs.coolplugins.net/wp-content/uploads/2025/06/image-radio-advanced-settings.jpg)](https://docs.coolplugins.net/wp-content/uploads/2025/06/image-radio-advanced-settings.jpg)

- **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.