Video Library
A collection of short videos to help you get started and customize your multistep form.
.png)
How to set up form with one correct answer
1. Add Form element
Add a native Webflow form to the page, and set up an attribute nqy-form="form" to the form or form block element.
Add form-2, form-3, etc if you want to have more than one form on the page.
By default we prevent the form from submitting, so your users can play with the form as much as they want without hitting the form submission limit of Webflow. If you need the default behavior add attribute nqy-behavior="default" to the form element.
2. Add Form steps
Every quiz step should have an attribute nqy-step="step-n", where n is a step number e.g. nqy-step="step-1" nqy-step="step-2".
Don’t style the display of the div-blocks with nqy-step attribute as the style might be overwritten by the script. To avoid unexpected behavior, add another div block inside and style the display of it the way you want. Step block should only indicate which step we are currently on.
3. Add step triggers
To go to the next step you can use “Next” and “Previous” buttons or radio buttons with answers.
- If you have "Next" buttons as a next step trigger:
Add attributesnqy-action="next"to every "Next" button
- If you have "Next" and "Previous" buttons:
Add attributesnqy-action="next"to every "Next" button. Add attributenqy-action="previous"
- If you have answers radio buttons as a next step trigger:
Add attributesnqy-action="next"to every radio button element (actual radio button with a circle symbol in the navigator).
To create a custom active class for radio buttons and checkboxes (when they are checked) addnqy-form-activeclass to the radio button/checkbox wrapper.
4. Define what answer option is correct
Add nqy-state="true" to the radio button with correct answer (actual circle of the radio button)
5. Add final screen
This is the end game for your quiz player. Add an nqy-step="final" attribute to the final screen.
How to set up form with points for each answer
1. Add Form element
Add a native Webflow form to the page, and set up an attribute nqy-form="form" to the form or form block element.
Add form-2, form-3, etc if you want to have more than one form on the page.
By default we prevent the form from submitting, so your users can play with the form as much as they want without hitting the form submission limit of Webflow. If you need the default behavior add attribute nqy-behavior="default" to the form element.
2. Add Form steps
Every quiz step should have an attribute nqy-step="step-n", where n is a step number e.g. nqy-step="step-1" nqy-step="step-2".
Don’t style the display of the div-blocks with nqy-step attribute as the style might be overwritten by the script. To avoid unexpected behavior, add another div block inside and style the display of it the way you want. Step block should only indicate which step we are currently on.
3. Add step triggers
To go to the next step you can use “Next” and “Previous” buttons or radio buttons with answers.
- If you have "Next" buttons as a next step trigger:
Add attributesnqy-action="next"to every "Next" button
- If you have "Next" and "Previous" buttons:
Add attributesnqy-action="next"to every "Next" button. Add attributenqy-action="previous"to every "Previous" button.
- If you have answers radio buttons as a next step trigger:
Add attributesnqy-action="next"to every radio button element (actual radio button with a circle symbol in the navigator).
To create a custom active class for radio buttons and checkboxes (when they are checked) addnqy-form-activeclass to the radio button/checkbox wrapper.
4. Add points to each answer option
Add nqy-points="n" (example nqy-points="40") to every radio button (actual circle of the radio button)
5. Add final screen
This is the end game for your quiz player. Add an nqy-step="final" attribute to the final screen.
How to set up CMS form with one correct answer
1. Add Form element
Add a native Webflow form to the page, and set up an attribute nqy-form="form" to the form or form block element.
Add form-2, form-3, etc if you want to have more than one form on the page.
By default we prevent the form from submitting, so your users can play with the form as much as they want without hitting the form submission limit of Webflow. If you need the default behavior add attribute nqy-behavior="default" to the form element.
2. Add CMS collection
Create a CMS collection with questions and answer options. Add the Collection List element to the page inside the form from the step 1 and connect it to the Questions collection.
3. Add Form steps
In the CMS: Add a Step Number plain text field to the Questions CMS collection you created in step 2. The Step Number field for each question will determine the order of the form’s steps e.g. "step-1", "step-2", "step-3".
In the Canvas: Every step should be wrapped in a separate div block with the attribute nqy-step="{{ Step Number }}" where {{ Step Number }} is a dynamic value coming from the CMS Step Number field. To add the dynamic value click on the purple dot at the top left corner of the attribute’s value input and select the Step Number CMS field.
The final step should be nqy-step="final" and should be outside the collection with questions.
Don’t style the display of the div-blocks with nqy-step attribute as the style might be overwritten by the script. To avoid unexpected behavior, add another div block inside and style the display of it the way you want. Step block should only indicate which step we are currently on.
4. Add step triggers
To go to the next step you can use “Next” and “Previous” buttons or radio buttons with answers.
- If you have "Next" buttons as a next step trigger:
Add attributesnqy-action="next"to every "Next" button
- If you have "Next" and "Previous" buttons:
Add attributesnqy-action="next"to every "Next" button. Add attributenqy-action="previous"
- If you have answers radio buttons as a next step trigger:
Add attributesnqy-action="next"to every radio button element (actual radio button with a circle symbol in the navigator).
To create a custom active class for radio buttons and checkboxes (when they are checked) addnqy-form-activeclass to the radio button/checkbox wrapper.
5. Define what answer option is correct
In the CMS: Add an Answer State plain text field to the Questions CMS collection you created in step 2. Each answer option should has its own Answer State field. Add “true” to the right answer option.
In the Canvas: Add the attribute nqy-state="{{ Answer State }}" to every radio button (in the actual circle of the radio button), where {{ Answer State }} is a dynamic value coming from the CMS Answer State field. To add the dynamic value click on the purple dot at the top left corner of the attribute’s value input and select the Answer State CMS field.
6. Add final screen
This is the end game for your quiz player. Add an nqy-step="final" attribute to the final screen.
How to set up CMS form with points for each answer
1. Add Form element
Add a native Webflow form to the page, and set up an attribute nqy-form="form" to the form or form block element.
Add form-2, form-3, etc if you want to have more than one form on the page.
By default we prevent the form from submitting, so your users can play with the form as much as they want without hitting the form submission limit of Webflow. If you need the default behavior add attribute nqy-behavior="default" to the form element.
2. Add CMS collection
Create a CMS collection with questions and answer options. Add the Collection List element to the page inside the form from the step 1 and connect it to the Questions collection.
3. Add Form steps
In the CMS: Add a Step Number plain text field to the Questions CMS collection you created in step 2. The Step Number field for each question will determine the order of the form’s steps e.g. "step-1", "step-2", "step-3".
In the Canvas: Every step should be wrapped in a separate div block with the attribute nqy-step="{{ Step Number }}" where {{ Step Number }} is a dynamic value coming from the CMS Step Number field. To add the dynamic value click on the purple dot at the top left corner of the attribute’s value input and select the Step Number CMS field.
The final step should be nqy-step="final" and should be outside the collection with questions.
Don’t style the display of the div-blocks with nqy-step attribute as the style might be overwritten by the script. To avoid unexpected behavior, add another div block inside and style the display of it the way you want. Step block should only indicate which step we are currently on.
4. Add step triggers
To go to the next step you can use “Next” and “Previous” buttons or radio buttons with answers.
- If you have "Next" buttons as a next step trigger:
Add attributesnqy-action="next"to every "Next" button
- If you have "Next" and "Previous" buttons:
Add attributesnqy-action="next"to every "Next" button. Add attributenqy-action="previous"
- If you have answers radio buttons as a next step trigger:
Add attributesnqy-action="next"to every radio button element (actual radio button with a circle symbol in the navigator).
To create a custom active class for radio buttons and checkboxes (when they are checked) addnqy-form-activeclass to the radio button/checkbox wrapper.
5. Define points for every answer
In the CMS: Add an Answer Points plain text field to the Questions CMS collection you created in step 2. Each answer option should has its own Answer Points field. Every Answer Points field should have the amount of points you want to allocate to each option.
In the Canvas: Add the attribute nqy-points="{{ Answer Points }}" to every radio button (in the actual circle of the radio button), where {{ Answer Points }} is a dynamic value coming from the CMS Answer Points field. To add the dynamic value click on the purple dot at the top left corner of the attribute’s value input and select the Answer Points CMS field.
6. Add final screen
This is the end game for your quiz player. Add an nqy-step="final" attribute to the final screen.
How to set up conditional logic
1. Add "Next" button inside the quiz step
Add a button element inside the quiz step and assign attributes nqy-action="next" and nqy-conditional="step-conditional" attributes.
2. Add destination to every answer
To every radio button in the question add attribute nqy-destination="step-n" with the number of the desired next step if this option was chosen.
How to set up custom result screens
1. Define every final screen
Add the attribute nqy-step="final" to every final screen (div block). You can create a CMS collection with the results and put the div block with the attribute nqy-step="final" inside the CMS collection list connected to the Results collection.
Important: To avoid unexpected behavior don’t style the display of the div-blocks with nqy-step attribute, instead add another div block inside and style the display of it the way you want.
2. Set the range for every final screen
Add the attribute nqy-range-from="minimum number" and nqy-range-to="maximum number" to every final screen div block. (The minimum and maximum numbers are the minimum and maximum number of points for this custom result).
If you want the results to come from the CMS, add the relevant fields to the Results Collection and pull the dynamic value from the CMS fields to the minimum and maximum numbers values.
How to add simple progress bar
1. Set up a progress bar
For a linear progress bar that fills-in as users advance through the form, create a main wrapper with the attribute nqy-progress="progress" to set the empty progress bar.
To add the progress bar "fill" within the progress wrapper, add a div block with the attribute nqy-progress="progress-bar", and style it the way you want.
2. Display the question count
Show the user the current question number and the total number of questions in your form.
Add the attribute nqy-question="current" to the text element that should show the current question number.
Important: Keep in mind that this feature may not perform optimally with conditional logic, as skipped questions could potentially lead to user confusion.
Add the attribute nqy-question="total" to the text element that should show the total number of questions.
How to add segmented progress bar
1. Set up segmented progress bar
For the segmented progress bar with the number of filled blocks changing based on answered questions.
Add the attribute nqy-progress="progress" to the div block - main wrapper for the progress bar.
Within the main progress wrapper, add a div block as a container for the segments, then add the attribute nqy-progress="progress-part" to it.
Within the segment container, add a div block as an actual segment (representing a question or step), and add the attribute nqy-progress="part-element" to it.
By default, segments are in the non-active state. For an active state styling (for a current or answered question/step), add a combo class "active" to the part-element.
2. Display the question count
Show the user the current question number and the total number of questions in your form.
Add the attribute nqy-question="current" to the text element that should show the current question number.
Add the attribute nqy-question="total" to the text element that should show the total number of questions.
Important: Keep in mind that this feature may not perform optimally with conditional logic, as skipped questions could potentially lead to user confusion.
How to add circular progress bar
1. Set up circular progress bar
For a circular progress bar that fills in as the user progresses through the questionnaire. Begin by adding a main wrapper for the progress bar, and assign it the attribute nqy-progress="progress".
Within the main progress wrapper, include a div block that serves as a container for the circle and the current/total questions, and give it the attribute nqy-progress="progress-circle".
Heads up: In the progress circle container you may also add text indicating the current and total question count, using nqy-progress="current" and nqy-progress="total" attributes respectively.
Inside the circle container, place the actual circle element, styled as desired, with the attribute nqy-progress="progress-circle-element".
2. Display the question count
Show the user the current question number and the total number of questions in your form.
Add the attribute nqy-question="current" to the text element that should show the current question number.
Add the attribute nqy-question="total" to the text element that should show the total number of questions.
Important: Keep in mind that this feature may not perform optimally with conditional logic, as skipped questions could potentially lead to user confusion.
How to add an intro screen before the form
1. Set up intro/splash screen
If you want to have a splash screen before the start of the quiz, add a div block with the necessary content and button/link. Add attribute nqy-formshow="formshow" to the splash screen div.
The splash screen div should be OUTSIDE the main form. Add nqy-formshow="form-name" (where form-name could be anything you like: “quiz”, “onboarding”, “hello” etc.) attribute to the button in the splash screen div. Add the same attribute nqy-formshow="form-name" with the same "form-name" to an element with attribute nqy-form="form" - your main multi-step form.
