FormlyQuiz

You can show a different final result based on the user's answers.

Additional code/setup

Add these scripts before the </body> tag

<!-- Call Code Select Script-->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/countrycode.js"> </script>

Add a select input

Add a 'select' element, add 1 choice with the placeholder text and set the value as empty.

You add powerups to this select element.

Attributes

FomlyQuiz

This feature takes all of the user's choices, and at the end, based on all the choices the user selects, it shows a final result for that selection path.

Use cases include quizzes, personality tests, eligibility checkers, lead qualifiers or product/service recommendations.

Requirements

To ensure the validation of the quiz, it is necessary to use radio buttons.

For each question, the radio group name should be the same but with different values assigned to each option.

This approach guarantees that each question is unique and that users can only select one option per question.

You do not need Logic for this.
01

Radio Button Attribute

For each radio button, you will need to assign an attribute called 'data-selected' with a value of your choosing.

This parameter will be used to determine the final result to display.
02
Custom <div> attributes
data-selected
=
{your-value}

Result Div attribute

To assign a final result to each possible combination of input selections made by the user, you must assign an attribute called 'data-selection' to each result.

The value of the 'data-selection' attribute should correspond to the path taken by the user, with each input selection separated by a comma.

For example, 'data-selection="yes,no,yes,no"' would correspond to the path where the user selects 'yes' for Q1, 'no' for Q2, 'yes' for Q3, and 'no' for Q4.
03
Custom <div> attributes
data-selection
=
{the-path-taken}

Default Div attribute

To have a backup result, add this attribute to a Div Block. This Div will appear if the user's choices don't match any of your Result Divs.
04
Custom <div> attributes
data-selection
=
other

Multiple Paths to Same Div

05
Allow multiple combinations of selection paths to be directed to the same final result.

By using the vertical bar ( | ) to split the different paths.

Example: yes,yes,yes|yes,yes,no|yes,no,no
Custom <div> attributes
data-selected
=
{path-1|path-2|...|path-n}

Formly Quiz Cloneable (CMS Results)


The results are fully powered by the CMS. Depending on the user's choices, a final product, which is a CMS item, is displayed.

Join our awesome Slack community with over 300+ Webflow users!

Seek support, vote on new features, stay updated and network with other community members.

Join Slack community