Survey Form

Survey forms allow you to gather valuable insights and opinions from users, helping you make informed decisions and improve your offerings.

Survey Form Hero Header
Survey Form 1 (Height 100svh)
Instructions

Thank you for choosing StudioForm! To utilise the full power of StudioForm, copy and paste the following snippet into the ‘Inside <head> tag’ section of your page settings:

<!-- [BMG] StudioForm -->

<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[sf="wrapper"]>form>*:not(:nth-child(1)){display:none}</style>');window.StudioForm = window.StudioForm || []; window.StudioForm.push(() => document.querySelectorAll('[sf-css]').forEach(e=>e.remove()))</script>

<script defer src="https://cdn.jsdelivr.net/npm/@bmg.studio/form@1/sf.js"></script>

You can also find a directory called sf-form_class-directory This contains all the combo classes for each input based on different states. Each directory will have items corresponding to the respective form.

Further information can be found in the documentation. You can also find all our other pro form components
with full client-first and copy-to-webflow functionality at StudioForm.pro.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Start Survey

Welcome to our survey! Let's begin.
Next Slide

Demographics

Help us understand you better.
This field is empty
This field is empty
Next Slide

Product Usage

How often do you use our product?
Select one option
Select one option
Next Slide

Satisfaction

Share your satisfaction level with our product.
Select one option
This field is empty
Next Slide

Features Evaluation

Rate specific features of our product.
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
Next Slide

Customer Support

Share your experience with our customer support team.
1 (Unsatisfactory) to 5 (Excellent)
Select one option
This field is empty
Next Slide

Additional Comments

Any other thoughts or suggestions?
This field is empty
Select one option
End
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Survey Form 2
Instructions

Thank you for choosing StudioForm! To utilise the full power of StudioForm, copy and paste the following snippet into the ‘Inside <head> tag’ section of your page settings:

<!-- [BMG] StudioForm -->

<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[sf="wrapper"]>form>*:not(:nth-child(1)){display:none}</style>');window.StudioForm = window.StudioForm || []; window.StudioForm.push(() => document.querySelectorAll('[sf-css]').forEach(e=>e.remove()))</script>

<script defer src="https://cdn.jsdelivr.net/npm/@bmg.studio/form@1/sf.js"></script>

You can also find a directory called sf-form_class-directory This contains all the combo classes for each input based on different states. Each directory will have items corresponding to the respective form.

Further information can be found in the documentation. You can also find all our other pro form components
with full client-first and copy-to-webflow functionality at StudioForm.pro.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Start Survey

Welcome to our survey! Let's begin.
Next Slide

Demographics

Help us understand you better.
This field is empty
This field is empty
Next Slide

Product Usage

How often do you use our product?
Select one option
Select one option
Next Slide

Satisfaction

Share your satisfaction level with our product.
Select one option
This field is empty
Next Slide

Features Evaluation

Rate specific features of our product.
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
Next Slide

Customer Support

Share your experience with our customer support team.
1 (Unsatisfactory) to 5 (Excellent)
Select one option
This field is empty
Next Slide

Additional Comments

Any other thoughts or suggestions?
This field is empty
Select one option
End
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Survey Form 3
Instructions

Thank you for choosing StudioForm! To utilise the full power of StudioForm, copy and paste the following snippet into the ‘Inside <head> tag’ section of your page settings:

<!-- [BMG] StudioForm -->

<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[sf="wrapper"]>form>*:not(:nth-child(1)){display:none}</style>');window.StudioForm = window.StudioForm || []; window.StudioForm.push(() => document.querySelectorAll('[sf-css]').forEach(e=>e.remove()))</script>

<script defer src="https://cdn.jsdelivr.net/npm/@bmg.studio/form@1/sf.js"></script>

You can also find a directory called sf-form_class-directory This contains all the combo classes for each input based on different states. Each directory will have items corresponding to the respective form.

Further information can be found in the documentation. You can also find all our other pro form components
with full client-first and copy-to-webflow functionality at StudioForm.pro.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Start Survey

Welcome to our survey! Let's begin.
Next Slide

Demographics

Help us understand you better.
This field is empty
This field is empty
Next Slide

Product Usage

How often do you use our product?
Select one option
Select one option
Next Slide

Satisfaction

Share your satisfaction level with our product.
Select one option
This field is empty
Next Slide

Features Evaluation

Rate specific features of our product.
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
Next Slide

Customer Support

Share your experience with our customer support team.
1 (Unsatisfactory) to 5 (Excellent)
Select one option
This field is empty
Next Slide

