Dashboard
Templates
Components
Video Library
Documentation
Play
Help
Settings
Log out

Dashboard

Welcome to the NoQuestionYet - your one and only multi-step form builder.

How do you want to start today?

New blank project
Connect Webflow project
Start from template

Add the NQY script to your project

My Webflow account is not connected to NQY

Grab the script below and paste it into the custom code section of your project before the closing </body> tag.
<!-- NoQuestionYet script-->
<script data-quiz-id="0" src="https://nqy.pages.dev/main.js" type="text/javascript"></script>
Copy
Disconnect Webflow account
You don’t have any projects yet

Add the NQY script to your project

My Webflow account is not connected to NQY

Grab the script below and paste it into the custom code section of your project before the closing </body> tag.
<!-- NoQuestionYet script-->
<script defer src="https://nqy.pages.dev/main.js" type="text/javascript"></script>
Copy
This is an error message.
Close message
This is an error message.
Close message

New project

Project name

Name your new project here
Cancel
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

New project

1. Choose the template

Choose the template from our template library
Go to the template library

2. Project name

Name your project started from template here
Cancel
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Set up your form

1. Name your form

What do you want your form / quiz to be called inside your project?

2. Storing user data

Do you want to store your participant’s/user’s data in a NoQuestionYet database?
(If you choose no, you can still configure your form to send submissions by email)

3. Set your content source

Do you want your form content to come from the CMS or do you want to enter it separately into each screen (a static form)?
Cancel
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Are you sure you want to delete the form?

Removing the form means removing all participants from the database if you have any.
CancelDelete

Are you sure you want to disconnect Webflow account?

Disconnecting Webflow account means removing all sites from the dashboard that is connected to Webflow.
CancelDelete

Add the NQY script to your project

I've connected my Webflow account

If you’ve connected your Webflow with NQY then just hit the button to add the script to the custom code section in your project. Simple!
Add the script
The project needs to be published so the script is live. The script contains the executable code to run your flow and add points etc at the right times.

My Webflow account is not connected to NQY

Grab the script below and paste it into the custom code section of your project before the closing </body> tag.
<!-- NoQuestionYet script-->
<script data-quiz-id="0" src="https://nqy.pages.dev/main.js" type="text/javascript"></script>
Copy
The project needs to be published so the script is live. The script contains the executable code to run your flow and add points etc at the right times.
Close
1
/
1

Multistep form configuration

Add the NQY script, if you didn't already

If you haven’t added the NQY script to the custom code section of your project you can do that from the dashboard by hitting the button next to your project name.

Select the form you want to use

Add a native Webflow form to your page, and add the attribute below to “Form Name”.
Attribute
Name
nqy-form
Value
form
Description
Once you've added the Webflow form to the page, add the custom attribute nqy-form="form" to the form or form block element.

Additionally: If you want to have more than one form on the page, add nqy-form="form-2", nqy-form="form-3" etc. attributes to each form.
Skip setupNext
1
/
1

Manage form submissions

Select how you want to receive your submissions

Decide if you want to get individual submissions via email, or you want a cleaner inbox in your life without risking Webflow’s form submission limit.
Attribute
Name
nqy-behavior
Value
default
Description
By default we prevent the form from submitting. But if you want to get individual email submissions add the attribute nqy-behavior="default" to the "form" element of Form Name.
Description
By default we prevent the form from submitting, so your users can play with the form as much as they want without risking Webflow’s form submission limit.
Previous
Skip setupNext
1
/
1

Set up your form's steps

Create form steps

Identify each step of Form Name by adding the relevant attribute. (Steps are any sections of your form e.g. each question would be a step. Steps can contain any of the usual form elements: text inputs, radio buttons, checkboxes, select inputs, text areas).
Attribute
Name
nqy-step
Value
step-n
Description
Every step should be wrapped in a separate div block with the attribute nqy-step="step-n", where n is a step number (e.g nqy-step="step-1" nqy-step="step-2"). The final step should be nqy-step="final".

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.

Choose "next step" trigger

