Submit Button Element

Last Update: April 19, 2024

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.

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

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

HeadingDescription
Button TextAdd the text that will display on button.
Button Additional AttributesAdd 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'.
AlignmentSelect the button's alignment.
Tab IndexTab index for this field.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.
Form IDContains active form ID.

Design

HeadingDescription
Button StyleSelect the button's color. Select default or color name for Global Options, or select custom to use advanced color options below.
Gradient Top ColorControls the top color of the button background.
Gradient Bottom ColorControls the bottom color of the button background.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Button Text ColorControls the color of the button text, divider and icon.
Button TypeControls the button type.
Button Bevel Color For 3D ModeControls the bevel color of the button when using 3D button type.
Button Border SizeControls the border size. In pixels or percentage, ex: 10px or 10%.
Button Border RadiusControls the border radius. Enter values including any valid CSS unit, ex: 10px.
Button Border ColorControls the border color of the button.
Button SizeControls the button size.
PaddingControls the padding for the button.
TypographyControls the button typography, if left empty will inherit from globals.
Button SpanControls if the button spans the full width of its container.
MarginEnter values including any valid CSS unit, ex: 4%.
IconClick an icon to select, click again to deselect.
Icon PositionChoose the position of the icon on the button.
Icon DividerChoose to display a divider between icon and text.
Hover TransitionSet the transition on hover. Icon effects will only work when an icon is set, icon position switch will only work without icon dividers.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article