An attribute that helps StudioForm identify the "Form Block" element and determine whether a particular form should be converted to a StudioForm form.
‍
It is the only mandatory attribute in the world of StudioForm, all other attributes are for fine tuning purposes only.

This attribute is useful for the conditional logical flow in navigation.

This attribute is normally set to the text element in the error message.

If you give several checkboxes the same name in the same step, they are considered a checkbox group. This attribute is used so that a specific value can be set when the respective checkbox is selected. Please place this on the actual input element!

By default, StudioForm sets the overflow to hidden for a given element during the transition animation. You can use this attribute to specify which element should receive the temporary overflow hidden effect.

By default, if an important element is out of view, StudioForm will try to scroll the entire page (i.e., the window) to bring it into view. This attribute addresses the scenario where scrolling a specific element within a popup is desired.

An attribute that helps StudioForm identify the 'Form' element.

This attribute identifies elements that should be present in your Webflow Designer but are removed from the HTML document on the live page.

This attribute defines a button with which your users can return to their previous step.

This attribute helps identify buttons that move the user to the next available step. If no next step is available, a submission is performed.

This attribute helps to identify buttons that perform a form submission.

This attribute helps you to bypass the assumption that StudioForm's native Webflow buttons are next buttons.

This attribute can be used for any element within your steps. It instructs the StudioForm script to append the combination class sf-await to the element.

This attribute can be used to distinguish your different steps from each other.

This attribute controls whether an element should be validated or not. If this attribute is not added, none of the following attributes are checked.

This attribute follows the rules for regular expressions and HTML 5 patterns. When creating patterns, GPTs such as ChatGPT are a great help.

This attribute checks the minimum character length of an input.

This attribute checks the maximum character length of an input.

This attribute checks the minimum value of a number input field.

This attribute checks the maximum value of a number input field.

This attribute defines the step interval of a numerical input field.

This attribute controls the minimum number of files that must be specified. This only has a relevant effect when used in combination with the native attribute "multiple".

This attribute controls the maximum number of files that must be specified. This only has a relevant effect when used in combination with the native attribute 'multiple'.

This attribute controls the minimum size (in bytes) that files must have.

This attribute controls the maximum size (in bytes) that files must have.

This attribute is used to identify a text element within a specific label so that it can receive the file name if it is successfully attached.

This attribute is used to add a prefix to that file name when it is successfully attached. Example: 'Uploaded:'

This attribute is used to add a suffix to that file name when it is successfully attached. Example: ' (Files)'

This attribute is used to identify the content element of a progress bar. Combined with the "sf-progress-bar-axis" attribute, these attributes control the width and/or height of an element based on the percentage progress of the form.

This attribute is used to attach the sf-current and sf-completed combo classes to elements that act as progress indicators. The {{ Form Step Name }} part can be either an actual form step name or an index number that acts as a step ID. You can find out more about this in Chapter 3, 'Classes'.

This attribute is used to render a number that indicates the current slide a user is on.

This attribute is used to render a number indicating the minimum number of slides a user must view to achieve a successful submission. This is part of the conditional logic feature. You can find out more about this special features in Chapter 4, 'Navigation'.

This attribute is used to render a number indicating the maximum number of slides a user must view to achieve a successful submission. This is part of the conditional logic feature. You can find out more about this special features in Chapter 4, 'Navigation'.

This attribute is used to render a number indicating the minimum to maximum number of slides a user must view to achieve a successful submission. This is part of the conditional logic feature. You can find out more about this special features in Chapter 4, 'Navigation'.

This setting controls whether combination classes are applied only to a specific element or also to all of its child elements.

This setting controls which prefix a StudioForm combination class receives.

StudioForm dispatches custom events that originate from the Form element. This setting controls whether or not this event should be displayed. For more information, see here.

This setting controls what prefix the various StudioForm events receive. For more information about events, see Chapter 6, 'Wized'.

In StudioForm, events can be triggered by a user or by the JavaScript API. This setting allows developers to distinguish who triggers an event. For more information about events, see Chapter 6, 'Wized'.

This setting allows you to set your Google ReCAPTCHA v3 key to automatically generate Recaptcha tokens upon submission. For more information about ReCAPTCHA, see Chapter 5, 'Third Parties'.

When you use the Google Chrome developer console for testing, StudioForm will provide warning messages if something unexpected happens. You can use this setting to turn these messages on or off.

