Inputs
are a new element in ConvertCalculator that allow you to set a value on a button action. While inputs can potentially unlock many use cases, one application stands out at the moment: navigation.
Before inputs
we had no way to facilitate navigation. You could create a multi page form with the view break element. And the state-button can be used to show or hide elements in view. But for some needs, these methods are too basic.
The "Set Input" action flow is very powerful and will allow you to create (simple and) complex conditional flows.
Set Input action flow
Take the following steps to add the "Set input" action flow to your button:
- select the button
- in the button panel, scroll to the "add action" dropdown
- select the "Set Input" action
- a window appears where you can select the input you want to set
- when you don't have inputs yet, you can add a new input
- select the newly created input by clicking on the name
- create the "Set Input" formula or select a variable that has the "Set Input" formula
- in the video below the formula we use is:
IA +1
You can add multiple "Set Input" actions to a button.
Using the "Set Input" for complex navigation
In multipage lead generation forms, you want the ability to 'jump' questions. For example, when question A is answered with option A, then show question B, otherwise, show question C.
Most tools (like Typeform) facilitate these conditional paths with a visual editor. Here at ConvertCalculator we like to look first at solving the challenge with formulas. As is the case here. In the example calculator below, you can navigate back and forth between questions, and based on your answer, you will skip certain questions.
Because you can also navigate back, we need to have a way to 'know' what your previous question was. So instead of using a plain number as the input value, we need to use an array
. An array is
a collection of similar types of data, in this case, the page numbers, e.g. [1, 2, 3, 6, 7, 9, 10]
.
For this example, we need the following formulas:
Input
that we namedPATH
which is an array that will collect the pages you've visitedVariable
that we namedNEXT
in which you define your conditional jumps. If no of the defined conditions is met, the value ofNEXT
will be 1, so your form will jump to the next question.Variable
that we namedBACK
that we will add as the Set Input on the 'backward navigation'. For this we will use thePOP()
function, which removes the last entry in the PATH array:POP(PATH)
Variable
that we namedFORWARD
that we will add as the Set Input on the 'forwards navigation'. For this we will use thePUSH()
function, which adds the next page to the PATH array:PUSH(PATH, PAGE+NEXT)
.