Submit / Button Element
The Submit / Button Element adds the button that sends a Tirenoa Form. Every form needs at least one of them. The same element can also act as a reset button that clears the form, or as a button that saves what the visitor has typed so far and fills it in again on the next visit.
It is built on the regular Button Element, so you have the same design choices: gradient colors, borders, radius, sizes, an icon with an optional divider, hover text and several hover transitions. Without your own settings it follows the button styles in Global Options, like every other button on the site.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Submit / Button Element
Open your form under Tirenoa > Forms and add the element at the end of the form. Enter the Button Text, for example “Send request”, and keep Button Type on Submit. Reset returns the whole form to its starting values, Reset Form Step only the current step of a form with several steps, and Save Form Data stores the entered data in the visitor’s browser and fills it in when they come back. Set Alignment to place the button left, center or right, or leave it on Text Flow.
On the Design tab keep Button Style on Default to use the global button look, or choose Custom to set the gradient, text color, border, radius, size, padding and typography for this button only. Button Span stretches the button to the full width of its column, which works well in narrow forms and on phones. Add an Icon, place it left or right with Icon Position, and choose a Hover Transition. With Enable Button Hover Text / Icon on, the button can show a different text and icon while the visitor points at it.
The Extras tab adds an entrance animation and Conditional Logic, which can show the button only once certain answers are given. While a form is being sent, repeated clicks on the button do not send it a second time, so visitors who click twice do not create duplicate entries or emails. The button itself is never part of the entry or the notification email.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Button Text | Add the text that will display on the button. |
| Enable Button Hover Text / Icon | Turn on to enable independent hover text and icon options. |
| Button Hover Text | Add the text that will display on button hover. |
| Button Type | Select 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 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. for example 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. |
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, for example 10px or 10%. |
| Button Border Radius | Controls the border radius. Enter values including any valid CSS unit, for example 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, for example 4%. |
| Icon | Click an icon to select, click again to deselect. |
| Hover 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. |
| Conditional Logic | Add conditional logic when the element is used within a form. |
Tips
- Use a button text that says what happens, such as “Send request” or “Book appointment”, rather than just “Submit”.
- Place any spam check (reCAPTCHA or Turnstile Field) directly above the submit button, where visitors expect it.
- Icon hover effects only work when an icon is set, and Icon Switch Position only works without an icon divider.
- Save Form Data keeps the data in the visitor’s own browser only. On shared computers, visitors may not expect their answers to reappear; offer it mainly for long forms.
- Resetting the form with a Reset button also removes data saved with Save Form Data.
- Avoid a Reset button right next to the submit button. A wrong click empties the whole form.