Additional Comments

Any other thoughts or suggestions?
This field is empty
Select one option
End
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Survey Form 4
Instructions

Thank you for choosing StudioForm! To utilise the full power of StudioForm, copy and paste the following snippet into the ‘Inside <head> tag’ section of your page settings:

<!-- [BMG] StudioForm -->

<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[sf="wrapper"]>form>*:not(:nth-child(1)){display:none}</style>');window.StudioForm = window.StudioForm || []; window.StudioForm.push(() => document.querySelectorAll('[sf-css]').forEach(e=>e.remove()))</script>

<script defer src="https://cdn.jsdelivr.net/npm/@bmg.studio/form@1/sf.js"></script>

You can also find a directory called sf-form_class-directory This contains all the combo classes for each input based on different states. Each directory will have items corresponding to the respective form.

Further information can be found in the documentation. You can also find all our other pro form components
with full client-first and copy-to-webflow functionality at StudioForm.pro.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Start Survey

Welcome to our survey! Let's begin.
Next Slide

Demographics

Help us understand you better.
This field is empty
This field is empty
Next Slide

Product Usage

How often do you use our product?
Select one option
Select one option
Next Slide

Satisfaction

Share your satisfaction level with our product.
Select one option
This field is empty
Next Slide

Features Evaluation

Rate specific features of our product.
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
Next Slide

Customer Support

Share your experience with our customer support team.
1 (Unsatisfactory) to 5 (Excellent)
Select one option
This field is empty
Next Slide

Additional Comments

Any other thoughts or suggestions?
This field is empty
Select one option
End
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Survey Form 5
Instructions

Thank you for choosing StudioForm! To utilise the full power of StudioForm, copy and paste the following snippet into the ‘Inside <head> tag’ section of your page settings:

<!-- [BMG] StudioForm -->

<script>document.head.insertAdjacentHTML('beforeend','<style sf-css>[sf="wrapper"]>form>*:not(:nth-child(1)){display:none}</style>');window.StudioForm = window.StudioForm || []; window.StudioForm.push(() => document.querySelectorAll('[sf-css]').forEach(e=>e.remove()))</script>

<script defer src="https://cdn.jsdelivr.net/npm/@bmg.studio/form@1/sf.js"></script>

You can also find a directory called sf-form_class-directory This contains all the combo classes for each input based on different states. Each directory will have items corresponding to the respective form.

Further information can be found in the documentation. You can also find all our other pro form components
with full client-first and copy-to-webflow functionality at StudioForm.pro.

sf-required

Manage recurring validation states.
sf-form_input
sf-required
Field Input (Required)
sf-form_checkbox-field
sf-required
Checkbox (Required)
sf-form_radio-field
sf-required
Radio (Required)
sf-form_input-select
sf-required
Select (Required)
sf-form_input-date
is-icon-left-right
sf-required
sf-form-icon-left
sf-required
Date Input (Required)
This is an error tag
sf-form_input-error-wrapper
sf-required
Error Tag (Required)
sf-form-icon-right
sf-required
Icon on Input Right (Required)
sf-form-icon-left
sf-required
Icon on Input Left (Required)
sf-form-icon-right
is-text-area
sf-required
Icon on Input Right Text Area (Required)

sf-checked

Manage recurring checked radio & checkboxes states.
sf-form_checkbox-field
sf-checked
Checkbox (Checked)
sf-form_radio-field
sf-checked
Radio (Checked)

sf-focus

Manage recurring focusing for button, radio and checkbox states.
sf-form_radio-field
sf-focus
Radio (Focused)
sf-form_checkbox-field
sf-focus
Checkbox (Focused)

sf-hide

Manage hidden states.
sf-skeleton
sf-hide
Loader Box (Currently Hidden)

sf-await

Manage awaiting states.
sf-button-child
sf-await
sf-button-await-child
sf-await
Awaiting Status of Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Start Survey

Welcome to our survey! Let's begin.
Next Slide

Demographics

Help us understand you better.
This field is empty
This field is empty
Next Slide

Product Usage

How often do you use our product?
Select one option
Select one option
Next Slide

Satisfaction

Share your satisfaction level with our product.
Select one option
This field is empty
Next Slide

Features Evaluation

Rate specific features of our product.
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
1 (Poor) to 5 (Excellent)
Select one option
Next Slide

Customer Support

Share your experience with our customer support team.
1 (Unsatisfactory) to 5 (Excellent)
Select one option
This field is empty
Next Slide

Additional Comments

Any other thoughts or suggestions?
This field is empty
Select one option
End
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.