Submit / Button Element

Last Update: September 10, 2025

The Avada Submit / Button Element is the final action trigger in a form, enabling users to submit their entered information once it is complete. It can be fully customized in terms of text, color, size, shape, alignment, and hover effects, ensuring it fits seamlessly with your site’s design. The Submission Type for your Submit Button is controlled in the Avada Form Options.

With Avada 7.14 and up, the Submit / Button Element can also be duplicated in a form to be used as a Reset Button, both for an entire form, or a section of a multi-step form, and as a Save Form Data button to allow for users to come back to a form later. These can be found in the Button Type option.

Watch the video below for a visual overview of the Submit / Button Element and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Avada Submit Button Element

The Avada Submit / Button Element allows you to place a submit button into your forms. To start, add the element to your desired Column in an Avada Form Layout.

What the button does when set to Submit is controlled by the form Submission method, found in the Form Options tab, and under Submission. Here, you set the submission type when the Submit button is clicked. By default this is Ajax. As the description here says, you Select “AJAX” to store form data using predefined methods and “POST” if you want to implement your own.

To get the mail sent to you, or a coworker, or to set up an auto reply, the submission type must be set to Ajax, and notifications are configured on the Notifications tab. See the Avada Form Options doc, to read more about the possible submission types, and the How To Set Up Avada Form Notificiations doc for full information about setting notifications for your submissions.

Configuring the Submit / Button Element is essentially the same as configuring any button, except for the Link options, of course. Read below for a full description of all Element options.

The Submit / Button can also be used in a few other ways. On the Button Type option, you can change the functionality to be a Reset button, a Reset Form Step button, or a Save Form Data Button.

If you want to use any of these, simply add another instance of the Submit / Button Element into your form and select the appropriate button type. A reset button simply allows the user to clear the form, and a Reset Form Step button would allow a user to clear just the cirrent step on a multi-step form. A Save For Data Button woud of course allow the user to save the form data so they could return later to the form and continue where they left off.

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 the button.
Enable Button Hover Text / IconTurn on to enable independent hover text and icon options.
Button Hover TextAdd the text that will display on button hover.
Button TypeSelect the button's type. Use "Submit" to trigger form submission. The reset options will either reset the form step or the entire form to defaults. "Save Form Data" will save filled in form data to local storage and pre-fill when a user revisits the page.
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.
Conditional LogicAdd conditional logic when the element is used within a form.

In this article