Form Elements – Avada Website Builder

Form Step Element

Geoff — Fri, 15 Dec 2023 00:46:26 +0000

The Form Step Element is one of three Special Item Elements that have very specific jobs. You will find this Element on the Special tab when adding a Container while editing an Avada Form.

See the How To Make A Multi-Step Form Doc

Add A Form Step

To add a Form Step, add a Container to the Builder directly after the container with your initial form content, and navigate to the Special tab. Here, you see the Form Step Element. This adds the step to your Form.

There is nothing to configure with this special Item; just give it a title, and an icon if you wish.

For full details of how to create a Multi-step form using the Form Step Element, see the video below.

For privacy reasons YouTube needs your permission to be loaded.

Consent Field Element

Geoff — Thu, 02 Feb 2023 19:17:22 +0000

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

The Consent Field Element allows you to add a Consent field to your Avada Forms. This can be implicit, or approved with a checkbox. Read on to see the details of this useful Form Element.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Consent Field Element

The Consent Field Element allows you add a consent checkbox (or it can be implicit) to your forms. To start, add the element into your desried column in a Form Layout.

Go through the options to populate and configure your consent field. Add a label and a name, decide if it is to be a required field, add optional placeholder, tooltip text, and description.

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

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
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.
Tooltip Text		The text to display as tooltip hint for the input.
Consent Type		Select if you would like an explicit checkbox consent or implicit consent.
Default State		Select if the checkbox should be checked by default or unchecked.
Required Field		If the field is required, it can only be submitted if this field is checked.
Description		Enter a description for what the consent is for.
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.

Honeypot Field Element

Geoff — Mon, 18 Oct 2021 22:31:33 +0000

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

The Honeypot Field Element is a security Element you can add to your Avada Form. A honeypot is a field added to the form that the users can’t see (due to CSS or JavaScript which hides the field). Basically, if a spambot fills in a field that valid users can’t see, this alerts us to their activity. So if the honeypot field is filled in, we can confidently reject the form as spam.

How To Use The Honeypot Field Element

This Element is about as easy to use as it gets. Simply add the Element to your form, and if the field is filled in (by a bot), then the submit button won’t be displayed on the front end. You only need to add one Honeypot Element in a Form, and this Element can also work in conjunction with the reCAPTCHA Field Element.

Element Options

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.

Heading		Description
Field Name		Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores.
CSS Class		Add a class for the form field.
CSS ID		Add an ID for the form field.

Textarea Field Element

Geoff — Mon, 12 Oct 2020 02:44:43 +0000

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

The Textarea Field Element provides a multi-line text box for extended amounts of information. This is used on many of the Prebuilt forms, and is perfect when you need an area for the user to have a large amount of freedom with regards inputting text.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Textarea Field Element

The Textarea Field Element allows you to place a Text area into your forms for people to write a message. To start, just add the element into your desired column in a Form Layout.

This Element is much the same as the Text Field Element, with one major difference. Here you can configure a Textarea Row Value, making the text area as big as you like. Otherwise, configure this Element much as you would a Text Field Element.

Read below for a description of all element options.

Element Options

General

Heading		Description
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.
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.
Disabled Field		Choose to disable the field, which makes its content uneditable. Disabled fields won't be submitted.
Placeholder Text		The placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as tooltip.
Tooltip Text		The text to display as tooltip hint for the input.
Input Field Icon		Select an icon for the input field, click again to deselect.
Textarea Row Value		Choose number of rows you want to have for this textarea field.
Minimum Required Characters		Controls the minimum number of characters that will be required for this input field. Leave at 0 to have no minimum.
Maximum Allowed Characters		Controls the maximum number of characters that will be allowed for this input field. Leave at 0 to have no maximum.
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.

Time Field Element

Geoff — Mon, 12 Oct 2020 02:35:41 +0000

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

The Time Field Element allows a user to select a specific time in hours and minutes. You can see an example of this Element in the Reservation Prebuilt Form.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Time Field Element

The Time Field Element allows you to place a time selector into your forms. To start, just add the element into your desired column in a Form Layout.

The main unique options to look at in this Element are the Custom Picker, and the Clock Type, Otherwise, configure the Element as any other Form Element.

Read below for a description of all element options.

Element Options

General

Heading		Description
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.
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.
Placeholder Text		The placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as tooltip.
Tooltip Text		The text to display as tooltip hint for the input.
Custom Picker		Choose to enable a lightweight custom picker on mobile only, mobile and desktop or set to never to use browser native.
Clock Type		Choose between 12 hour and 24 hour clock type. Note, will only work for custom picker type.
Input Field Icon		Select an icon for the input field, click again to deselect.
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.

Upload Field Element

Geoff — Mon, 12 Oct 2020 02:25:26 +0000

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

The Upload Field Element allows users to easily upload files via a form. You can control allowed file extensions, whether a user can upload mulitple files, and the maximum file size. You can see an example of this Element in the Upload Prebuilt Form.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Upload Field Element

The Upload Field Element allows you to place a field into a form where users can upload files before submission. To start, just add the element into your desired column in a Form Layout.

The main things to configure with this Element are the Max File Upload Size, whether to allow Mulitple Uploads, and the Allowed Extensions. Otherwise, configure as any other form Element.

Read below for a description of all element options.

Element Options

General

Heading		Description
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.
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.
Placeholder Text		The placeholder text to display as hint for the input type.
Tooltip Text		The text to display as tooltip hint for the input.
Max File Upload Size		Maximum size limit for file upload. The default is 2 MB.
Allow Multiple Uploads		Decide if multiple files can be uploaded.
Allowed Extensions		Please enter the comma separated extensions that you want to allow. Leave empty to allow all. Example input: .jpg,.png. Note, WordPress file type permissions still apply.
Input Field Icon		Select an icon for the input field, click again to deselect.
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.