Do you want to show the next question when a user selects a choice? Do you want users to go back and forth through the steps?
Attribute
Name
nqy-action
Value
next
Description
Add the attribute nqy-action="next" to every "Next" button

Heads up: To make questions mandatory, mark the inputs as required. Add the nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
previous
Description
Add the attribute nqy-action="next" to every "Next" button.

Add the attribute nqy-action="previous" to every "Previous" button.

Heads up: To make questions mandatory, mark the inputs as required. Add the nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
next
Description
Add the attribute nqy-action="next" to every radio button element (actual radio button with a circle symbol in the navigator).
Attribute
Name
nqy-destination
Value
step-n
Description
To choose the destination for each answer add the attribute nqy-destination="step-n" to every radio button with an answer option, where "n" is the number of the desired next step if this option is chosen.
Attribute
Name
nqy-conditional
Value
step-conditional
Description
Add the attribute nqy-action="next" and nqy-conditional="step-conditional" to every "Next" button.

Heads up: To make questions mandatory, mark the inputs as required. Add the nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Previous
Skip setupNext
1
/
1

Score configuration

Add points/right answers

Do you want a user to gain points for certain answers, or just track the number of correct answers they get? If neither you can just skip this step.
Attribute
Name
nqy-points
Value
10
Description
Add the nqy-points="n" (e.g. nqy-points="40") to every radio button (on the actual circle of the radio button).
Attribute
Name
nqy-state
Value
true
Description
Add the nqy-state="true" to the radio button with the right answer (on the actual circle of the radio button).
Previous
Skip setupNext
1
/
1

End/score screen configuration

How do you want to set up the final/user feedback screen?

You can choose to show points, custom messages or the number of correct answers.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-result
Value
points
Description
Add the attribute nqy-result="points" to the text that should show the points amount.
Attribute
Name
nqy-result
Value
answers
Description
If you have chosen to tally a user’s number of correct answers, add the attribute nqy-result="answers" to your copy that should show the number of correct answers the user has.

If you want to show the total number of questions as well (e.g. 5/10) add the attribute nqy-question="total" to your copy that shows the total number of questions.
Attribute
Name
nqy-step
Value
final
Description
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.
Attribute
Name
nqy-range-from/nqy-range-to
Value
minimum number/maximum number
Description
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.
Previous
Skip setupNext
1
/
1

Do you want a progress bar?

Show a user their progress

If you want to add a progress bar to show a user how far through the form they are, implement this step.
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-bar
Description
To add the progress bar "fill" within the progress wrapper, add a div block with the attribute nqy-progress="progress-bar", and style away!
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-part
Description
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.
Attribute
Name
nqy-progress
Value
part-element
Description
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.
Attribute
Name
nqy-progress
Value
progress
Description
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".
Attribute
Name
nqy-progress
Value
progress-circle
Description
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.
Attribute
Name
nqy-progress
Value
progress-circle-element
Description
Inside the circle container, place the actual circle element, styled as desired, with the attribute nqy-progress="progress-circle-element".

Display the question count

Show the user the current question number and the total number of questions in your form.
Attribute
Name
nqy-question
Value
current
Description
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.
Attribute
Name
nqy-question
Value
total
Description
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.
Previous
Skip setupNext
1
/
1

Additional elements

Do you want to add a splash / intro screen?

This is a screen a user would see when they first land on the page before starting Form Name.
Attribute
Name
nqy-formshow
Value
formshow
Description
Outside of the main “form” element add a div block with  the attribute nqy-formshow="formshow".
Attribute
Name
nqy-formshow
Value
form-name
Description
Inside the “formshow” div add a link/button with the nqy-formshow="form-name" attribute (where form-name could be anything you like: “quiz”, “onboarding”, “hello” etc.). This link/button would trigger the start of the form.

Add the same attribute nqy-formshow="form-name" with the same "form-name" to your main form element with attribute nqy-form="form".

Start over / play again

