Data privacy notice

 

When this content is loaded, usage information is transmitted to Vimeo and may be processed there.

 

             

Form field: buttons

Modified on Thu, 20 Jul, 2023 at 10:12 AM

  The icon for elements of type Buttons.


Functionality

The form element button adds buttons to the current form. Each button element may contain multiple buttons. By default, this element contains two buttons, back and next. To add or delete buttons, go to the section value on the right hand side. For each button, you can select the action when the user clicks the button. Currently available actions are moving to a different page of the form, submitting the form, or saving the form when the user wishes to continue filling out the form at a later time. For more details, see the section values below.


Properties

Overview of the standard properties


This section describes only those properties that are different from the standard.



Style

Additional base properties for buttons. You can specify how the buttons should be aligned.


NameDescription
AlignmentChanges the alignment (left, right, centre) of the buttons.



Value

For every button, you can enter the text that is shown in the form, and a name used for the HTML. You can also choose which action to perform when the button is pressed.

This form element possesses the following additional properties for the section Value.

NameBeschreibung
TextThe text or label of the button the user sees.
NameThe value of the HTML attribute name of the HTML input. This name can be used for selecting the button via JavaScript or CSS. For example the CSS [name=btnSubmit] { width:100%;} makes the button named btnSubmit take up the entire available width.
ActionSelect what should happen when the user clicks the button.


Add and delete buttons

A new row for adding new button is added automatically as neccessary. To delete a button, press on the   icon on the left. You can also move the buttons via drag&drop to change their order (use   icon for dragging).


Available actions

Each button lets you specify an action. You can also choose whether to validate the form or not. When you validate the form, checks are done to ensure that no required fields were left empty and that no invalid data was entered.

The following actions are available.

NameBeschreibung
No actionNo action happens by clicking the button. You can use this option if your own action should get implemented with Javascript. The following example displays a short message if you press the button with the name btnAlert.
$('[name=btnAlert]').click(() => alert("The button was pressed."));
Page xNavigates to the selected page. There is a separate action for each page.
Page x + checkNavigates to the selected page, unless any form fields on the current page are invalid (missing input or wrong input).
SubmitSends the form to the server and creates a new form record. The form is sent even if it is invalid.
Sumbit + checkChecks whether the form is valid and if it is, sends the form to the server. Otherwise, informs the user about missing or invalid data by showing error messages.
Submit no saveSends the form to the server, without creating a new form record. This action should be used if you only need to run a workflow.
Submit no save popupSends the form to the server, without creating a new form record. The returned response page is shown as a popup. This action should be used if you only need to run a workflow. One use case for this action is to create some files on the server and return those files to the user while keeping the form open. See also the workflow action file download.
SaveSaves the form data on the server, but do not run any workflow. Usually this is used to let the user save their current progress and fill out the rest of the form later. This does not validate the form. This sets the process to a locked state, as no final submit has yet been made, and should therefore be used for the initial filling process. For a later saving, a submit button is recommended, because the data will be overwritten.
Save + checkValidates the form, and if it is valid, saves the form data on the server only. Usually this is used to let the user save their current progress and fill out the rest of the form later. This sets the process to a locked state, as no final submit has yet been made, and should therefore be used for the initial filling process. For a later saving, a submit button is recommended, because the data will be overwritten.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article