Text Field Element

Geoff — Mon, 12 Oct 2020 02:13:00 +0000

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

The Text Field Element is a basic text field you can use to collect information such as a name or address. You can see examples of this Element in the Sign Up and Upload Prebuilt Forms, as well as several others.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Text Field Element

The Text Field Element allows you to place a text field 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. Add a label, decide if it is to be a required field, add an optional tooltip etc. You can also choose the Minimum and Maximum required number of characters for the Element.

Read below for a description of all element options.

Element Options

General

Heading		Description
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.
Field Value		Enter a starting value for the element. Usually this should be empty and a placeholder used instead.
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.
Disabled Field		Choose to disable the field, which makes its content uneditable. Disabled fields won't be submitted.
Placeholder Text		The placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as tooltip.
Tooltip Text		The text to display as tooltip hint for the input.
Input Field Icon		Select an icon for the input field, click again to deselect.
Allowed Input Pattern		Select allowed input pattern. Select custom to add your own pattern.
Custom Pattern		Enter the custom pattern. For pattern examples, you can check HTML5 Pattern.
Invalid Input Notice		Enter validation notice that should display if data input is invalid.
Minimum Required Characters		Controls the minimum number of characters that will be required for this input field. Leave at 0 to have no minimum.
Maximum Allowed Characters		Controls the maximum number of characters that will be allowed for this input field. Leave at 0 to have no maximum.
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.

Submit Button Element

Geoff — Mon, 12 Oct 2020 01:57:41 +0000

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

The Submit Button Element is the one required Element in a form, as it is a button for submitting form data to a form-handler. All prebuilt forms have one. The Submission Type for your Submit Button is controlled in the Local Form Options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Submit Button Element

The Submit Button Element allows you to place a submit button 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 Button. This is basically the same as configuring any button, minus of course, the Link options.

Read below for a description of all element options.

Element Options

General

Heading		Description
Button Text		Add the text that will display on button.
Button Additional Attributes		Add additional attributes to the anchor tag. Separate attributes with a whitespace and use single quotes on the values, doubles don't work. If you need to add square brackets, [ ], to your attributes, please use curly brackets, { }, instead. They will be replaced correctly on the frontend. ex: rel='nofollow'.
Alignment		Select the button's alignment.
Tab Index		Tab index for this field.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.
Form ID		Contains active form ID.

Design

Heading		Description
Button Style		Select the button's color. Select default or color name for Global Options, or select custom to use advanced color options below.
Gradient Top Color		Controls the top color of the button background.
Gradient Bottom Color		Controls the bottom color of the button background.
Gradient Start Position		Select start position for gradient.
Gradient End Position		Select end position for gradient.
Gradient Type		Controls gradient type.
Radial Direction		Select direction for radial gradient.
Gradient Angle		Controls the gradient angle. In degrees.
Button Text Color		Controls the color of the button text, divider and icon.
Button Type		Controls the button type.
Button Bevel Color For 3D Mode		Controls the bevel color of the button when using 3D button type.
Button Border Size		Controls the border size. In pixels or percentage, ex: 10px or 10%.
Button Border Radius		Controls the border radius. Enter values including any valid CSS unit, ex: 10px.
Button Border Color		Controls the border color of the button.
Button Size		Controls the button size.
Padding		Controls the padding for the button.
Typography		Controls the button typography, if left empty will inherit from globals.
Button Span		Controls if the button spans the full width of its container.
Margin		Enter values including any valid CSS unit, ex: 4%.
Icon		Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the button.
Icon Divider		Choose to display a divider between icon and text.
Hover Transition		Set the transition on hover. Icon effects will only work when an icon is set, icon position switch will only work without icon dividers.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Select Field Element

Geoff — Mon, 12 Oct 2020 01:38:28 +0000

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

The Select Field Element allows users to choose from a set of predefined choices, that display in a dropdown list. You can see an example of this Element in the Sign Up Prebuilt Form.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Select Field Element

The Select Field Element allows you to place select fields 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. You can add a label, decide if it is to be a required field, add an optional tooltip etc.

Then there are the options which become the fields you select from. You can add your own options, either individually or in bulk, or you can choose from a range of pre-populated choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, and Days of the Month. once you have more than one option, the Select Field Element displays a dropdown arrown on the right-hand side.

Read below for a description of all element options.

Element Options

General

Heading		Description
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.
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.
Placeholder Text		The placeholder text to display as the initial selection.
Tooltip Text		The text to display as tooltip hint for the input.
Options		Add options for the input field. Use the checkbox to preselect a value.
Input Field Icon		Select an icon for the input field, click again to deselect.
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.

reCAPTCHA Field Element

Geoff — Mon, 12 Oct 2020 01:25:27 +0000

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

The reCAPTCHA Field Element helps protect your website forms from spam and abuse. You must first configure the Global Options found at Options > Forms > Google reCAPTCHA for this to work.

How To Use The reCAPTCHA Field Element

The reCAPTCHA Field Element allows you to add the reCAPTCHA spam control 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. As mentioned above, you need to first configure reCAPTCHA at a Global Level, and in that choose V2 or V3 reCAPTCHA. This affects the options seen when using the Element.

Read below for a description of all element options.

Element Options

Heading		Description
reCAPTCHA Color Scheme		Choose the reCAPTCHA color scheme.
reCAPTCHA Badge Position		Choose where the reCAPTCHA badge should be displayed.
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.