This reloads the page and starts the form from the beginning.
Attribute
Name
nqy-action
Value
start-over
Description
To create a “Start again” button, that reloads the page and starts the form from the beginning add the nqy-action="start-over" attribute to every button that should reload the page.
Previous
Skip setupFinish
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
1
/
1

Multistep form configuration

Add the NQY script, if you didn't already

If you haven’t added the NQY script to the custom code section of your project you can do that from the dashboard by hitting the button next to your project name.

Select the form you want to use

Add a native Webflow form to your page, and add the attribute below to “Form Name”.
Attribute
Name
nqy-form
Value
form
Description
Once you've added the Webflow form to the page, add the custom attribute nqy-form="form" to the form or form block element.

Additionally: If you want to have more than one form on the page, add nqy-form="form-2", nqy-form="form-3" etc. attributes to each form.
Description
Add the Collection List element to the page inside the Form Name and connect it to the Questions collection.
Skip setupNext
1
/
1

Manage form submissions

Select how you want to receive your submissions

Decide if you want to get individual submissions via email, or you want a cleaner inbox in your life without risking Webflow’s form submission limit.
Attribute
Name
nqy-behavior
Value
default
Description
By default we prevent the form from submitting. But if you want to get individual email submissions add the attribute nqy-behavior="default" to the "form" element of Form Name.
Description
By default we prevent the form from submitting, so your users can play with the form as much as they want without risking Webflow’s form submission limit.
Previous
Skip setupNext
1
/
1

Set up your form's steps

Create form steps

Identify each step of Form Name by adding the relevant attribute. (Steps are any sections of your form e.g. each question would be a step. Steps can contain any of the usual form elements: text inputs, radio buttons, checkboxes, select inputs, text areas).
Attribute
Name
nqy-step
Value
{{ Step Number }}
Description
In the CMS: Add a Step Number plain text field to the Questions CMS collection you created in step 3. 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.

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.

Choose "next step" trigger

Do you want to show the next question when a user selects a choice? Do you want users to go back and forth through the steps?
Attribute
Name
nqy-action
Value
next
Description
Add attributes nqy-action="next" to every "Next" button

Heads up: To set answers as mandatory, mark the inputs as required. Add nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
previous
Description
Add the attributes nqy-action="next" to every "Next" button.

Add the attribute nqy-action="previous" to every "Previous" button.

Heads up: To set answers as mandatory, mark the inputs as required. Add nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
next
Description
Add attributes nqy-action="next" to every radio button element (actual radio button with a circle symbol in the navigator).
Attribute
Name
nqy-destination
Value
step-n
Description
To choose the destination for each answer add the attribute nqy-destination="step-n" to every radio button with an answer option, where "n" is the number of the desired next step if this option is chosen.
Attribute
Name
nqy-conditional
Value
step-conditional
Description
Add the attribute nqy-action="next" and nqy-conditional="step-conditional" to every "Next" button.

Heads up: To set answers as mandatory, mark the inputs as required. Add nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Previous
Skip setupNext
1
/
1

Score configuration

Add points/right answers

Do you want a user to gain points for certain answers, or just track the number of correct answers they get? If neither you can just skip this step.
Attribute
Name
nqy-points
Value
{{ Answer Points }}
Description
In the CMS: Add an Answer Points plain text field to the Questions CMS collection you created in step 3. 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.
Attribute
Name
nqy-state
Value
{{ Answer State }}
Description
In the CMS: Add an Answer State plain text field to the Questions CMS collection you created in step 3. 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.
Previous
Skip setupNext
1
/
1

End/score screen configuration

How do you want to set up the final/user feedback screen?

You can choose to show points, custom messages or the number of correct answers.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-result
Value
points
Description
Add the attribute nqy-result="points" to the text that should show the points amount.
Attribute
Name
nqy-result
Value
answers
Description
If you have chosen to tally a user’s number of correct answers, add the attribute nqy-result="answers" to your copy that should show the number of correct answers the user has.

