Help Center · Building a quiz

Questions and pages

The introduction, question types, button styles and progress.

The introduction

The Introduction is the first page shoppers see. Click it in the left list to edit it. It has four parts, which you can reorder or hide:

  • Heading and Subheading: with bold, italic, links and lists. Empty heading uses the quiz title.
  • Image: a picture for computers and, if you like, a different one for phones, with its width, alignment and corner roundness.
  • Button: the text that starts the quiz, with an optional arrow.

Each part has Settings and Styles: sizes and colours for the heading and subheading, and colour palette, size, style (solid, outline or text link) and full width for the button. The Introduction's own Style tab sets its height, background, spacing and more, like a results page section.

Don't want an introduction? Click the eye next to it in the list, and shoppers start on the first question.

Question types

Click Add page and choose:

  • Single choice and Multiple choice: text answers. You can limit how many answers can be picked.
  • Image choice: answers shown as pictures.
  • Dropdown: a list, good for many options.
  • Range slider: a number range, like a budget. Can filter products by price.
  • Email capture: collect the shopper's email. See Collecting emails.
  • Form field: a Text or Number box shoppers type into.
  • Form: several fields on one page, like first name, email, phone, birthday and a dropdown. See Form pages below.
  • Message (transition page): a page with text and a Continue button, for a pause or explanation.

Form pages

Click Add page → Form · Several fields on one page to ask for a few details at once, like a "Let's get to know you" page with name, email and birthday. Each field has:

  • A type: Text, Email, Phone number, Number, Date or Dropdown (with your own choices).
  • A label, placeholder and Required tick. Optional fields show "(optional)".
  • A marketing property name, so the answer is sent to your email app.

An Email field counts as the shopper's email, just like an email question: it can have a consent checkbox, and it's used for your email apps, Shopify customers and the results email. Each field shows as its own answer in Analytics → Submissions.

Show an earlier answer (answer piping)

Put what a shopper said into later texts, like "Sam, what's your biggest skin concern?":

  1. Select a question and open Insert an earlier answer under the question text.
  2. Choose the answer. It's added as {{first_name}}.

Add a fallback for shoppers who skip it: {{first_name|there}} shows "there". Without a fallback, the answer simply disappears and the sentence is tidied up, so "{{first_name}}, what's…" becomes "What's…".

Earlier answers work in question texts and descriptions, the results heading and text, and the results email's subject, heading and message. The editor preview shows [First name] where the answer will go.

Question page pictures and style

Open a question's Styles tab:

  • Page picture: a photo on the right or left half of the page, or behind the question. Add a different one for phones, fade or darken it, and choose whether side pictures show above the question on phones or hide.
  • Focus point: click the part of the page picture that must always show, like a face. On phones a side picture becomes a short strip above the question, and it's cropped around this point. A preview shows what phones will see. Split start pages have a focus point too.
  • Page style: background colour or image, height, spacing, width, alignment and more. Question pages share one style, so you set it once; untick Same style as the other question pages to give one page its own.

For picture answers, tick Show pictures only to hide the text under each picture.

Next and Back buttons

Set how the Next button ("See my results" on the last question) and the Back and Skip buttons look in Styles: colour palette, size, style and full width. To give one question its own buttons, open its Styles tab and untick Same as the rest of the quiz.

Other options

  • Allow the question to be skipped adds a Skip button.
  • Progress and buttons (in the left list) sets the progress: a bar, segments or dots (one per question, with an optional "2 / 5" count), numbers ("2 of 5") or none, and whether picking an answer moves on by itself.
  • Marketing property name sets the field name used when sending that answer to your email app.
Still stuck? Email support@quizpep.com and we'll help.