This setting determines the angle at which the transitions are performed. You can choose any angle value between 0 and 360 degrees, as well setting the value to "off" in order to completely change the sliding direction and just have a nice fade in and out.

This setting determines the vertical alignment at which the transitions are performed. You can choose between top, center, or bottom to define where the form elements are positioned during transitions. This setting allows for better control over how the content is displayed during step changes, ensuring a visually appealing and consistent alignment throughout the animation.

This setting specifies how long the second half of your slide transition animation should last.

This setting allows you to control whether your slide fades from 0% or more.

This setting determines how long the first and second half of your slide transition animation should last as long as neither the current-time nor next-time attributes override this setting.

During the animation time, the current and next slide are temporarily set to absolute. With this setting, the next slide is always above the current slide.

If you specify a redirect value in the Form Block Settings, you can use this setting to control how long to wait after a successful submission before executing the redirect.

This setting allows you to override the default easing setting of StudioForm's animation engine, GSAP.

Normally, in the StudioForm world, slides have different heights and widths, and so our animation engine waits until the current slide has completely disappeared before the next slide appears. However, if both slides are the same size, the interval between the current and next slide will be sped up by a factor of your choosing.

This value is used to calculate the scroll position, which takes into account the height of your sticky nav, for example. This value can be a number (in pixels) or a query selector that selects an element on your page to dynamically calculate its height.

This setting allows you to specify in which direction your progress bar should be animated.

By default, your slide will slide out of the way by 100% of its width and height during the transition. This setting allows you to dynamically multiply these width and height movements.

This setting specifies how long the first half of your slide transition animation should last.

This setting allows you to control whether your slide fades to 0% or more.

By default, your slide will slide into the way by 100% of its width and height during the transition. This setting allows you to dynamically multiply these width and height movements.

This setting allows you to specify the API endpoint URL to which you want to send your data.

This setting allows you to specify the sending method of your form data. Webflow provides you with GET and POST by default in the Form Block Settings. If you want to go beyond that, this attribute is for you.

This setting allows you to specify the types of files that the server accepts. It is typically used to restrict the file types that can be uploaded through the form, such as 'image/*', 'application/pdf', etc.

This setting allows you to specify the MIME type of the content being sent to the server. It defines the nature and format of the data in the request body, such as 'application/json', 'multipart/form-data', etc.

This setting allows you to specify a URL to which the user will be redirected after a successful form submission. It provides a way to navigate users to a specific page or resource upon completion of the form submission.

This setting allows you to specify the maximum time (in milliseconds) the request should take before being aborted. It is useful for setting a timeout to prevent hanging requests, ensuring that the form submission process does not take too long.

This setting allows you to specify a string to use as a separator for concatenating multiple values. By default, a comma followed by a space (', ') is used, but you can adjust the setting to use a different string if required.

This setting controls whether or not a user is allowed to go to a previous step. This can be triggered by clicking the backspace key or pressing a back key.

Controls whether buttons are automatically focusses / suggested conditional logic situations. You can find out more about this special features in Chapter 4, 'Navigation'.

Determines whether the form is allowed to automatically scrolls to a target element when needed, bringing the relevant element into view.

Controls whether the form scrolls to the top when navigating between steps, scrolling to the top of the current step.

Forces the form to scroll to the top, even when the top of a step is visible.

Controls whether the form scrolls to the first invalid field when a validation error occurs, highlighting the invalid field.

Forces the form to scroll to the first invalid field, even when the field is fully visible.

Determines whether the form enforces waiting for animations to complete before proceeding.

Controls whether the form automatically displays an error message when submission fails.

Determines whether the form automatically hides error messages after a user clicks somewhere on the document.

Controls whether the form reports validation results, showing validation messages to the user.

This setting controls whether or not to run StudioForms signature transition animations and opens the door for the creation of 100% custom animations.

Determines whether native browser validation messages are used, utilizing the browser's built-in validation messages.

Controls whether validation is reported when navigating to a previous step, showing validation messages when a user wants to go back.

Determines whether the form uses StudioForm's 'Promise -> Resolve' signature feature. For more information about this feature, see Chapter 6, 'Wized'.

Controls whether promise resolve is triggered when navigating to a previous step.

Controls whether promise resolve is triggered before initializing submission.

Controls whether the form includes field parameters in the redirect URL, incorporating field values in the URL.

Enables or disables file drop functionality in the form, allowing users to drag and drop files into the form.