If you want to show the total number of questions as well (e.g. 5/10) add the attribute nqy-question="total" to your copy that shows the total number of questions.
Attribute
Name
nqy-step
Value
final
Description
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.
Attribute
Name
nqy-range-from/nqy-range-to
Value
minimum number/maximum number
Description
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.
Previous
Skip setupNext
1
/
1

Do you want a progress bar?

Show a user their progress

If you want to add a progress bar to show a user how far through the form they are, implement this step.
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-bar
Description
To add the progress bar "fill" within the progress wrapper, add a div block with the attribute nqy-progress="progress-bar", and style away!
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-part
Description
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.
Attribute
Name
nqy-progress
Value
part-element
Description
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.
Attribute
Name
nqy-progress
Value
progress
Description
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".
Attribute
Name
nqy-progress
Value
progress-circle
Description
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.
Attribute
Name
nqy-progress
Value
progress-circle-element
Description
Inside the circle container, place the actual circle element, styled as desired, with the attribute nqy-progress="progress-circle-element".

Display the question count

Show the user the current question number and the total number of questions in your form.
Attribute
Name
nqy-question
Value
current
Description
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.
Attribute
Name
nqy-question
Value
total
Description
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.
Previous
Skip setupNext
1
/
1

Additional elements

Do you want to add a splash / intro screen?

This is a screen a user would see when they first land on the page before starting Form Name.
Attribute
Name
nqy-formshow
Value
formshow
Description
Outside of the main “form” element add a div block with  the attribute nqy-formshow="formshow".
Attribute
Name
nqy-formshow
Value
form-name
Description
Inside the “formshow” div add a link/button with the nqy-formshow="form-name" attribute (where form-name could be anything you like: “quiz”, “onboarding”, “hello” etc.). This link/button would trigger the start of the form.

Add the same attribute nqy-formshow="form-name" with the same "form-name" to your main form element with attribute nqy-form="form".

Start over / play again

This reloads the page and starts the form from the beginning.
Attribute
Name
nqy-action
Value
start-over
Description
To create a “Start again” button, that reloads the page and starts the form from the beginning add the nqy-action="start-over" attribute to every button that should reload the page.
Previous
Skip setupFinish
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
1
/
1

Multistep form configuration

Add the NQY script, if you didn't already

If you haven’t added the NQY script to the custom code section of your project you can do that from the dashboard by hitting the button next to your project name.

Select the form you want to use

Add a native Webflow form to your page, and add the attribute below to “Form Name”.
Attribute
Name
nqy-form
Value
form
Description
Once you've added the Webflow form to the page, add the custom attribute nqy-form="form" to the form or form block element.

Additionally: If you want to have more than one form on the page, add nqy-form="form-2", nqy-form="form-3" etc. attributes to each form.
Skip setupNext
1
/
1

Manage form submissions

Select how you want to receive your submissions

Decide if you want to get individual submissions via email, or you want a cleaner inbox in your life without risking Webflow’s form submission limit.
Attribute
Name
nqy-behavior
Value
default
Description
By default we prevent the form from submitting. But if you want to get individual email submissions add the attribute nqy-behavior="default" to the "form" element of Form Name.
Description
By default we prevent the form from submitting, so your users can play with the form as much as they want without risking Webflow’s form submission limit.
Previous
Skip setupNext
1
/
1

Set up your form's steps

Create form steps

Identify each step of Form Name by adding the relevant attribute. (Steps are any sections of your form e.g. each question would be a step. Steps can contain any of the usual form elements: text inputs, radio buttons, checkboxes, select inputs, text areas).
Attribute
Name
nqy-step
Value
step-n
Description
Every step should be wrapped in a separate div block with the attribute nqy-step="step-n", where n is a step number (e.g nqy-step="step-1" nqy-step="step-2"). The final step should be nqy-step="final".

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.

Choose "next step" trigger

Do you want to show the next question when a user selects a choice? Do you want users to go back and forth through the steps?
Attribute
Name
nqy-action
Value
next
Description
Add the attribute nqy-action="next" to every "Next" button

Heads up: To make questions mandatory, mark the inputs as required. Add the nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
previous
Description
Add the attribute nqy-action="next" to every "Next" button.

