Welcome Screen

The first screen shoppers see: heading, button, optional name and email fields (asked here or before the results), and a welcome image.

The Welcome Screen is the first thing shoppers see when they open your quiz — before any questions appear. It's where you introduce the quiz, collect optional contact details, and optionally display a brand image. Click Welcome Screen in the left panel to open it in the editor.

Content & Copy

Heading — the main title displayed prominently on the welcome screen. Keep it short and inviting, e.g. "Find your perfect match" or "Take the Hair Discovery Quiz".

Subheading — a short paragraph below the heading describing what the quiz does or what the shopper can expect. Optional but recommended.

Button text — the label on the CTA button that starts the quiz. Defaults to "Get started".

Footer note — small text shown below the CTA button. Optional. Good for reassurance copy like "Takes 2 minutes" or "No account needed".

Style settings

Under Content & Copy, four collapsible rows control the look of the welcome screen text and button, independently from the rest of the quiz: Heading style, Subheading style, Footer note style and Button style. Click a row to open it; one row is open at a time.

Heading

• Font family, font weight, font style (normal / italic)
• Font size — separate desktop and mobile values (e.g. 40px desktop, 28px mobile)
• Color
• Text transform

Subheading

• Font family, font weight, font style
• Font size — desktop and mobile
• Color
• Text transform

Footer note

• Font size — desktop and mobile
• Color

CTA Button

• Background color and text color
• Font family, font weight, font size (desktop + mobile), text transform
• Border radius — e.g. 0px for square, 8px for rounded
• Width — Auto (fits the button text) or Full width (stretches across the welcome form)
• Padding X / Padding Y — horizontal and vertical spacing inside the button
• Alignment — Left or Center (only shown when width is set to Auto)

Form Fields

The quiz can optionally collect the shopper's name and email, either on the welcome screen before the first question, or on a screen of its own just before the results.

Collect shopper name — asks for the shopper's name.

• Ask on — Welcome screen (before the first question) or Before results (on its own screen after the last question).
• Name required — if enabled, the shopper must fill in their name before they can continue (or, when asked before the results, before they see their results).
• Field placeholder — the grey text inside the empty field. Leave blank for "Enter your name".

Collect email address — asks for the shopper's email. The email is what connects a shopper to your email and CRM tools (Klaviyo, Mailchimp, HubSpot), results emails (Resend), Lead events and the Responses page.

• Ask on — Welcome screen or Before results. Shoppers who have already answered every question are much more likely to give their email, so asking before the results usually collects more emails. The trade-off: a shopper who leaves halfway through the quiz has not given an email yet.
• Email required — if enabled, the shopper must enter their email to continue. When the email is asked before the results, this means no results without an email; leave it off and a Skip link lets shoppers see their results without one.
• Field placeholder — the grey text inside the empty field. Leave blank for "Enter your email address". Both placeholders apply wherever the field is asked: the welcome screen or the before-results screen.
• Show mailing list opt-in — displays a newsletter checkbox next to the email field, wherever the email is asked. Shoppers who tick it are subscribed in every email tool you've connected (Klaviyo, Mailchimp, and HubSpot if a subscription type is set). Available on the Starter plan and above.
  • Pre-checked by default — the checkbox is ticked automatically; the shopper must uncheck it to opt out. A checkbox that is not shown never subscribes anyone.
  • Opt-in label — the text next to the checkbox, e.g. "Subscribe to our newsletter".

You can mix the two: for example, ask for the name on the welcome screen (so the results can greet the shopper by name) and the email before the results.

"Required" only applies while its field is switched on. If you switch off Collect shopper name or Collect email address, that field is hidden and never stops a shopper, even if its Required option was left on.

Before-results screen

When the name or email is set to Before results, shoppers see one more screen after the last question: a short label, a heading, a line of text, the field(s), the newsletter checkbox, and a button that takes them to their results. The progress bar shows as complete, and Back returns to the last question.

A Before-results screen card appears in the editor where you can change:

• Small label — default "Your results are ready".
• Heading — leave it empty for the automatic heading: "Where should we send your picks?" when the email is asked here and Email results is on (Results Screen), otherwise "One last step".
• Text — default "Enter your email to see your personalised recommendations."
• Button text — default "See my results".
• Skip link text — default "Skip and see results". The Skip link only appears when nothing asked on this screen is required.
• Empty-field message — when the field is optional, the main button still needs the email (or the name, if only the name is asked here); Skip is the way through without it. A shopper who presses the button with the field empty stays on the screen and sees this line under the field. Default: "Enter your email to continue, or skip to see your results."

Style rows (inside the same card; click one to open it) — the look of this screen. Every setting starts on Default, which keeps the standard look: fonts and colours from this welcome screen's style settings, the small label from your quiz's section label style, and the button from your welcome screen button style (or, if you haven't styled that button, your questions' Continue button). Change only what you want:

• Small label, Heading, Text — font family, weight, size (desktop and mobile), colour and text transform; the heading also italic or normal.
• Button — background, text colour, hover background and text colour, font, weight, size (desktop and mobile), text transform, width (fit text or full width), corner radius and padding.
• Fields & checkbox — colour of the typed text, the placeholder, the underline and the underline while typing; the newsletter checkbox and its label.
• Skip link & layout — skip link colour and size, empty-field message colour, alignment (centred or left) and the content width on desktop (280–900px).

Use the small cross next to a colour to put it back to Default.

Everything that works with a welcome-screen email works the same with an email given before the results: Klaviyo, Mailchimp and HubSpot sync, newsletter sign-ups, results emails, Zapier and webhook lead events, Meta and TikTok Lead events, and the Responses page. If a shopper retakes the quiz in the same visit, they are not asked again. Shoppers who skip the email can still add it on the results page if you turn on Email me my results. Analytics → Email Capture Rate shows how many emails came from each screen.

Welcome Image

You can optionally display a brand image alongside the welcome form.

Show a welcome image — toggle to enable the image. When disabled, the welcome form takes the full width of the quiz widget.

Image position — three layout options:

• Left — image on the left, form on the right
• Right — form on the left, image on the right
• Background — image fills the entire welcome screen behind the form content

Image width — for Left and Right positions, a slider (25%–65%) controls what proportion of the welcome screen the image occupies.

Overlay colour and opacity — for Background position only. An overlay is placed between the image and the form content so the text remains readable. You control the overlay colour and its opacity (0%–100%).

Hide image on mobile — recommended. Hides the image on small screens so the form takes full width, which is almost always better on mobile.

Image — click Choose from library to pick an image from your image library or upload a new one (JPG, PNG, WebP or GIF), or paste an image URL. Uploading requires the Starter plan or above; on the free plan you can still use an image URL. You can replace or remove the image at any time.

Alt text — accessibility description of the image for screen readers. For a library image, its description on the Images page is a good starting point.

Content Layout

Controls the width and positioning of the welcome form content area.

Desktop

• Content width — shown when the image is set to Background or disabled. Controls what percentage of the widget the form content occupies (40%–100%).
• Content max width — the maximum pixel width the content area can reach, regardless of the widget's size (280px–900px).

Mobile

• Content max width — the maximum pixel width of the content area on mobile screens (280px–1000px).

Saving

Click Save changes in the sticky bar at the bottom. This saves all your unsaved changes in the quiz, not just this screen. Changes are not saved automatically.