Docs
Attributes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Element Attributes

This category of attributes is used to identify elements that are present in your "Form Block" element. The attributes below are used to perform the fundamental functions of StudioForm.

Wrapper ( Mandatory Attribute)

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.

Wrapper ( Mandatory Attribute)

{

   "sf": "wrapper"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
wrapper
default =
|
values =
Copy
Copied

Conditional Next

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

Conditional Next

{

   "sf": "next"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
next
default =
|
values =
Copy
Copied

Error Attribute

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

Error Attribute

{

   "sf": "error"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
error
default =
|
values =
Copy
Copied

Checkbox Group Value

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!

Checkbox Group Value

{

   "sf-value": "Checkbox Value"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-value
Copy
Copied
Value
Checkbox Value
default =
|
values =
Copy
Copied

Overflow Attribute

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.

Overflow Attribute

{

   "sf": "overflow"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
overflow
default =
|
values =
Copy
Copied

Window Attribute

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.

Window Attribute

{

   "sf": "window"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
window
default =
|
values =
Copy
Copied

Mask Attribute

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

Mask Attribute

{

   "sf": "mask"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
mask
default =
|
values =
Copy
Copied

Divider Attribute

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

Divider Attribute

{

   "sf": "divider"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
divider
default =
|
values =
Copy
Copied

Previous Button

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

Previous Button

{

   "sf": "prev"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
prev
default =
|
values =
Copy
Copied

Next Button

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

Next Button

{

   "sf": "next"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
next
default =
|
values =
Copy
Copied

Submit Button

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

Submit Button

{

   "sf": "submit"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
submit
default =
|
values =
Copy
Copied

No Button

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

No Button

{

   "sf": "no-button"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
no-button
default =
|
values =
Copy
Copied

Await Attribute

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.

Await Attribute

{

   "studio-form": "await"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
studio-form
Copy
Copied
Value
await
default =
|
values =
Copy
Copied

Form Step Name

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

Form Step Name

{

   "sf-name": "Form Step Name"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-name
Copy
Copied
Value
Form Step Name
default =
|
values =
Copy
Copied

Input Validation Attributes

StudioForm provides its own engine to control and automate the validation check of each slide. The attributes and behavior of the browser are modeled as if each slide were turned into a stand-alone form.

Validation Requirement Control Attribute

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

{

   "sf": "required"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
required
default =
|
values =
Copy
Copied

Pattern Attribute

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

{

   "pattern": "Some Regular Expression"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
pattern
Copy
Copied
Value
Some Regular Expression
default =
|
values =
Copy
Copied

Min Length

This attribute checks the minimum character length of an input.

{

   "minlength": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
minlength
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Max Length

This attribute checks the maximum character length of an input.

{

   "maxlength": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
maxlength
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Min Value

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

{

   "min": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Max Value

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

{

   "max": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Step Interval

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

{

   "step": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
step
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

File upload Element Attributes

StudioForm provides its own engine to operate and automate the file upload functionality. This allows you to combine drag & drop functionality with the classic behavior of file upload fields within a form - right out of the box.

To trigger this engine, you need a file input with an ID and a label element whose "for" attribute is set to the ID of the file input.

Minimum File Count Specification

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".

{

   "sf-min-files": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-min-files
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Max Files

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'.

{

   "sf-max-files": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-max-files
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Min File Size

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

{

   "sf-min-size": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-min-size
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Max File Size

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

{

   "sf-max-size": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-max-size
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Swap Label

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.

{

   "sf": "swap-label"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Value
swap-label
default =
|
values =
Copy
Copied

Swap Prefix

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

{

   "sf-swap-prefix": "Some String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-swap-prefix
Copy
Copied
Value
Some String
default =
|
values =
Copy
Copied

Swap Suffix

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

{

   "sf-swap-suffix": "Some String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-swap-suffix
Copy
Copied
Value
Some String
default =
|
values =
Copy
Copied

Progress Element Attributes

In contrast to the "Element" attributes, which can only function within the "Form Block" element, these attributes help to identify elements regardless of where they are placed in the HTML document. This class of elements is mainly used for displaying step progress.

The autonomy of these attributes requires that the attribute name consists of "sf-" and your form identifier, which you can define in your "Form block settings" under "Name".

Progress Bar Identification Attribute

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.

{

   "sf-FormName": "progress-bar"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-FormName
Copy
Copied
Value
progress-bar
default =
|
values =
Copy
Copied

Current Step Indicator

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'.

{

   "sf-Form Name": "current-Form Step Name"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-Form Name
Copy
Copied
Value
current-Form Step Name
default =
|
values =
Copy
Copied

Current Slide Number

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

{

   "sf-Form Name": "current-slide"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-Form Name
Copy
Copied
Value
current-slide
default =
|
values =
Copy
Copied

Minimum Slides

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'.

{

   "sf-Form Name": "min-slides"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-Form Name
Copy
Copied
Value
min-slides
default =
|
values =
Copy
Copied

Maximum Slides

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'.

{

   "sf-Form Name": "max-slides"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-Form Name
Copy
Copied
Value
max-slides
default =
|
values =
Copy
Copied

Min-Max Slides

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'.

{

   "sf-Form Name": "min-max-slides"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-Form Name
Copy
Copied
Value
min-max-slides
default =
|
values =
Copy
Copied

Root Configuration Attributes

These configuration settings are valid for all StudioForm instances on your site. You will set these attributes to the "Body" element.

Class Cascading Control Attribute

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

{

   "sf-class-cascading": "true"

}

default =
true
|
values =
true,false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-class-cascading
Copy
Copied
Value
true
default =
true
|
values =
true,false
Copy
Copied

Combo Class Prefix

This setting controls which prefix a StudioForm combination class receives.

{

   "sf-combo-class-prefix": "Some String"

}

default =
sf-
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-combo-class-prefix
Copy
Copied
Value
Some String
default =
sf-
|
values =
Copy
Copied

Event Bubbles

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.

{

   "sf-event-bubbles": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-event-bubbles
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Event Prefix

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

{

   "sf-event-prefix": "Some String"

}

default =
sf-
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-event-prefix
Copy
Copied
Value
Some String
default =
sf-
|
values =
Copy
Copied

External Event Suffix

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'.

{

   "sf-external-event-suffix": "Some String"

}

default =
-api
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-external-event-suffix
Copy
Copied
Value
Some String
default =
-api
|
values =
Copy
Copied

Recaptcha Key

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'.

{

   "sf-recaptcha-key": "Some String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-recaptcha-key
Copy
Copied
Value
Some String
default =
|
values =
Copy
Copied

Warning Messages

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.

{

   "sf-warn": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-warn
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Instance Configuration Attributes

These configuration settings are valid for a specific StudioForm instance. They are usually defined in the "Form block" or "Form" element, but you can also define them in the individual form step to allow more precise control.

Animations Config Attributes

This subcategory of setting attributes controls the animation behavior of your StudioForms.

Transition Angle Configuration Attribute

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.

{

   "sf-direction": "90"

}

default =
90
|
values =
0 - 360, off
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-direction
Copy
Copied
Value
90
default =
90
|
values =
0 - 360, off
Copy
Copied

Transition Angle Alignment Configuration Attribute

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.

{

   "sf-direction-alignment": "center"

}

default =
center
|
values =
top, center or bottom
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-direction-alignment
Copy
Copied
Value
center
default =
center
|
values =
top, center or bottom
Copy
Copied

Next Animation Time

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

{

   "sf-next-time": "Some Number"

}

default =
0.5
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-next-time
Copy
Copied
Value
0.5
default =
0.5
|
values =
Copy
Copied

Next Opacity

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

{

   "sf-next-opacity": "0"

}

default =
0
|
values =
0 - 1 all decimal numbers
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-next-opacity
Copy
Copied
Value
0
default =
0
|
values =
0 - 1 all decimal numbers
Copy
Copied

Total Animation Time

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.

{

   "sf-time": "Some Number"

}

default =
1
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-time
Copy
Copied
Value
1
default =
1
|
values =
Copy
Copied

Z-Index 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.

{

   "sf-z-index": "Some Number"

}

default =
1
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-z-index
Copy
Copied
Value
1
default =
1
|
values =
Copy
Copied

Redirect Delay

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.

{

   "sf-redirect-delay": "Some Number"

}

default =
1
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-redirect-delay
Copy
Copied
Value
1
default =
1
|
values =
Copy
Copied

Easing Setting

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

{

   "sf-ease": "Some String"

}

default =
power1.out
|
values =
All core GSAP easings
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-ease
Copy
Copied
Value
power1.out
default =
power1.out
|
values =
All core GSAP easings
Copy
Copied

Dimensions Multiplier

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.

{

   "sf-equal-dimensions-multiplier": "Some Number"

}

default =
0.5
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-equal-dimensions-multiplier
Copy
Copied
Value
0.5
default =
0.5
|
values =
Copy
Copied

Offset Value

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.

{

   "sf-offset": "Some Query Selector String or Some Number"

}

default =
16
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-offset
Copy
Copied
Value
16
default =
16
|
values =
Copy
Copied

Progress Bar Axis

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

{

   "sf-progress-bar-axis": "x"

}

default =
x
|
values =
x, y, xy
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-progress-bar-axis
Copy
Copied
Value
x
default =
x
|
values =
x, y, xy
Copy
Copied

Current Move Multiplier

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.

{

   "sf-current-move-multiplier": "Some Number"

}

default =
1
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-current-move-multiplier
Copy
Copied
Value
1
default =
1
|
values =
Copy
Copied

Current Animation Time

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

{

   "sf-current-time": "Some Number"

}

default =
0.5
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-current-time
Copy
Copied
Value
0.5
default =
0.5
|
values =
Copy
Copied

Current Opacity

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

{

   "sf-current-opacity": "0"

}

default =
0
|
values =
0 - 1 all decimal numbers
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-current-opacity
Copy
Copied
Value
0
default =
0
|
values =
0 - 1 all decimal numbers
Copy
Copied

Next Move Multiplier

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.

{

   "sf-next-move-multiplier": "Some Number"

}

default =
1
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-next-move-multiplier
Copy
Copied
Value
1
default =
1
|
values =
Copy
Copied

Fetch Config Attributes

In StudioForm, we call everything related to submissions “fetch”. The fetch settings allow you to control exactly where and how you want to make your submissions.

API Endpoint URL Setting

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

{

   "sf-action": "URL String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-action
Copy
Copied
Value
URL String
default =
|
values =
Copy
Copied

Specify Method

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.

{

   "sf-method": "POST'"

}

default =
|
values =
GET, POST, PUT, PATCH, DELETE
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-method
Copy
Copied
Value
POST
default =
|
values =
GET, POST, PUT, PATCH, DELETE
Copy
Copied

File Types Accepted

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.

{

   "sf-accept": "Some String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-accept
Copy
Copied
Value
Some String
default =
|
values =
Copy
Copied

Content Type

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.

{

   "sf-content-type": "Some String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-content-type
Copy
Copied
Value
Some String
default =
|
values =
Copy
Copied

Redirect URL

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.

{

   "sf-redirect": "Some String"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-redirect
Copy
Copied
Value
Some String
default =
|
values =
Copy
Copied

Request Timeout

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.

{

   "sf-timeout": "Some Number"

}

default =
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-timeout
Copy
Copied
Value
Some Number
default =
|
values =
Copy
Copied

Value Separator

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.

{

   "sf-value-separator": "Some String"

}

default =
,
|
values =
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-value-separator
Copy
Copied
Value
Some String
default =
,
|
values =
Copy
Copied

Modes Config Attributes

StudioForm is very extensible and flexible by nature. A key tool we use to achieve this state is a set of switches (which we call modes) that control various base behaviors.

StudioForm comes preconfigured by default, but if you need to go beyond that preconfiguration, we make it as easy as possible for you.

Previous Step Navigation Control

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.

{

   "sf-allow-prev": "true"

}

default =
true
|
values =
true,false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-allow-prev
Copy
Copied
Value
true
default =
true
|
values =
true,false
Copy
Copied

Auto Focus Buttons

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

{

   "sf-auto-focus-buttons": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-auto-focus-buttons
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Scroll to Target

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

{

   "sf-scroll-to-target": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-scroll-to-target
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Scroll to Top

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

{

   "sf-scroll-to-top": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-scroll-to-top
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Force Scroll to Top

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

{

   "sf-force-scroll-to-top": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-force-scroll-to-top
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Scroll to Validity

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

{

   "sf-scroll-to-validity": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-scroll-to-validity
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Force Scroll to Validity

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

{

   "sf-force-scroll-to-validity": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-force-scroll-to-validity
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Await Animations

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

{

   "sf-await-animations": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-await-animations
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Auto Show Fail

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

{

   "sf-auto-show-fail": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-auto-show-fail
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Auto Hide Fail

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

{

   "sf-auto-hide-fail": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-auto-hide-fail
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Report Validity

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

{

   "sf-report-validity": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-report-validity
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Transition Animation

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

{

   "sf-transition": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-transition
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Native Report Validity

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

{

   "sf-native-report-validity": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-native-report-validity
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Prev Report Validity

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

{

   "sf-on-prev-report-validity": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-on-prev-report-validity
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Promise Resolve

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

{

   "sf-promise-resolve": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-promise-resolve
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Prev Promise Resolve

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

{

   "sf-on-prev-promise-resolve": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-on-prev-promise-resolve
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Submit Promise Resolve

Controls whether promise resolve is triggered before initializing submission.

{

   "sf-on-submit-promise-resolve": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-on-submit-promise-resolve
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Field Params Redirect

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

{

   "sf-field-params-redirect": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-field-params-redirect
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

File Drop

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

{

   "sf-file-drop": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-file-drop
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Default Styles

Controls whether default styles are applied to StudioForm.

{

   "sf-init-default-styles": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-init-default-styles
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Require Radios

Determines whether radios are determined as mandatory.

{

   "sf-require-radios": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-require-radios
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Observe Checked

Determines whether the form observes changes to checkbox or radio button selections, reacting to changes in selected options.

{

   "sf-observe-checked": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-observe-checked
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Boolean Checkbox Values

The actual value of a checkbox input (if it is not used within checkbox groups and sf-value is not used) is either "on" or "off".
In versions prior to version 1.3.8, the form data object was created in exactly the same way. As of version 1.3.8, you have the option of converting "on" or "off" into actual boolean values within your form submission data, i.e. into 'true' or 'false'.

{

   "sf-boolean-checkbox-values": "true"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-boolean-checkbox-values
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Observe Attachments

Controls whether the form observes changes to file attachments, tracking and responding to attachment changes.

{

   "sf-observe-attachments": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-observe-attachments
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Keyboard Events

Determines whether keyboard events are enabled for the form (e.g. pressing Enter to send, pressing Backspace to go to the previous slide, pressing the left arrow to go to the left option of a conditional logic situation, and pressing the right arrow to go to the right option of a conditional logic situation).

{

   "sf-keyboard-events": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-keyboard-events
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Enable reCAPTCHA

Enables or disables reCAPTCHA verification in the form, including reCAPTCHA for spam protection.

{

   "sf-recaptcha": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-recaptcha
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Simple Data

Controls whether the form submits simple data, sending a simplified data structure.

{

   "sf-simple-data": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-simple-data
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Partial Data

Determines whether partial data submissions are allowed, enabling the sending of only the data that has been within the users step path.

{

   "sf-partial-data": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-partial-data
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Remove Invisible Slides

Controls whether slides that are conditionally invisible are removed from the HTML document.

{

   "sf-remove-conditionally-invisible-slides": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-remove-conditionally-invisible-slides
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Slider Mode

If set to true, no more submissions are allowed and StudioForm acts as a highly functional slider.

{

   "sf-slider": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-slider
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied

Swap Submit Buttons

Controls whether submit buttons are swapped into regular buttons with a sf = submit attribute.

{

   "sf-swap-submit-buttons": "true"

}

default =
true
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-swap-submit-buttons
Copy
Copied
Value
true
default =
true
|
values =
true, false
Copy
Copied

Calculate Progress

Determines whether the form calculates progress even when no progress indicators are present.

{

   "sf-calculate-progress": "false"

}

default =
false
|
values =
true, false
You can use the
xAttribute
app to quickly copy and paste these attributes if you have it installed.
Copy
Copied
Name
sf-calculate-progress
Copy
Copied
Value
false
default =
false
|
values =
true, false
Copy
Copied
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.