Add the attribute nqy-action="previous" to every "Previous" button.

Heads up: To make questions mandatory, mark the inputs as required. Add the nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
next
Description
Add the attribute nqy-action="next" to every radio button element (actual radio button with a circle symbol in the navigator).
Attribute
Name
nqy-destination
Value
step-n
Description
To choose the destination for each answer add the attribute nqy-destination="step-n" to every radio button with an answer option, where "n" is the number of the desired next step if this option is chosen.
Attribute
Name
nqy-conditional
Value
step-conditional
Description
Add the attribute nqy-action="next" and nqy-conditional="step-conditional" to every "Next" button.

Heads up: To make questions mandatory, mark the inputs as required. Add the nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Previous
Skip setupNext
1
/
1

Score configuration

Add points/right answers

Do you want a user to gain points for certain answers, or just track the number of correct answers they get? If neither you can just skip this step.
Attribute
Name
nqy-points
Value
10
Description
Add the nqy-points="n" (e.g. nqy-points="40") to every radio button (on the actual circle of the radio button).
Attribute
Name
nqy-state
Value
true
Description
Add the nqy-state="true" to the radio button with the right answer (on the actual circle of the radio button).
Previous
Skip setupNext
1
/
1

Capturing user data in the database

Database set up and intergration

Configure the necessary input fields to safely capture and store user responses in the database.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block that contains input fields for the database interaction.
Attribute
Name
nqy-data
Value
data
Description
Add the attribute nqy-data="data" to the same div block that contains input fields for the interaction.
Attribute
Name
nqy-quiz
Value
user-name/user-email
Description
Name and Email are required input fields to send data to the database. The name input field should have the attribute nqy-quiz="user-name" and Email input field should have the attribute nqy-quiz="user-email".
Attribute
Name
nqy-quiz
Value
submit
Description
Add the attribute nqy-quiz="submit" to the Form Name submit button.
Attribute
Name
nqy-quiz
Value
quiz-name
Description
Put the text with Form Name and the attribute nqy-quiz="quiz-name" anywhere on the page with the Form Name
Previous
Skip setupNext
1
/
1

End/score screen configuration

How do you want to set up the final/user feedback screen?

You can choose to show points, custom messages or the number of correct answers.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-result
Value
points
Description
Add the attribute nqy-result="points" to the text that should show the points amount.
Attribute
Name
nqy-result
Value
answers
Description
If you have chosen to tally a user’s number of correct answers, add the attribute nqy-result="answers" to your copy that should show the number of correct answers the user has.

If you want to show the total number of questions as well (e.g. 5/10) add the attribute nqy-question="total" to your copy that shows the total number of questions.
Attribute
Name
nqy-step
Value
final
Description
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.
Attribute
Name
nqy-range-from/nqy-range-to
Value
minimum number/maximum number
Description
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.
Previous
Skip setupNext
1
/
1

Do you want a progress bar?

Show a user their progress

If you want to add a progress bar to show a user how far through the form they are, implement this step.
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-bar
Description
To add the progress bar "fill" within the progress wrapper, add a div block with the attribute nqy-progress="progress-bar", and style away!
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-part
Description
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.
Attribute
Name
nqy-progress
Value
part-element
Description
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.
Attribute
Name
nqy-progress
Value
progress
Description
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".
Attribute
Name
nqy-progress
Value
progress-circle
Description
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.
Attribute
Name
nqy-progress
Value
progress-circle-element
Description
Inside the circle container, place the actual circle element, styled as desired, with the attribute nqy-progress="progress-circle-element".

Display the question count

Show the user the current question number and the total number of questions in your form.
Attribute
Name
nqy-question
Value
current
Description
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.
Attribute
Name
nqy-question
Value
total
Description
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.
Previous
Skip setupNext
1
/
1

Additional elements

Do you want to add a splash / intro screen?

