Submit Button Element

25/05/2022

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.

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.

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.

Step 3. Click on Add New Element and choose Submit Button from the Form Elements tab.

Step 4. 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.

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

Read below for a description of all element options.

870,055 Businesses Trust Avada

Get Avada

870,055 Businesses Trust Avada

Get Avada

870,055 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).

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 Tab

Button Text – Add the text the Button will display here.
Text Transform – Choose how the text on the Button is displayed, in either Normal (as written) case or Uppercase. Your Default setting is chosen in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Button)
Button Additional Attributes – Here you can add additional attributes to the anchor tag. Separate attributes with a white space 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 front-end. ex: rel=’nofollow’.
Alignment – This setting controls the button’s alignment in the container it is in. Choose from Text Flow, Left, Right, or Center. This is now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.
Tab Index – Tab index for this field.
CSS Class – Allows you to add a class for the Element.
CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Design Tab

Button Style – Select the button’s color. Select default or color name for theme options, or select custom to use advanced color options below.
Button Gradient Top Color – Controls the top color of the button background. Leave empty for the default value.
Button Gradient Bottom Color – Controls the bottom color of the button background. Leave empty for the default value.
Button Gradient Top Hover Color – Controls the top hover color of the button background. Leave empty for the default value.
Button Gradient Bottom Hover Color – Controls the bottom hover color of the button background. Leave empty for the default value.
Gradient Start Position – Select start position for gradient.
Gradient End Position – Select end position for gradient.
Gradient Type – Controls gradient type. Choiose from Default, Linear or Radial.
Radial Direction – Select direction for radial gradient.
Gradient Angle – Controls the gradient angle. In degrees.
Button Text Color – Controls the color of the button border, divider, text, and icon. Leave empty for the default value.
Button Accent Hover Color – Controls the hover color of the button border, divider, text, and icon. Leave empty for the default value.
Button Type – Controls the button type. Choose from Default, Flat, or 3D.
Button Bevel Color For 3D Mode – Controls the bevel color of the button when using 3D button type. Leave empty for the default value.
Button Border Size – Controls the border size. In pixels.
Button Border Radius – Controls the border radius. In pixels.
Button Border Color – Controls the border color of the button. Leave empty for default value.
Button Border Hover Color – Controls the hover border color of the button. Leave empty for default value.
Button Size – Controls the button size. Choose from Default, Small, Medium, Large, or X-Large.
Padding – Controls the padding for the button.
Typography
Font Family – Controls the font family of the button.
Font Size – Controls the font size of the button.
Line Height – Controls the line height of the button text.
Letter Spacing – Controls the letter spacing of the button text.
Text Transform – Choose how the text is displayed. Choose from Default, Normal, or Uppercase.
Button Span – Controls if the button spans the full width of its container.
Margin – Enter values including any valid CSS unit, ex: 4%. Controls the margin around the Element.
Icon – Select an icon to show on the button. Click to select, click again to deselect.
Icon Position – Choose the position of the icon on the button. Choose from Left or Right.
Icon Divider – Choose to display a divider between icon and text.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

The global color options for the Submit Button Element come from the Button Element Global Defaults, found at Options > Avada Builder Elements > Button.