Dynamic Endings
Last updated
Last updated
Attribute: superform-ending = [minimun points, maximum points] eg. superform-points=[0,3]
Apply to: elements with superform-element="step" attribute (Superform Steps).
Description: Create different endings based on the user's answers or progress, like this example: https://superform-v1.webflow.io/.
Point scoring completion is a powerful feature that allows you to create dynamic endings for your forms. With this feature, you can mark a step with an ending attribute (superform-ending) that defines a range of minimum and maximum points required to reach that particular ending.
As the user progresses through the form, they can score points by completing certain actions or answering certain questions (radio buttons or checkboxes). The total number of points scored is calculated dynamically. When the user reaches the final step of the form, the step with the ending attribute that matches their point score will be displayed.
Multiple steps can be marked as superform-ending, and all of them will be counted as ending steps. However, only one ending step will be displayed based on the user's points. This ending step is always counted as the final step, and the other steps are counted normally. For example, if you have 10 total steps and 3 ending steps, Superform will consider 11 steps in total. The ending step will be dynamically replaced based on the user's point-scoring, so even if you teleport to the ending step from an early step in the form, the specific scenario will be shown based on the points collected.
This feature can be used in a variety of ways to create engaging and interactive forms. For example, you can use it to create quizzes, assessments, or surveys that provide personalized feedback based on the user's performance.
In the following example, the user selected an option (radio button) which scores 5 points with superform-points=5 attribute, then he is immediately teleported to a step is marked as Ending with superform-ending=[5,8].
It is recommended that all Dynamic Endings are placed in the end to avoid mental fatigue, since only 1 ending is always counted as a step.
If you don't need minimum & maximum, but a strict number, then you use superform-ending[number, number].
Example: strictly 5 points -> superform-ending=[5,5]
superform-points=5 (5 points)
superform-ending=[5,8]