Image Select Field Element
The Image Select Field Element lets visitors answer a question by clicking pictures instead of reading a list. Each option is an image with an optional label, and the selected image is marked with a colored border. It is added inside a Tirenoa Form (Tirenoa > Forms).
It works well when the choice is easier to see than to describe: a product model, a color or finish, a room layout or a service package. Visitors can pick one option or, if you allow it, several, and each choice is sent with the form as a value you define.
In this article: How To Use · Element Options · Select Image Options · Tips · Related Elements
How To Use The Image Select Field Element
Add the Image Select Field Element to your form, enter the Field Label and the Field Name (lowercase letters, numbers, dashes and underscores only), then add the options. Bulk Image Upload creates one option per selected image in a single step. Set Multiple Select to Yes to allow more than one choice, and Required Field with an Empty Input Notice when an answer is mandatory.
Control the look with Image Width and Image Height, Padding, Border Size and Border Radius. Inactive Image Border Color frames options that are not selected, Active Image Border Color marks the chosen one, and a lighter version of the active color is used on hover. Field Layout places the options side by side (Floated) or one per row (Stacked).
What reaches the form entries and the notification email is each chosen option’s Value, not its image. When the value is empty, the label is used instead, in lowercase with spaces replaced by dashes. With multiple selection the chosen values are listed together under the field label.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this radio image. |
| Bulk Image Upload | This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time. |
| Field Label | Enter the label for the input field. This is how users will identify individual fields. |
| Field Name | Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores. |
| Multiple Select | Allow multiple options to be selected. |
| Required Field | Make a selection to ensure that this field is completed before allowing the user to submit the form. |
| Empty Input Notice | Enter text validation notice that should display if data input is empty. |
| Tooltip Text | The text to display as tooltip hint for the input. |
| Image Width | In pixels (px), for example 10px. |
| Image Height | In pixels (px), for example 10px. |
| Padding | Enter values including any valid CSS unit, for example 10px or 10%. |
| Border Size | Controls the border size of the image options. If left empty will inherit from the form options. |
| Inactive Image Border Color | Set border color for inactive image. |
| Active Image Border Color | Set border color for selected image. |
| Border Radius | Controls the border radius of the image options. In pixels. |
| Field Layout | Make a selection for field layout. Floated will have them side by side. Stacked will have one per row. |
| Tab Index | Tab index for the form field. |
| CSS Class | Add a class for the form field. |
| CSS ID | Add an ID for the form field. |
Conditionals
| Heading | Description |
|---|---|
| Conditional Logic | Add conditional logic for the input field. |
Select Image Options
Each Select Image item is one option. Choose the Image, write the Label shown with it, set the Value that is sent with the form, and use Initial State to have it selected when the page loads.
General
| Heading | Description |
|---|---|
| Image | Upload an image to display. |
| Label | Enter the label for the input field. This is how users will identify individual fields. |
| Value | Enter the field value. |
| Initial State | Make a selection to ensure that this field is completed before allowing the user to submit the form. |
Tips
- Fill in a clear Value for every option, such as a model name. Staff read the value in the email, not the picture.
- Options show the full-size image. Upload images close to the size you display them at to keep the form fast.
- Set the alternative text of each image in the media library. The option label and that text help visitors who use a screen reader.
- Border Size falls back to the form’s own settings when you leave it empty.
- Use Initial State on one option to pre-select the most common choice.