Button

Drag the Button form control anywhere on the designer canvas and configure the control to save the form, submit the form, or perform an event using rules. This control provides you with more flexibility than the Action panel control. For example, you can position a button anywhere you want so that users don't need to scroll to the bottom of the page to submit a form. You can also use a button to query data and complete calculations.

Section Setting Description
(unlabeled) Title

Field name displayed on the published form. Must be 50 characters or less.

 

Customize

Switch toggle to Yes to enable customization of the variable Name of the form control.

 

Name

(This field becomes configurable only when you switch the Customize toggle to Yes.)

Customizes the name of the variable A placeholder that stores changes each time the workflow runs, such as the information entered in a form, or the name of a file. You can also create variables to store information you use in the workflow, such as an email address. for the field. If the name is not customized, the Title will be used as the variable name.

 

Action

Actions to complete when the button is clicked:

  • Save: Saves the form.

  • Open Link: Opens the URL or URI link that's provided in the Link field. The Link field is displayed when Open link is selected as the action.

  • Submit: Submits the form.

  • Rule-triggered: Triggers rules.

    Note: When rule triggered is selected the button control can be used in form rules to trigger a rule.

  Link

The Link field is available only when Open link is selected in the Acton field.

The URL or URI of the resource you want to open.

 

Vertical alignment

Applies the selected alignment to the button on the published form:

  • Top
  • Middle
  • Bottom
 

Visible

Options to show or hide the field in the form.

  • Yes: Displays the field on the form.
  • No: Hides the field on the form.
Styling CSS class

Add a CSS class to apply a style to this form control. You can create the CSS class in the CSS code editor in form styles. Enter one class name or multiple class names separated by a space.

For more information, see Add a custom CSS to individual controls.

  Border color

Border color to apply to the field.

To select a color, click the color box and use the color picker to specify the color you want. You can click on the color map to select the color or enter the Hex code.

To revert back to the global style, click Reset to global style.

  Control fill

The color to fill the inside of the field.

To select a color, click the color box and use the color picker to specify the color you want. You can click on the color map to select the color or enter the Hex code.

To revert back to the global style, click Reset to global style.

  Control input color

The font color of the input in the field.

To select a color, click the color box and use the color picker to specify the color you want. You can click on the color map to select the color or enter the Hex code.

To revert back to the global style, click Reset to global style.