1. Introduction
Image Picker for Elementor Forms is an addon for Elementor Pro Forms that allows you to replace plain text options with image choices.
Users can select by clicking images instead of standard radio buttons, checkboxes, or select dropdowns.
You still receive clean, structured values in your form submissions.
Best suited for:
- Product variations (colors, sizes, styles, etc.)
- Service selection with images
- Polls and surveys
- Any form where images improve the user experience
Table of contents:
2. Installation
- Download the plugin and upload it to /wp-content/plugins/.
- Go to WordPress Admin → Plugins and activate the plugin.
- Edit any form using Elementor Pro.
3. How to Use
Step 1: Add an Image Picker Field
- Edit your form with Elementor Pro.
- Add a new field with type Image Picker.
- In the Type dropdown, choose one of the built-in field types:
- Select
- Radio
- Checkbox
Step 2: Add Your Options
Under the Options panel, click + Add Option and fill in the details for each image:
- Label: The name shown under each image (e.g. “Apple”).
- Value: The value saved in submissions (e.g. “fuit_apple”).
- Image: Upload or select an image from your Media Library.
💡 Tip: Use high-quality, evenly sized images (around 400×400px) for the best alignment.
Step 3: Choose a theme
Scroll down to the Theme dropdown to control how your images are displayed.
Each theme changes the layout and animation style:
If the field type is Select, the style is fixed to Dropdown Image (default).
If the field type is Radio or Checkbox, you can select any style: Simple, Card, Circle, Polar, Box, Cover, Luna.
Simple → plain image options with border on selection.
Card → each image inside a card with a check icon.
Circle → circular images with 10px border and centered check icon.
Polar → image, text, and icon aligned horizontally.
Box → image and text in a boxed layout with borders.
Cover → full cover image with check icon overlay at the bottom.
Luna → modern box style with text and highlight border.
Step 4: Adjust Layout
To make the picker responsive across devices, adjust column settings:
| Setting | Recommended |
|---|---|
| Large device column | 4 |
| Medium device column | 3 |
| Small device column | 2 |
| Column width | 100% |
You can adjust these numbers to control how many options appear per row.
Step 5: Set a Default Value (Optional)
If you want an image to be pre-selected when the form loads: Scroll to the Default field and select one of your value of option (e.g. “fruit_apple”).
Step 6 — Preview and Test
Click Update → then preview the form.
You’ll now see your visual selection field — each option is clickable, and the selected image will be highlighted based on your chosen theme.
Try submitting the form — the label or value you defined will appear in the form data.
