Quiz elements - How to build quizzes, multi-step surveys and questionnaires
ConvertFlow's quiz element lets you quickly launch a quiz that:
- Asks for answers to multiple questions, which are stored to contact custom fields
- Skips questions based on answers
- Optionally displays a progress bar throughout the quiz
- Optionally shows next and back buttons to navigate the quiz
- Conditionally performs actions when completed
In this tutorial, we'll cover:
- Adding a quiz element
- Adding questions to your quiz
- Styling your quiz
- Skipping questions based on answers
- Configuring quiz completion actions
- Conditionally mapping answers to quiz outcomes
Adding a quiz element
To add a quiz element, first, click to add a new element from the toolbar.
Then, choose the "Quiz" element from the element types to the right, clicking it to see templates.
You'll now see multiple quiz templates to use as a starting point.
Either click to "Start from scratch", or drag the quiz template you want to use, into the builder where you want it to show. You'll now have a quiz added to your campaign, with controls to customize the quiz displayed to the right.
In the panel, you can toggle the quiz progress bar, manage quiz questions, toggle next & back buttons for the quiz, and manage quiz completion actions.
Adding questions to your quiz
To add a new question, click "Add Question".
You'll be able to either create your question from scratch, or choose from a library of quiz question templates.
We'll click to create from scratch. A new question will be added for you to customize in a panel.
Note at the top of the panel, that you can switch between editing the content, the design, and the logic of the question, by clicking the tabs up top.
Mapping to a custom field
First, you'll want to select a contact custom field to map the question to.
This way when someone answers the quiz question, their answer will be stored within that custom field in their contact profile in ConvertFlow and in your integrated email provider.
Either write in a new custom field data name to use, or select an existing custom field from the dropdown.
Choosing a question type
You can choose between multiple question types, such as simple surveys, image surveys, surveys to choose an icon, color, letter, or emoji.
You can also have your question be a form field, like a text input, dropdown select, numerical inputs, range sliders, etc.
Pro tip: Want to just show a message in between questions, or a loading screen before completing your quiz? Use the "show a message" type!
Customizing the question content
Next, you'll want to edit each question's title, description, and image that is displayed.
By uploading images and gifs for each question, you can make longer quizzes more fun and engaging, to increase your completion rate.
Defining answers for your quiz
Then, customize the answers for your quiz by adding answers, as well as editing/removing any pre-populated answers.
Each answer can have a label and value, which you can edit by double-clicking on the answer to open its settings.
The label is what shows to quiz takers, while the value is what gets stored in as a custom field value for contacts.
Pro tip: If you plan to have your quiz outcome depend on a score, you can use the score setting to increment/decrement the quiz taker's score by a certain amount for each answer.
For other types of surveys, such as image surveys, icon surveys, color surveys, etc, each answer can have the visual representation for the answer customized.
Sub-questions let you organize questions under their parent question.
When sub-questions are displayed, the progress bar doesn't progress. The progress bar only visualizes the progress of parent questions.
By default, quiz takers will be automatically routed to sub-questions after answering the parent question.
This can be overridden by skipping questions based on answers.
Styling your quiz
The funnel builder has tools for efficiently styling long quizzes:
- Quiz theme styling
- Quiz element styling
- Per-question styling
Quiz theme styling
In the builder panel to the right, click the "Theme" tab.
You'll then find theme styling controls for all types of content. Adjust headings, and paragraph styles, as well as theme styles for buttons and progress bars.
You'll also see theme styles for quizzes.
Important: "Quizzes" theme styling is currently separate from "Surveys" styles, which has theme styling that applies only to "Survey" elements (different element type than quizzes).
Quiz element styling
For each quiz element you add to your funnel, you can select the quiz element, scroll to the "Design" settings for that element, and adjust styles for that quiz element.
This includes design controls for the quiz's progress bar, questions, next/back buttons, etc. These element-level styles will override any theme styles you have set. Per-question styling
Each question you add to your quiz will often have slightly different styling and formatting.
For example, one question may have horizontally positioned text options to choose from, and then the next question may call for vertically stacked image options to choose from.
To adjust design settings for each question, click to edit the question. When the panel appears, click the "Design" tab.
Here you can adjust design settings like options layout, spacing, colors etc, for that specific question.
Skipping questions based on answers
When editing each quiz question, you'll see a tab for "Logic".
Here, you can choose the next question to jump to.
By default, the quiz jumps to the next question. You can optionally have it skip to another question, or skip to completing the quiz.
Below, you'll find the ability to control what question is jumped to based on the answer selected.
You'll also see the ability to "Add Conditional Logic".
By adding conditional logic, you can use the conditions builder to define scenarios where quiz takers can be skipped to a specific question, or skipped to completing the quiz.
Here are some conditions you can check for:
- If they had selected a combination of answers for any question in the quiz
- If their incremented score is greater/than an amount
- Any combination of other types of conditions [Conditions guide →]
Configuring quiz completion actions
Below managing your quiz's content, you can click to manage quiz completion actions.
When managing quiz completion actions, you can control what happens when someone completes the quiz.
Quiz completion confirmation types
First, you'll want to set the confirmation type. This is what the quiz taker visually sees upon completing of the quiz.
Examples of confirmation types:
- Showing a simple thank you message
- Redirecting a URL you paste
- Jumping to another step in your funnel
- Triggering another ConvertFlow campaign (e.g. quiz → popup)
Triggering quiz completion automations
Next, you can add automations to trigger.
- Adding subscribers to your email service provider
- Sending a form submission alert to your email
- Applying a tag or custom field value, for future targeting
Firing quiz completion conversion scripts & pixels
If you need to add conversion pixels and custom scripts to fire upon the completion of your quiz, you can do so by opening the script manager.
Conditionally mapping answers to outcomes
Want to conditionally perform actions when your quiz is completed?
You can do so by clicking "Add Conditional Action".
For each conditional action you add, you can conditionally perform actions like:
- Conditionally redirecting to a different URL
- Conditionally jumping to a different funnel step
- Conditionally showing a different thank you message
- Conditionally displaying a ConvertFlow popup campaign
- Conditionally running specific automations
- Conditionally firing specific pixels and scripts
Simplifying conditional logic for complex quizzes
To quickly map quiz answers to quiz outcomes, when building long and complex quizzes, you can use "If answers are mostly A/B/C" conditions to map lots of answers to lots of quiz outcomes, based on each answer's alphabetical order.
This way, you can map answers to A/B/C/... outcomes efficiently by positioning the quiz answers alphabetically (e.g. selecting mostly A answers will display quiz outcome A, and so on...).
Or, if you want to get fancy, you can use numerical quiz scoring to more dynamically handle quizzes with lots of possible outcomes, as well as display a quiz score result at the end.
Building a product recommendation quiz?
Next, learn how to conditionally recommend products to quiz takers based on their quiz answers, using the products element →