Rating Field Element

Last Update: January 7, 2024

The Rating Field Element is used to rate something between a set minimum and maximum number of stars (or other icon). You can see an example of this Element in use in the Survey Prebuilt Form.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Rating Field Element

The Rating Field Element allows you to place ratings into your forms.

To start, just add the element into your desired column in a Form Layout.

Go through the options to populate and configure the Element. The Rating Limit can be between 1 and 10, and you can choose which icon and colors you wish to use, as well as the Icon Font Size.

Read below for a description of all element options.

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

HeadingDescription
Field LabelEnter the label for the input field. This is how users will identify individual fields.
Field NameEnter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores.
Required FieldMake a selection to ensure that this field is completed before allowing the user to submit the form.
Empty Input NoticeEnter text validation notice that should display if data input is empty.
Tooltip TextThe text to display as tooltip hint for the input.
Rating LimitSet the maximum rating that can be given.
Rating IconChoose icon for rating.
Icon ColorChoose icon color for rating.
Icon Font SizeControls the size of the icon. Enter value including any valid CSS unit, ex: 20px.
CSS ClassAdd a class for the input field.
CSS IDAdd an ID for the input field.

Conditionals

HeadingDescription
Conditional LogicAdd conditional logic for the input field.