Typeform Like Lead Generation Form template

How to use this lead generation and qualification form

This template has some innovations, amongst others:

1. full-page background
2. conditional navigation
3. progress bar
4. absolute positioning of navigation

The full-page background and the conditional navigation are fully supported by the builder! The progress bar relies on show-hide logic and the navigation positioning needs custom CSS. In 2023 we hope to introduce new functionality that makes these custom solutions redundant.

Below, we will briefly explain how the first two innovations work.

Full-page background

You can create a full-page background as follows:

• set the max-width and height of your calculator to 100% in the "build/calculator-style" settings
• remove the 16px padding from the calculator in the "build/calculator-style" settings
• add a container to your canvas
• set the min-height of the container to 100%
• add a background-image to the container in the "Build/Element style" settings
• set the container:
  • Display setting to flex
  • Direction to horizontal
  • with the Align and Justify settings you can align the content of the container horizontally and vertically. Please select center on both settings to center the content
• add another container inside the "parent" container. This is the container where your content will be hosted.

Conditional navigation

In multipage lead generation forms, you need 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. At ConvertCalculator we look at solving the challenge with formulas first and foremost. In this template, the user will navigate back and forth between questions, and based on your answer, you will skip certain questions.

Note: you can navigate forwards and backward.

Because you can also navigate back, we need to have a way to 'know' what your previous question was. Tools like Typeform have this logic in the back. But we offer a flexible tool that allows you to create and use logic how you would like it.

Since we need to be able to move through a navigational path, we cannot use a plain number as the input value. But we have 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].

In this template we use the following variables and inputs:

• Input that we named PATH which is an array that will collect the pages you've visited
• Variable that we named NEXT in which we define your conditional jumps. If none of the defined conditions is met, the value of NEXT will be 1, so your form will jump to the next question.
• Variable that we named BACK that we will add as the Set Input on the 'backward navigation'. For this, we will use the POP() function, which removes the last entry in the PATH array: POP(PATH)
• Variable that we named FORWARD that we will add as the Set Input on the 'forwards navigation'. For this, we will use the PUSH() function, which adds the next page to the PATH array: PUSH(PATH, PAGE+NEXT).

The template also includes several variables and inputs to 'control' the progress bar that we will not address here.

This template has some conditional jumps from page 1 and page 3: