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:Choice Fields
Configure multiple choice, dropdown, and image selection fields with advanced layout options.
Contact Fields
Set up email and phone fields with validation and formatting rules.
Text Input Fields
Collect open-ended responses with short and long text fields.
NPS Score
Measure customer loyalty with Net Promoter Score elements.
Date Picker
Capture dates with flexible input methods and storage options.
Text Label
Add section headers and instructions for better form organization.
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
- Array Format:
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).
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
