Skip to main content

Element Settings Overview

When you click on an element within the Form Builder, a settings panel will appear on the right side of the screen. This is where you can fine-tune the user experience and data mapping for each specific question.

General Configuration

  • Question Type: Use the dropdown to choose between a Universal survey (standard data collection) or Product Recommendation (quiz mode). Quiz mode allows you to provide specific product suggestions based on user answers.
  • Question Text: Enter the exact text you want your users to see.
  • Required Toggle: Enable this to prevent users from moving to the next page without providing an answer.

Field Types

Explore detailed configuration options for each field type:

Global form settings

Accessing Global Settings

To configure settings that apply to your entire form, click the Icon in the top right corner of the Form Builder. This opens a popup with three main tabs: Design, Behavior and Language.

Design Settings

Customize the visual identity of your form to match your brand and email templates.

Brand Colors

Set the foundation for your form’s palette:
  • Primary Color: Used for main actions and highlights.
  • Secondary Color: Used for accents and supporting elements.

Button Styling

Define the appearance of your “Next” and “Submit” buttons:
  • Background & Text Color: Choose high-contrast colors for better accessibility.
  • Padding & Border Radius: Adjust the size and roundness of your buttons.
  • Preview: Use the sample button at the bottom of the section to see your changes in real-time.

Form Layout & Container

Control how your form displays within the email:
  • Transparent Background: Toggle this on to remove the background and let your email template’s background show through. Toggle off to set a custom Background Color.
  • Card Layout: Enable this to add a subtle border or shadow, making the form appear as a distinct “card” floating over your email content.
  • Interactivity Indicator: Adds an animated hand icon to the first question.
    • Note: This only appears on the first page to help new users understand that the email is interactive.
  • Define Max Width and Padding for the form container.

Custom CSS

Customise your form further with CSS styling.
Note: Custom CSS only applies to the fallback web form. It does not affect the interactive AMP/HTML components within the email client itself.

Behavioral Settings

Configure how data is tracked and how the form interacts with third-party tools like Klaviyo.

Klaviyo Integration

  • Update Klaviyo Profile: When enabled, user responses are automatically synced to their Klaviyo profile properties.
  • Enable AMP Partial Tracking: Captures user data as they navigate between pages.
    • Tip: This is highly recommended to ensure you collect data even if a user abandons the form halfway through.
  • Multi-Choice Value Format: Choose how multiple selections are stored in Klaviyo:
    • Array Format: ["Value1", "Value2"]
    • Comma-Separated: Value1, Value2

Fallback & Web Client Settings

These settings control the experience for users whose email clients (like Outlook) do not support interactive forms.
  • Apple Mail: Toggle whether the form remains visible in the email after a successful submission in Apple Mail.
  • Fallback Visible Fields: Choose how many fields from your first page are displayed in the static fallback version of your form (e.g., show only the first 2 questions to encourage a click-through to the web version).
Setting the Fallback Visible Fields to a lower number can increase click-through rates by making the call-to-action more focused for users on non-interactive clients.

Language Settings

Set the language for standard components in your form
  • Form Language: Choose the primary language from the dropdown list. This will localize the text for:
    • Control buttons: Next, Previous and Submit
    • Fallback CTA Button: The button shown to users who complete your form in the fallback web version