Image Select Field Element

30/03/2021

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.

The Image Select Field Element allows you to add a range of images to your form, that a user can then select from. You can add multiple images, control their size, allow users to select multiple or just a single image, have certain image pre-selected etc. There are many possible uses for this Element.

View Element Demo Page!

Overview

How To Use The Image Select Field Element

The Image Select Field Element allows you to add a range of images to your form, that a user can then select from.

Step 1. Create a new, or edit and existing Form in the Avada Form Builder.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Image Select Field from the Form Elements tab.

Step 4. Go through the options to populate and configure your Image Select Field Element. There is a Child tab, where you add the images, and a Parent tab to set options. You can bulk upload images, set a label and a name, allow multiple selection of images, make the field required, add a tooltip, specify the size of the images, their padding and border size, as well as the inactive and active border color and radius, and whether your options are to be displayed stacked or floated.

Step 5. Once you have configured the Element, save your page.

Read below for a description of all element options.

Avada Website Builder

688,540 Businesses Trust Avada

Get Avada
Avada Website Builder

688,540 Businesses Trust Avada

Get Avada
Avada Website Builder

688,540 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).

You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.

General Options

  • 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. Should be single word without spaces. Underscores and dashes are allowed.

  • Multiple Select – Allow multiple options to be selected. Select from Yes, or No.

  • Required Field – Choose from Yes, or No. Make a selection to ensure that this field is completed before allowing the user to submit the form.

  • Tooltip Text – The text to display as tooltip hint for the input.

  • Image Width – In pixels (px), ex: 10px.

  • Image Height – In pixels (px), ex: 10px.

  • Padding – Enter values including any valid CSS unit, ex: 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. Leave empty for default value.
  • Active Image Border Color – Set border color for selected image. Leave empty for default value.

  • Border Radius – Controls the border radius of the image options. In pixels.

  • Field Layout – Choose from Stacked, or Floated. Choose if fields should be stacked and full width, or if they should be floated.

  • Tab Index – Tab index for this input field.

  • CSS Class – Allows you to add a class to the wrapping HTML.

  • CSS ID – Allows you to add an ID to the wrapping HTML.

View The Options Screen

Child Options

  • 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. Choose from Checked, or Unchecked.

View The Options Screen

Conditionals Tab

  • Conditional Logic – Add conditional logic for the input field. Please see the Conditional Logic In Avada Forms document for more information on how to use this feature.
View The Options Screen

Global Options

There are no Global Options for Form Builder Elements.

Avada Website Builder

688,540 Businesses Trust Avada

Get Avada
Avada Website Builder

688,540 Businesses Trust Avada

Get Avada
Avada Website Builder

688,540 Businesses Trust Avada

Get Avada