How To Create a Quiz On Your Website
Creating an interactive marketing quiz with a virtual consultant, branching questions, and collecting submissions through data collection services
A marketing quiz is a step-by-step form that can help turn visitors into clients by guiding them to the right product or service, identifying their wants, needs, and pain points, and collecting essential information, including contact details, to speed up the sales cycle.
Read this guide to learn how to add and set up a marketing quiz on your Tilda website.
Read this guide to learn how to add and set up a marketing quiz on your Tilda website.
Currently, this feature is in beta testing. To gain access, simply check the "Opt-in to become a beta-tester and try new features before they are released" box in your Tilda account.
How to add a quiz and configure the basic settings
What types of steps are available in the quiz form and how to configure them
Adding a virtual consultant that walks the visitor through the steps
How to show and hide specific steps depending on the visitor's answers
How to set up the data submission to third-party services
Adding a quiz block
Go to the Block Library → the Form category → select the QZ101 block or one of its variations (QZ101A—QZ101F). The variations differ in design, consultant availability, and answer branching.
What is branching?
Branching is a setting in forms that allows you to show or hide a specific field based on values in previous fields. Read more→
A quiz can be positioned on either side of the page (with adjustable width in columns and height in pixels), stretched to full screen, or displayed in a pop-up.
You can configure this in the Settings tab → Main settings of the quiz block. With the "Open block in pop-up" option enabled, an additional tab with the pop-up settings will appear in the Settings tab.
You can configure this in the Settings tab → Main settings of the quiz block. With the "Open block in pop-up" option enabled, an additional tab with the pop-up settings will appear in the Settings tab.
In the Main Settings tab, you can also specify how the form's fields will be arranged and whether the consultant will be part of the form.
Configuring the layout for quiz steps: You can choose to display the questions in one or two columns with varying width ratios
Choose the position of the panel with basic information for the user (and the consultant, if enabled): You can select the default view or place the panel at the top of the window, or on either the left or right side
The "Quiz form style" tab allows customizing the design of the quiz form itself, including the border radius, border color, and background colors for both the card and panel. You can also adjust the appearance of elements like the progress indicator, step counter, and the consultant's panel components.
The other tabs (Form Input Style, Buttons, Typography, Animation) have similar or identical settings to those found in other blocks within the "Form" category.
How to set up quiz steps
To configure the steps of the quiz, go to the Content tab of the block with the quiz form → "Quiz form steps" tab.
A step represents each question or screen in the quiz. The new block offers several types of steps:
Cover
This is the first step of the quiz, which you can customize by adding engaging text and a photo. This type of step serves a similar purpose in the quiz as the hero section does on a landing page: Attracting attention, highlighting the main benefits of completing the quiz, and motivating users to participate.
Cover
This is the first step of the quiz, which you can customize by adding engaging text and a photo. This type of step serves a similar purpose in the quiz as the hero section does on a landing page: Attracting attention, highlighting the main benefits of completing the quiz, and motivating users to participate.
Step types: Question with answers, Question with image answers, Quantity (Range slider)
These steps form the interactive core of the quiz. They are used to ask questions and provide answer options. You can also add a custom consultant's message for each specific question and apply branching logic—subsequent steps will be displayed based on the user's previous answers.
These steps form the interactive core of the quiz. They are used to ask questions and provide answer options. You can also add a custom consultant's message for each specific question and apply branching logic—subsequent steps will be displayed based on the user's previous answers.
Step type: Contact forms
This step type allows you to create a screen with a form for collecting the visitor's contact information, which can be used as the final step of the quiz. You can include various data fields and configure both a main message and a consultant's message.
This step type allows you to create a screen with a form for collecting the visitor's contact information, which can be used as the final step of the quiz. You can include various data fields and configure both a main message and a consultant's message.
Step type: Multi-field step
This field type allows you create a screen with a form that includes custom fields. Unlike the Contact form, this screen shows only the fields themselves, without any additional messages.
This field type allows you create a screen with a form that includes custom fields. Unlike the Contact form, this screen shows only the fields themselves, without any additional messages.
Step types: Result: content (image + text) and Result: redirect
These step types allow you to logically complete the quiz—either with an ending screen that includes text like a thank you message and an image, or by redirecting to a desired page (such as a page with current promotional deals). You can also use branching logic to create different possible final screens that will be displayed based on users' previous answers.
These step types allow you to logically complete the quiz—either with an ending screen that includes text like a thank you message and an image, or by redirecting to a desired page (such as a page with current promotional deals). You can also use branching logic to create different possible final screens that will be displayed based on users' previous answers.
Other step types have the same names and function similarly to field types in standard forms. When you add one of these steps, a new screen with a single field will appear. To learn more about all available field types, check out the How to Set Up Data Capture Forms guide.
How to configure the consultant panel
In some quiz steps, you can add a virtual consultant—a personalized message from a real person, such as one of your employees—who will help guide the visitor through the quiz by offering tips or encouragement.
To configure the general appearance of the panel, including its background color, the consultant message background color, and the settings for displaying the icon image, go to the Settings tab of the block → Quiz form style.
In the Content tab of the block → Other, you can specify the consultant's name, upload their image, and add a general message. This information will be displayed on all steps of the quiz form that include input fields.
You can specify a unique message from the consultant for each step individually. To do this, go to the desired step and click "More: visibility conditions, consultant".
How to configure branching
Branching logic, or visibility conditions for fields, is a feature that allows you to show or hide specific fields based on the values entered in previous steps. In other words, you can control which fields or questions are displayed depending on the user's responses.
This is especially useful in a quiz with multiple choices, as branching enhances interactivity and personalization by presenting relevant follow-up questions and tailoring the final result.
To learn more about branching, check out the How To Add Branching Logic To Tilda Online Forms article or watch the video tutorial below.
This is especially useful in a quiz with multiple choices, as branching enhances interactivity and personalization by presenting relevant follow-up questions and tailoring the final result.
To learn more about branching, check out the How To Add Branching Logic To Tilda Online Forms article or watch the video tutorial below.
How to connect external data collection services to track and store submissions
To collect data from the quiz, connect one or more third-party data collection services. Choose the service based on your goals and preferences. For a list of all available integrated services and instructions on how to connect them, check out the guide or video tutorial below.