This is a screen a user would see when they first land on the page before starting Form Name.
Attribute
Name
nqy-formshow
Value
formshow
Description
Outside of the main “form” element add a div block with  the attribute nqy-formshow="formshow".
Attribute
Name
nqy-formshow
Value
form-name
Description
Inside the “formshow” div add a link/button with the nqy-formshow="form-name" attribute (where form-name could be anything you like: “quiz”, “onboarding”, “hello” etc.). This link/button would trigger the start of the form.

Add the same attribute nqy-formshow="form-name" with the same "form-name" to your main form element with attribute nqy-form="form".

Start over / play again

This reloads the page and starts the form from the beginning.
Attribute
Name
nqy-action
Value
start-over
Description
To create a “Start again” button, that reloads the page and starts the form from the beginning add the nqy-action="start-over" attribute to every button that should reload the page.
Previous
Skip setupFinish
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
1
/
1

Multistep form configuration

Add the NQY script, if you didn't already

If you haven’t added the NQY script to the custom code section of your project you can do that from the dashboard by hitting the button next to your project name.

Select the form you want to use

Add a native Webflow form to your page, and add the attribute below to “Form Name”.
Attribute
Name
nqy-form
Value
form
Description
Once you've added the Webflow form to the page, add the custom attribute nqy-form="form" to the form or form block element.

Additionally: If you want to have more than one form on the page, add nqy-form="form-2", nqy-form="form-3" etc. attributes to each form.
Description
Add the Collection List element to the page inside the Form Name and connect it to the Questions collection.
Skip setupNext
1
/
1

Manage form submissions

Select how you want to receive your submissions

Decide if you want to get individual submissions via email, or you want a cleaner inbox in your life without risking Webflow’s form submission limit.
Attribute
Name
nqy-behavior
Value
default
Description
By default we prevent the form from submitting. But if you want to get individual email submissions add the attribute nqy-behavior="default" to the "form" element of Form Name.
Description
By default we prevent the form from submitting, so your users can play with the form as much as they want without risking Webflow’s form submission limit.
Previous
Skip setupNext
1
/
1

Set up your form's steps

Create form steps

Identify each step of Form Name by adding the relevant attribute. (Steps are any sections of your form e.g. each question would be a step. Steps can contain any of the usual form elements: text inputs, radio buttons, checkboxes, select inputs, text areas).
Attribute
Name
nqy-step
Value
{{ Step Number }}
Description
In the CMS: Add a Step Number plain text field to the Questions CMS collection you created in step 3. 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.

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.

Choose "next step" trigger

Do you want to show the next question when a user selects a choice? Do you want users to go back and forth through the steps?
Attribute
Name
nqy-action
Value
next
Description
Add attributes nqy-action="next" to every "Next" button

Heads up: To set answers as mandatory, mark the inputs as required. Add nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
previous
Description
Add the attributes nqy-action="next" to every "Next" button.

Add the attribute nqy-action="previous" to every "Previous" button.

Heads up: To set answers as mandatory, mark the inputs as required. Add nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Attribute
Name
nqy-action
Value
next
Description
Add attributes nqy-action="next" to every radio button element (actual radio button with a circle symbol in the navigator).
Attribute
Name
nqy-destination
Value
step-n
Description
To choose the destination for each answer add the attribute nqy-destination="step-n" to every radio button with an answer option, where "n" is the number of the desired next step if this option is chosen.
Attribute
Name
nqy-conditional
Value
step-conditional
Description
Add the attribute nqy-action="next" and nqy-conditional="step-conditional" to every "Next" button.

Heads up: To set answers as mandatory, mark the inputs as required. Add nqy-form-active class to the radio button/checkbox wrapper for a custom active state.
Previous
Skip setupNext
1
/
1

Score configuration

Add points/right answers

Do you want a user to gain points for certain answers, or just track the number of correct answers they get? If neither you can just skip this step.
Attribute
Name
nqy-points
Value
{{ Answer Points }}
Description
In the CMS: Add an Answer Points plain text field to the Questions CMS collection you created in step 3. 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.
Attribute
Name
nqy-state
Value
{{ Answer State }}
Description
In the CMS: Add an Answer State plain text field to the Questions CMS collection you created in step 3. 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.
Previous
Skip setupNext
1
/
1

Capturing user data in the database

Database set up and intergration

Configure the necessary input fields to safely capture and store user responses in the database.
Attribute
Name
nqy-step
Copy
Value
final
Copy
Description
Add the attribute nqy-step="final" to the div block that contains input fields for the database interaction.
Attribute
Name
nqy-data
Copy
Value
data
Copy
Description
Add the attribute nqy-data="data" to the same div block that contains input fields for the database interaction.
Attribute
Name
nqy-quiz
Copy
Value
user-name/user-email
Copy
Description
Name and Email are required input fields to send data to the database. The Name input field should have the attribute nqy-quiz="user-name" and the Email input field should have the attribute nqy-quiz="user-email".
Attribute
Name
nqy-quiz
Copy
Value
submit
Copy
Description
Add the attribute nqy-quiz="submit" to the Form Name submit button.
Attribute
Name
nqy-quiz
Copy
Value
quiz-name
Copy
Description
Put the text with Form Name and the attribute nqy-quiz="quiz-name" anywhere on the page with the Form Name
Previous
Skip setupNext
1
/
1

End/score screen configuration

How do you want to set up the final/user feedback screen?

You can choose to show points, custom messages or the number of correct answers.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-step
Value
final
Description
Add the attribute nqy-step="final" to the div block with final screen.

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.
Attribute
Name
nqy-result
Value
points
Description
Add the attribute nqy-result="points" to the text that should show the points amount.
Attribute
Name
nqy-result
Value
answers
Description
If you have chosen to tally a user’s number of correct answers, add the attribute nqy-result="answers" to your copy that should show the number of correct answers the user has.

If you want to show the total number of questions as well (e.g. 5/10) add the attribute nqy-question="total" to your copy that shows the total number of questions.
Attribute
Name
nqy-step
Value
final
Description
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.
Attribute
Name
nqy-range-from/nqy-range-to
Value
minimum number/maximum number
Description
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.
Previous
Skip setupNext
1
/
1

Do you want a progress bar?

Show a user their progress

If you want to add a progress bar to show a user how far through the form they are, implement this step.
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-bar
Description
To add the progress bar "fill" within the progress wrapper, add a div block with the attribute nqy-progress="progress-bar", and style away!
Attribute
Name
nqy-progress
Value
progress
Description
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.
Attribute
Name
nqy-progress
Value
progress-part
Description
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.
Attribute
Name
nqy-progress
Value
part-element
Description
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.
Attribute
Name
nqy-progress
Value
progress
Description
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".
Attribute
Name
nqy-progress
Value
progress-circle
Description
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.
Attribute
Name
nqy-progress
Value
progress-circle-element
Description
Inside the circle container, place the actual circle element, styled as desired, with the attribute nqy-progress="progress-circle-element".

Display the question count

Show the user the current question number and the total number of questions in your form.
Attribute
Name
nqy-question
Value
current
Description
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.
Attribute
Name
nqy-question
Value
total
Description
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.
Previous
Skip setupNext
1
/
1

Additional elements

Do you want to add a splash / intro screen?

This is a screen a user would see when they first land on the page before starting Form Name.
Attribute
Name
nqy-formshow
Value
formshow
Description
Outside of the main “form” element add a div block with  the attribute nqy-formshow="formshow".
Attribute
Name
nqy-formshow
Value
form-name
Description
Inside the “formshow” div add a link/button with the nqy-formshow="form-name" attribute (where form-name could be anything you like: “quiz”, “onboarding”, “hello” etc.). This link/button would trigger the start of the form.

Add the same attribute nqy-formshow="form-name" with the same "form-name" to your main form element with attribute nqy-form="form".

Start over / play again

This reloads the page and starts the form from the beginning.
Attribute
Name
nqy-action
Value
start-over
Description
To create a “Start again” button, that reloads the page and starts the form from the beginning add the nqy-action="start-over" attribute to every button that should reload the page.
Previous
Skip setupFinish
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.