How do I use the Action Buttons Component?

Modified on Thu, 10 Oct at 9:19 AM

The Action Buttons Component allows users to interact with and navigate through a form. By pressing an action button, users can save, submit, reject, or move through different pages of the form. Each button is tied to a specific function within the form’s workflow, ensuring submissions move to the next step or stage as expected.

When should I use an Action Buttons Component?

Use Action Buttons to enable critical form actions like submitting, saving, or rejecting a form, as well as navigating between pages when you’re using multi-page forms. These buttons drive the flow of your form submission, ensuring that each user can complete or save their work, and move submissions forward within the workflow.

Features & Configuration

Adding Action Buttons is simple. Select the Action Buttons option from the component library and drag it onto the form.

After placing the component, you can customize its properties in the right-hand panel:

Properties

Buttons

Submit
The essential button that moves a form forward in the workflow. All forms must include a Submit button for proper functionality.

Save
Allows the user to save their work and return later. If they are not logged in, they will be prompted to provide an email and will receive a link to resume their submission.

Reject
Moves the form to a “Rejected” status or back to the sender for corrections, depending on the workflow setup.

Next/Back
Use these to navigate between pages if your form is divided into multiple pages. The Next button moves users forward, and the Back button returns them to the previous page. On the last page, the Submit button will appear in place of Next.

Below each checkbox, customize the button text to match your workflow or specific needs.

For example, the Submit button could be renamed “Send for Approval,” depending on the action tied to that button.

Logic

Display Logic
Control when each button is shown or hidden based on other form inputs or conditions within the workflow. For example, a Reject button might only appear if specific conditions are met in the form.

Pro Tip!
We have a little helper function: currentStep()
You can use that to control when certain sets of Action Buttons appear, based on the submission's current workflow step.

Details

Wide Alignment
Enable this to stretch the Action Buttons across the full width of the form container.

Alignment
Align the buttons within the form. Options include Left, Right, Center, and Justify.

Margin Top & Bottom
Add space above or below the buttons by setting the top and bottom margins, measured in pixels.