The submit button is an essential part of forms, allowing users to send their data. Users can click this button to submit their form entries for data collection or payment processing.
When you create a new form, a submit button is automatically added. You can change the button text or use CSS classes to align it with form fields. With the premium version of the plugin, you can change the submit button position or implement conditional logic.
Standard field options
A Submit button has the following options:
Field icons
Field action icons allows you to duplicate, delete, and/or move a field on the form builder page. See the field action icons article for more information.
Field-specific options
Submit button label
Set the text for your Submit button.
Update button text
Set the text for your Update button. This box will only appear if you check Allow front-end editing of entries.
Submit button position
Choose to have the Submit button centered, full width, inline, none, or default.
- Default: By default, the submit button will sit below all the fields in your form.
- Center: Adds the submit button at the center of the form below all the fields.
- Full Width: Set your submit button style width to 100%.
- Inline: Align the submit button with all the fields on the same line.
Start over button
Use the Start over button to restore the form to its original state before any values were added to the fields. When this option is enabled, it includes an option to customize the button text.
Submit button styling
By default, the disabled submit button is displayed at half opacity. To turn off this styling, follow the instructions below.
- Navigate to Formidable → Styles and edit your style template.
- Go to the Advanced settings of the Visual Styler.
- Look for the Button section and toggle on Disable submit button styling.
Read more about the different button styling available in the Visual Styler.
Submit button logic
The submit button includes options to either conditionally hide or disable it. These settings apply to the submit button on the last page of the form, and not a next button added by a page break field.
Click Conditional logic, and add settings to hide or disable the submit button. This works just like the field conditional logic. The logic includes the option to hide the submit button until a checkbox is checked.
By default, conditional logic is triggered when the field is changed, which doesn't occur until the cursor leaves the field. To trigger this when a keyboard key is released, you can use this Javascript example instead.
Restrict email addresses
To restrict certain email addresses in your form, you can follow the steps below:
- Add an HTML field with a validation message. You could add some CSS styling, if you want.
- Add conditional logic to the HTML field such that it will only show if the email address field contains @gmail.com, @hotmail.com, or @yahoo.com.
