The primary use for the Button field it to trigger the form submission. Buttons can also be used to move to the next, or previous page of a multi-page form.
A form intended for user submission requires a button of the type “submit” Without one, a form cannot be submitted. The button config panel is fairly simple, allowing you to set the name, slug, custom class (wrapper class), type and class (actual button class)
A button can be set as a Submit, Button, Next Page, Previous Page & Reset.
On click, will trigger the form to be submitted. If any required fields are not filled in, User will be prompted to fill them in.
- Next Page
Triggers pagination to the next available page
Triggers pagination to the previous page
Resets the form to its load state. If returned to the form due to an invalid data, the reset will return it to this state, not an empty state.
A button config can be given 2 custom classes:
- Custom Class
This class name is added to the div around the actual button element
This class name is added to the actual button element
CSS Tips For Buttons
Buttons in a Caldera Form default to carrying the class “btn” and all Caldera Forms are wrapped in an element with the class “caldera-grid”. Therefore you can target all buttons in your form with “.caldera-grid .btn”
Here are some examples for changing Caldera Forms button (including submit button) color, width or centering the button.
Note that these examples will change all buttons in the form. If you want to target one button, you will need to switch to using the button ID.