Studio Form Modes
Modes in Studio Form are like game settings that you can customize for each form on your page. You can affect them by setting the attribute the name to one of the attributes in the list below and setting a value to true or false. Mode attributes must always be set on the wrapper.
In the snippets below, the "Value" shows either true or false - the respective one is then the corresponding default setting. You can override these values if you wish.
Xano mode
Find out more -> here <-. Short description: This mode allows you to submit form data to any backend of your choice without going through Webflow servers - perfectly GDPR compliant and no code!
Instead of setting an attribute, you need to change the "Action" value in your form settings.
Jotform mode
Find out more -> here <-. Short description: Provided your action value is set to a link that contains a jotform.com/submit link, this mode is enabled.
Technically, it removes a lot of the formatting from the POST request (since the native Webflow form submission endpoint needs a lot of formatting to work, and it's the default setting) so that raw data can be submitted - exactly what Jotform needs.
Simplified SDK
This attribute will be especially useful for any JavaScript geeks reading this. By default, Studio Form provides protected JavaScript SDK / API access, which looks something like the following image (once you access the StudioForm window object) 👇. If you set this attribute to false, you get much broader access to operations within the JavaScript library.
Remove (visual) dividers
You probably do not want to change this setting. It only allows the deletion of visual dividers (as described in more detail at the end of "Defining slides").
Remove conditionally invisible slides
This is very useful when you work with the Webflow CMS. If you make a particular slide conditionally invisible for some reason, it will not be displayed within the possible slides. We have successfully used this mode in a previous project to extend the capabilities of a CMS-based product configurator.
Slider mode
Find out more -> here <-. Short description: This allows Studio Form to be used simply for its animation capabilities. Requirement checking is turned off and submission is not possible.
Remove required attribute from checkbox or radio steps
In Studio Form, there are several types of steps (empty, default, radio, checkboxes, and those you define when creating JavaScript extensions).
This attribute mainly helps you to automatically remove required attributes from checkboxes and radios, because these can cause unexpected behavior on slides with only checkboxes or radios.
Swap submit buttons
To prevent Studio Forms from performing a native Webflow Forms submission on the "Enter" event, we decided to automatically replace the Webflow "Form Buttons" with Webflow "Buttons" once everything is rendered and loaded.
Calculate progress
Let's say you want Studio Form to calculate accurate progress data within the SDK to use for your Studio Form Extension, but you don't have progress bars or other indicators within your Studio Form, then this attribute is perfect for you.
Auto remove button suggestion
It is strongly recommended to leave this attribute unless you plan to write a JavaScript extension that works with the SDK property .clearSuggestedButton().
Auto suggest buttons
It is strongly recommended to leave this attribute as it is, unless you plan to write a JavaScript extension that plays with the SDK property .suggestButton().
Auto scroll to target
This attribute indicates whether the Studio Forms scrolling function is active or not.
Wait for animations to complete
With this attribute you can force users to navigate slowly through your form.
Hide error message on click
When someone submits a Studio form and something goes wrong, an error message appears.
This attribute controls the hiding behavior of that error message.
Only scroll if top of slide is not visible
This attribute controls whether to scroll to an input element if its requirements are not met. (Note: This works only if an input element is not completely inside the viewport).
Scroll on requirements error
This attribute controls whether to scroll to an input element if its requirements are not met. (Note: This works only if an input element is not completely inside the viewport).
Force scroll on requirements error
This attribute controls whether to scroll to an input element if its requirements are not met. (Note: Scrolling occurs every time, regardless of whether an input element is completely within the viewport or not).
Allow report validity
Learn more about .reportValidity() -> here <-
Auto swap file upload label text
This controls the automatic replacement of a label text in a file upload input field.
100 % Progress bar only on submit
This controls whether or not the success message is counted as the last step for the progress percentage.
Add field values to URL params to redirect on submit
This controls whether or not you want to add url params to your url redirect.
