# List Forms Source: https://docs.usekinetic.com/api/forms GET /api/v1/external/forms — retrieve all forms for your workspace. # List Forms ``` GET /api/v1/external/forms ``` Returns all forms in your workspace with response counts. ## Parameters | Parameter | Type | Default | Description | | --------- | ------- | ------- | -------------------------- | | `limit` | integer | 50 | Results per page (max 200) | | `offset` | integer | 0 | Skip this many results | ## Response ```json theme={null} { "data": [ { "id": "6de00b12-3de5-4823-867c-645886cde9cd", "title": "Welcome Survey", "created_at": "2026-05-14T08:31:42Z", "is_published": true, "response_count": 142 } ], "pagination": { "total": 18, "limit": 50, "offset": 0 } } ``` # API Overview Source: https://docs.usekinetic.com/api/index Access your form submission data programmatically via the Kinetic API. # API Overview The Kinetic API lets you programmatically access form submissions, form listings, and analytics. Authenticate with API keys, available on Growth and Pro plans. ## Authentication All requests require a bearer token: ```bash theme={null} curl -H "Authorization: Bearer kntc_your_api_key" \ https://app.usekinetic.com/api/v1/external/forms ``` API keys are created in **Settings** → **Developer**. ## Endpoints | Endpoint | Description | | -------------------------------------------- | -------------------------------- | | `GET /api/v1/external/forms` | List all forms | | `GET /api/v1/external/forms/:id/submissions` | Get submissions for a form | | `GET /api/v1/external/submissions` | Get submissions across all forms | | `GET /api/v1/external/forms/:id/stats` | Get form analytics | ## Response format All endpoints return: ```json theme={null} { "data": [...], "pagination": { "total": 142, "limit": 50, "offset": 0 }, "meta": { "request_id": "...", "timestamp": "..." } } ``` # API Playground Source: https://docs.usekinetic.com/api/playground Test API requests directly from the Kinetic dashboard. # API Playground The API Playground is available in **Settings** → **Developer**. It lets you: * Select an endpoint and configure filters * Send requests using your session (no API key needed for testing) * See the generated curl/JavaScript/Python code * Copy the code with your API key for use in your integrations This page is under construction. Content coming soon. # Form Stats Source: https://docs.usekinetic.com/api/stats GET /api/v1/external/forms/:formId/stats — analytics for a single form. # Form Stats ``` GET /api/v1/external/forms/:formId/stats ``` Returns analytics for a single form. ## Response ```json theme={null} { "data": { "total_submissions": 796, "complete_submissions": 342, "completion_rate": 42.96, "avg_completion_time_seconds": 67, "submissions_by_day": [ { "date": "2026-05-14", "count": 23 }, { "date": "2026-05-15", "count": 31 } ] } } ``` # Get Submissions Source: https://docs.usekinetic.com/api/submissions Retrieve form submissions with filters for email, date range, and more. # Get Submissions ``` GET /api/v1/external/forms/:formId/submissions GET /api/v1/external/submissions ``` The first endpoint returns submissions for a specific form. The second returns submissions across all forms. ## Parameters | Parameter | Type | Default | Description | | --------- | -------- | ----------- | ----------------------------------------------------------- | | `email` | string | — | Filter by email (supports `*` wildcard, e.g. `*@gmail.com`) | | `since` | ISO 8601 | — | Submissions after this timestamp | | `until` | ISO 8601 | — | Submissions before this timestamp | | `partial` | boolean | false | Include partial (incomplete) submissions | | `limit` | integer | 50 | Results per page (max 200) | | `offset` | integer | 0 | Skip this many results | | `sort` | string | created\_at | Sort field | | `order` | string | desc | Sort direction (asc/desc) | | `form_id` | UUID | — | Filter by form (cross-form endpoint only) | ## Response ```json theme={null} { "data": [ { "id": "bfe0dd18-...", "created_at": "2026-05-15T09:32:16Z", "email": "user@example.com", "answers": { "field_name": "value" }, "partial_submission": false, "completion_time_seconds": 84, "embed_domain": "store.example.com", "embed_mode": "popup" } ], "pagination": { "total": 796, "limit": 50, "offset": 0 } } ``` ## Incremental sync example Fetch new submissions every 5 minutes: ```bash theme={null} curl -H "Authorization: Bearer kntc_..." \ "https://app.usekinetic.com/api/v1/external/submissions?since=2026-05-16T10:30:00Z" ``` # Countdown Timer Source: https://docs.usekinetic.com/countdown-timer/index The Countdown Timer tool allows you to create a custom, time-sensitive element for your email template. Use it to add urgency, highlight limited-time offers, or count down to an important event. You can fully style your timer within Kinetic, then embed it into your static template using a simple code snippet. ### **Creating a Countdown Timer** * Navigate to **Countdown Timer** in the left-hand menu of your dashboard. * Click **New Timer** in the top-right corner. * You’ll now be taken to the builder, where you can style and configure your timer. A live preview at the top of the page will update as you make changes. ### Configuration * **Title:** Give your countdown a title. This is for internal organization only and won’t appear in your email. * **Target Date & Time:** Set the target date, time, and timezone for your countdown. ### **Styling** * Under **Styling**, select **Templates** to choose from pre-built designs. * To customize your timer to match your brand, select **Custom**. * Here you can adjust the **Font**, **Colors**, **Spacing**, and other visual settings. The preview will update automatically with each change. ### **Exporting Your Timer** * When you’re finished, click **Save and Export Code**. * A code snippet will now be generated. Copy and paste this into your email template to embed your countdown timer. ### **Updating an Existing Timer** If you make changes to a timer in the Kinetic builder, all you need to do is save your changes. * Apply your changes in the builder. * Click **Update**. * The code snippet you added in your template will now automatically display any changes made in the builder. # A/B test significance Source: https://docs.usekinetic.com/email-builder/ab-significance ## What are we trying to figure out? When we run an A/B test — like comparing static and interactive emails — we want to know: Is one version truly better, or is the difference just random luck? That’s where **statistical significance** comes in. ## the setup Let’s say we test two groups: | Group | Deliveries | Conversion | Conversion Rate (CVR) | | :---- | :--------- | :--------- | :-------------------- | | A | 10,057 | 10 | 0.10% | | B | 10,003 | 8 | 0.08% | Group A *looks* better — but the difference is **tiny**. Is it **real**, or could it just be **random**? ## How to answer this question We use a simple method called a **Z-test** to calculate a **P-value**. Here's the step-by-step: ### 1. **Pooled Conversion Rate** Combine both groups into one average baseline: $ CVR_{pooled}= \frac{(Conversions_A + Conversions_B)}{(Group\ Size_A + Group\ Size_B)}$ For our example: $CVR_{pooled}= \frac{(10+8)}{(10057+10003)} =0.09\%$ ### 2. **Standard Error (SE)** This tells us how much **natural randomness** we expect between two similar-sized groups: $SE = \sqrt{CVR_{pooled} (1-CVR_{pooled})(\frac{1}{Group\ Size_A} + \frac{1}{Group\ Size_B})} $ For our example: $SE = \sqrt{0.09\% (1-0.09\%)(\frac{1}{10057} + \frac{1}{10003})}=0.04\%$ ### 3. **Z-Score** The **Z-score** shows how far the **difference** between two groups is from zero in terms of standard errors (zero being what we'd expect if there were no real difference). We calculate it by dividing the difference in conversion rates by the standard error — our expected random variation from sampling. $z = \frac{(CVR_B - CVR_A)}{SE}$ For our example: $z = \frac{(0.08\% - 0.10\%)}{0.042\%}=-0.46$ In simple terms, it answers: > "How unusual is this difference if A and B were actually performing the same?" * If the Z-score is **close to 0**, the difference is small compared to the noise — **probably just random** chance. * If the Z-score is **2 or more**, the difference is much larger than the noise — **likely not random**, and therefore statistically significant. * For this, we assume a standard normal distribution, i.e. 68% of all data falls between \$z=-1SE\$ and \$z=+1SE\$, and 95% between \$z=-2 SE\$ and \$z=+2 SE\$. Standardnormaldistributionchart Pn The Z-score converts into a p-value, telling us how likely such a difference could occur by chance. ### 4. **P-Value (Two-Tailed Test)** The **p-value** tells us how likely we'd see a difference this large (or larger) between A and B if they were actually identical — that is, if the difference was purely random. $p= 2 * (1-\Phi(|z|))$ Where \$\Phi(|z|)\$ is the cumulative distribution function of the standard normal distribution (the probability that a value is less than z). $p= 2 * (1-\Phi(|-0.47|))=0.65$ Put simply, it answers: "If A and B truly perform the same, what are the odds I'd see this difference by chance?" Here's how to interpret it: * If the p-value is high (e.g. 0.65), there's a 65% chance the difference is just random noise — making it not statistically significant. * If the p-value is low (typically below 0.05), there's less than a 5% chance it's due to randomness — making it statistically significant. | **P-Value** | **What this tells us** | | :---------- | :--------------------------------------------- | | \< 0.05 | Likely not random. Statistically significant ✅ | | > 0.05 | Could be just noise. Not significant ❌ | We usually use **0.05 (5%)** as the **threshold for confidence**. ## What does this mean? If your test result is **significant**, you can say: "Yes, B performs better than A — and it's not just random." If it’s **not significant**, you say: "The difference could just be luck — we can't be sure yet." For our example: Our p-value of 0.65 is > 0.05, so the difference is very likely just luck — we can't be sure yet whether version A is better than version B. ## Important notes * Small numbers (like 10 vs 8 conversions) make it hard to trust the results. * Try to reach at least **100+ conversions per component** before acting. * Statistical significance ≠ practical significance. A 0.02% uplift might be **real**... but still not **meaningful** for your company depending on your overall sales volume. # A/B Test Setup Source: https://docs.usekinetic.com/email-builder/ab-testing This is our short guide on how you can set up an A/B test in Klaviyo. If anything is unclear, you can always reach out to us for support. **Important**: AB-Tests do not always deliver usable results. Here we discuss how you can evaluate if your A/B test results prodivde significant data. ## **1. Create your static email - in Klaviyo** * Create your static email as you are used to * Save it as a template ## **2. Use it to create the interactive version - in Kinetic** * Open Kinetic → Templates * Import the template you just created into Kinetic * Add interactive components & hide any static elements you want to replace (e.g. product images being replaced by an interactive product highlight) * Style it as you want * Review & publish it to Klaviyo ## **3. Set up your campaign - in Klaviyo** * Create campaign * As content, select the static template * Click “add A/B Test” * For Variant B, click the three dots menu & “change template” * Select the interactive template. This will be marked with an **AMP** tag in your Klaviyo template list * As the A/B-Test goal, we recommend “Placed Order Rate” # Add your interactive form Source: https://docs.usekinetic.com/email-builder/add-form-widget * From the panel on the left, drag & drop the form widget into your email template. * Place the widget where you would like your form to be displayed inside your template. ## Placing widgets When dragging an interactive widget into your template, a green line will appear on the template to indicate where the widget will be placed. Widgets will automatically snap to sections created in your static Klaviyo template. Where you place your widget affects how it is displayed. If you notice display issues, they may be caused by the cell in which the widget was placed. Learn more about editing email templates in Kinetic. # Get started with forms Source: https://docs.usekinetic.com/email-builder/create-form-overview ## Kinetic quickstart guide In the following sections we will provide a step by step guide on how to get your first interactive template up and running with Kinetic. ## Create your form * Click the "New Form" button in the top left corner of your Kinetic dashboard. * Select one of our form presets to get started quickly, or choose "Start from scratch" to create your own from scratch. * Choose an element to add the first question to your form. * You are now inside the form builder and can continue adding and editing elements to your form. Learn everything you need to know about the Kinetic form builder here. # Import a static template Source: https://docs.usekinetic.com/email-builder/create-static ## Design your template in Klaviyo first * Open Klaviyo and create your email in the static builder as you would normally. * **Save** the email as a **Template** * For more information on how to save a template in Klaviyo, see [here](https://help.klaviyo.com/hc/en-us/articles/115005253868). Important: make sure your static template is complete before importing to avoid re-importing at a later date. Read more about how templates work in Kinetic \[HERE]. # Import a template Source: https://docs.usekinetic.com/email-builder/import-template ## Importing your template into Kinetic * In the Kinetic dashboard, navigate to **Email Templates**. * Click **Import Templates** and select the static template you created in Klaviyo by clicking **Make Interactive**. **Tip: If you do not see your Klaviyo template in the list of Available Templates, you may need to refresh the Kinetic page in your web browser.** # Get familiar with the Kinetic interface Source: https://docs.usekinetic.com/email-builder/index ## **Editing static content inside the Kinetic builder** Within the Kinetic builder, you can make some basic edits to your static Klaviyo template. However, Kinetic is primarily designed for managing interactive elements, so be sure to complete your template setup in Klaviyo before importing. ### **What you can edit** * **Text blocks:** Double-click a block to edit text and apply basic formatting like bold, italic, and underline. * **Remove or hide unwanted blocks:** Click the block and select the button. You can choose to delete the block entirely or set it as a fallback. * **Re-order blocks:** Select a block and click the button to drag it to a new position. ### What you cannot edit * **Links:** Any links pulled from Klaviyo, including buttons and text links, cannot be edited in Kinetic. These must be updated in Klaviyo before importing the template. While working with Kinetic and Klaviyo together, it’s important to understand how edits flow between the two platforms. When working with Kinetic, all base template edits should be completed in Klaviyo before importing the template into Kinetic. You can only have one instance of a static Klaviyo template in Kinetic at the same time, so any future edits to the base design must be done in Klaviyo and replaced in Kinetic to see your changes. This can be done in one of two ways: ### **Option 1: Clone and Import (preferred)** 1. Clone your template in Klaviyo. 2. Make edits to the cloned version as needed. 3. Import the new cloned template into Kinetic. 4. Drag your interactive widgets back into the template and apply your saved configurations. This option is useful if you want to keep the older template version in Kinetic for later reference. ### **Option 2: Delete and Re-Import** 1. Delete the existing template from Kinetic. 2. Edit your original Klaviyo template as needed. 3. Re-import the updated template into Kinetic. 4. Drag your interactive form back into place and apply your saved configurations. This option maintains a cleaner template list and can limit confusion when working in teams *** ## Placing widgets When dragging an interactive widget into your template, a green line will appear in the builder to indicate where the widget will be placed. Widgets will automatically snap to sections created in your static Klaviyo template. Where you place your widget affects how it is displayed. If you notice display issues, this may be caused by the cell in which the widget was placed. # Preview your layout Source: https://docs.usekinetic.com/email-builder/preview ## Enter your preview text * From inside the **Preview** interface, you must now set your **Preview Text** before pushing the template back to Klaviyo. **Important:** The preview text you enter here will be displayed to your subscribers in your final campaign. Klaviyo automatically generates preview text from the first section of your email. For AMP/HTML emails, this section will contain code, meaning your subscribers would see this in their inbox. To change this in Klaviyo would require editing code. To ensure your preheader displays correctly across all inboxes, you will need to set it in Kinetic before exporting. We then make sure that your preview text will always display correctly to your subscribers. * If you would like to change your preview text before sending your final campaign and have already pushed your template, you will need to change it in Kinetic and re-push your template back into **Klaviyo**. ## Check styling and layout * Click the **Preview** button in the top right of the template builder interface. * Here you can preview multiple views to simulate how your email will be displayed in different inboxes. **Fallback** will display the static email shown when your interactive email is not able to be displayed. * Verify the layout and placement of your form is as intended. * We suggest sending yourself a test email at this stage to make sure everything is working correctly inside the inbox. **Tip:** Make sure to open your email in as many different inboxes as possible. We suggest opening the mail in Apple Mail, Gmail, and Outlook on both desktop and mobile. This will cover all mime types (AMP, HTML, static fallback). # Push to Klaviyo Source: https://docs.usekinetic.com/email-builder/push-to-klaviyo After entering your preview text, click Push to Klaviyo to send your interactive template into Klaviyo. # Push your template to Klaviyo * After entering your preview text, click **Push to Klaviyo** to send your interactive template into Klaviyo. * You will now see a copy of your original static template in your Klaviyo templates list. The interactive version will have an **AMP** tag. * This template can now be assigned to a campaign or flow as usual. **Important:** Klaviyo creates a hidden copy when you assign a template to a campaign. This means if you later change your interactive template inside the Kinetic editor, you will need to push your template again and reassign it within your campaign or AB test in order to see your updates. Before sending your campaign, review our comprehensive testing checklist to ensure your emails work perfectly across all clients. # Template Settings Source: https://docs.usekinetic.com/email-builder/template-settings Manage the global settings that apply to your interactive email template. Template settings let you configure everything that applies to the form as a whole — branding, language, integrations, and how the form behaves in email and on the website fallback. ## Accessing Template Settings Click the **Settings** tab in the top-center navigation bar of the builder (alongside **Builder**, **Used In**, and **Results**). This opens the settings page, which is organized into three groups in the left-hand sidebar. ## General Settings that apply to the form as a whole, regardless of where it is deployed. * **[Branding](/form-builder/settings/branding)** — colors, buttons, and form container styling. * **[Language](/form-builder/settings/language)** — localize the standard form text (Next, Submit, validation messages). * **[Integrations](/form-builder/settings/integrations)** — connections to Klaviyo and other tools. * **[Product Quiz](/form-builder/settings/product-quiz)** — recommendation logic for Product Quiz forms. ## Email Settings specific to forms deployed in email. * **[Layout](/form-builder/settings/email-layout)** — how the form is laid out inside the email (form container, card style, padding, interactivity indicator). * **[Advanced](/form-builder/settings/email-advanced)** — Apple Mail–specific behaviour (Fluid Mode, Keep Form in Email, Show Product Results in Email). * **[Email Redirect](/form-builder/settings/email-redirect)** — fallback behaviour for email clients that do not support interactive forms. ## Website Settings specific to forms deployed on a website. * **[Layout](/form-builder/settings/website-layout)** — display style, trigger button label, first-page configuration, and form controls. * **[Trigger](/form-builder/settings/trigger)** — when and how the form is shown on a website. * **[Targeting](/form-builder/settings/targeting)** — audience rules for website embeds (device, URL, location, cart contents). # Email test checklist Source: https://docs.usekinetic.com/email-builder/testing Best practices for testing your interactive email templates before sending ## Testing overview Once you've created an email and added forms, proper testing ensures your recipients see exactly what you intended. While the preview feature inside the Kinetic template builder offers a quick way to check your template during development, the end result can differ from what you see in the preview panel, as we cannot simulate email inboxes perfectly. We highly recommend sending test emails to verify your emails look exactly as intended across different email clients. ## Best testing practices ### Send final tests through Klaviyo To be 100% sure that users receive the email design you intended, send your final tests via Klaviyo to remove any platform-specific variables from your tests. This ensures your test environment matches your production environment exactly. ### Understanding email versions Your interactive email contains multiple versions that display based on the recipient's email client: * **AMP version** - Interactive version for Gmail * **Apple Mail version** - Interactive version for Apple Mail * **Fallback version** - Static version for non-interactive clients **Important:** The sender address does not influence which email template you see, only which inbox you open the email in. For example: * If you send to `myname@gmail.com` but open it in Outlook, you will not see the AMP version * If you send to `myname@hotmail.com` but open it in Gmail, you will see the AMP version ## Testing checklist We recommend covering all mime types in your tests on both mobile and desktop devices. ### AMP version testing **Where to test:** Gmail (desktop and mobile app) * Open your test email in Gmail on desktop + an Android device. If possible, check via the Gmail app on iOS as well. * Check that interactive elements display correctly. * Test form functionality such as product recommendations and styling. ### Apple Mail testing **Where to test:** Apple Mail (macOS and iOS) * Open your test email in Apple Mail on Mac + iPhone/iPad. * Check that interactive elements display correctly. * Test form functionality such as product recommendations and styling. ### Fallback version testing **Where to test:** Outlook, ProtonMail, web.de * Open your test email in any of these clients to see the static fallback. * Verify the fallback design. * Test that click-through to web version works properly. ## Testing workflow Follow this systematic approach to thoroughly test your templates: 1. **Preview in Kinetic** - Use the preview panel for quick checks while building your template. This gives you an immediate sense of layout and design. 2. **Send test from Kinetic** - Send initial test emails directly from the Kinetic builder to catch any immediate issues with interactivity. 3. **Test in Klaviyo** - Push your template to Klaviyo and send test emails from there to ensure platform compatibility. 4. **Test across clients** - Open the same test email in Gmail, Apple Mail, and Outlook to verify all versions display correctly. 5. **Test on mobile** - Verify responsive design on actual mobile devices, not just browser emulators. 6. **Final validation (optional)** - Send one final test through your Klaviyo flow or a test campaign to confirm everything works in your production environment. Create email accounts across different providers (Gmail, Outlook, Apple) specifically for testing to streamline your QA process. ## Next steps Learn more about how to set up an AB test in Klaviyo to compare performance between interactive and static variations. # Best practices Source: https://docs.usekinetic.com/form-builder/best-practices Best practices for creating effective interactive forms in Kinetic. ## Best practices for interactive forms Here you will find our guidelines on creating effective interactive forms that both maximize engagement and ensure reliable delivery. ## Limit the Number of Questions We recommend keeping your forms concise and focused: * Start small and test your form before adding more questions * **Begin with around 3-4 questions** per form to see what resonates with your audience and avoid overwhelming them * Longer forms (10+ questions) tend to see significant drop-off rates * Each additional question reduces completion likelihood ## Use Easy First Questions The first question sets the tone for engagement: * **Avoid starting with open text input fields** - they create a higher barrier to entry * Begin with choice questions or NPS ratings that require just a click * Once users click and see the email is interactive, they're much more likely to continue engaging This approach makes the initial interaction effortless for the user and demonstrates the interactive nature immediately. ## Use Pages Multi-page forms improve the user experience and enhance data collection: * **Collect partial responses** in AMP and Apple Mail (default for all Pro plans) * Answers are stored when the user navigates to new pages, allowing you to collect data even if they do not fully complete the form * We recommend using 1 question per page for simple forms such as preference surveys * Splitting forms into pages can help to: * Keep emails shorter and reduce scrolling * Create a cleaner, less cluttered appearance * Reduce hesitancy / friction to begin your form ## Enable Fluid Mode For single-question-per-page forms, turn on **Fluid Mode** to auto-advance users to the next question as soon as they make a selection — removing the need to click **Next** after each answer. * Reduces clicks and friction, leading to higher completion rates * Answers are still saved to the Klaviyo profile in real time, so partial submissions are preserved * On pages with multiple questions, Fluid Mode automatically defers to a manual **Next** click so users can answer every field Toggle it under the form's **Settings → Email → Advanced** menu. See the full setting reference in [Form Elements & Settings](/form-builder/builder/field-settings#fluid-mode). ## Communicate Interactivity Clearly Help users understand they can interact directly in the email: * Keep in mind that many subscribers have never received an interactive email before * We provide an **Interactivity Indicator** (enabled by default) that displays a small animated gif to indicate the form's interactivity. * We recommend leaving this enabled * Consider adding instructional text when fitting, such as: * "Click below to respond directly in this email" * "This form works inside your email" Clear communication encourages participation by setting proper expectations and reducing friction. ## Additional Tips * Test your forms thoroughly across different email clients Read more about the best practices for testing your interactive email templates before sending. * Monitor analytics regularly to optimize question types and order * Consider your audience's context when timing form deployment * A/B test different question formats to maximize engagement * Create two versions of your form to test the best fit for your audience. Consider testing: * Amount of questions * Question type (e.g. image selection vs. choice buttons, free text input vs. choice) * Wording * Check the analytics for your different forms in the Kinetic dashboard to determine which is converting better. More details on our analytics dashboard can be found [here](https://docs.usekinetic.com/form-builder/analytics#form-specific-analytics). # Form Elements & Settings Source: https://docs.usekinetic.com/form-builder/builder/field-settings Detailed configuration options for all form field types, including design settings, validation rules, and Klaviyo integration. ## 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 at the top of the right-hand panel 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: Configure multiple choice, [image choice](/form-builder/fields/image-choice), and [dropdown](/form-builder/fields/dropdown) fields with advanced layout options. Set up [email](/form-builder/fields/email) and [phone](/form-builder/fields/phone) fields with validation and formatting rules. Collect open-ended responses with [short](/form-builder/fields/text-input) and [long text](/form-builder/fields/long-text) fields. Add simple binary questions for quick confirmations and preferences. Capture opt-ins and agreements with a single checkbox element. Measure customer loyalty with Net Promoter Score elements. Collect custom numerical ratings with a fully configurable scale. Gather feedback using visual icons like stars, hearts, or smileys. Capture dates with flexible input methods and storage options. 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 **Settings** tab in the top-center navigation bar of the Form Builder (alongside **Builder**, **Used In**, and **Results**). This opens your form's settings page containing three groups of configuration options: * **General** — settings that apply to the form as a whole, regardless of where it is deployed: * **Branding** — colors, buttons, and form container styling. * **Product Quiz** — recommendation logic for Product Quiz forms. * **Language** — localize the standard form text. * **Integrations** — connections to Klaviyo and other tools. * **Email** — settings specific to forms deployed in email: * **Layout** — how the form is laid out inside the email. * **Advanced** — Apple Mail–specific behaviour (Fluid Mode, Keep Form in Email, Show Product Results in Email). * **Email Redirect** — fallback behaviour for email clients that do not support interactive forms. * **Website** — settings specific to forms deployed on a website: * **Layout** — how the form is laid out on the website. * **Trigger** — when and how the form is shown on a website. * **Targeting** — audience rules for website embeds. ## Branding (Design) 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. ### 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. *** ## Product Quiz Found under **General → Product Quiz**. Configure how product recommendations behave and display for Product Quiz forms. See [Build a Form](/form-builder/builder/index) for an overview of quiz mode. ### Behavior * **Product Button Action:** Where users are redirected when clicking a recommended product (e.g., **View Product Page**). * **Show Price Range:** Display the min–max price range for products with multiple variants. * **Push to Klaviyo Profile:** Save quiz product recommendations as profile attributes so they can be used in segments and flows. ### Display Product grid layout in Gmail (AMP). * **Desktop Columns:** Choose **1 (Horizontal)**, **2 columns**, or **3 columns**. * **Mobile Columns:** Choose **1 (Horizontal)** or **2 columns**. ### Endscreen Maximum number of products shown after submission. Configure separately for each surface: * **Gmail** — max products shown in Gmail's AMP view. * **Apple Mail** — max products shown in Apple Mail. * **Fallback** — max products shown on the fallback web page. * **Fallback Collection:** A Shopify collection used when no pinned products match the user's submission. Leave blank to skip showing any products in that case. *** ## Language Set the language for standard components in your form. Found under **General → Language** in the Settings sidebar. * **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 *** ## Integrations Configure how data is tracked and how the form interacts with third-party tools like Klaviyo. Found under **General → Integrations**. ### 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` *** ## Email — Layout Found under **Email → Layout**. Controls 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. *** ## Email — Advanced Apple Mail–specific settings, found under **Email → Advanced**. ### Fluid Mode When enabled, **Fluid Mode** automatically advances the user to the next screen as soon as they select an answer on a single-choice question — eliminating the need to click **Next** after each selection. This creates a faster, more seamless flow through the form and is designed to improve completion rates. **How it behaves:** * **Single-choice pages:** Auto-advances immediately when the user makes a selection. * **Multi-question pages:** Does **not** auto-advance — the user still clicks **Next** so they have time to answer every field on the page. **Data capture:** * Answers are saved to the user's Klaviyo profile in **real time** as they progress. * **Partial submissions** are preserved: if a user drops off halfway, every answer they gave up to that point is still captured. Fluid Mode pairs well with single-question-per-page forms — see [Use Pages](/form-builder/best-practices#use-pages) in best practices. ### Other Apple Mail settings * **Keep Form in Email:** Keep the form visible in the email after a successful submission in Apple Mail. * **Show Product Results in Email:** Display product recommendations directly in the email without redirecting to a web page. *** ## Email — Email Redirect Found under **Email → Email Redirect**. Controls the experience for users whose email clients (like Outlook) do not support interactive forms. * **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. *** ## Website Settings The **Website** group in the sidebar contains everything needed to deploy your form as an on-site embed: * **Layout** — how the form displays on the page. * **Trigger** — when and how the form is shown to visitors (e.g., on page load, exit intent, after a delay). * **Targeting** — which visitors see the form (audience rules and URL targeting). Full reference for every Website setting — Layout, Trigger, and Targeting. # Build a form Source: https://docs.usekinetic.com/form-builder/builder/index Learn how to create, customize, and deploy interactive forms in your email templates. ## Build your first form ### Initiate a New Form From your main dashboard, navigate to the left-hand sidebar and click the **+ New Form** button. ### Choose Your Starting Point A pop-up window will appear offering three ways to begin: * **Generate with AI:** Paste a Shopify store URL and let Kinetic build a tailored form for you. See [Generate a form with AI](#generate-a-form-with-ai) below. * **Form Presets:** Select from pre-made templates like *Post-Purchase NPS*, *Segmentation Question*, or *Welcome Survey*. * **Start From Scratch:** Choose this option at the bottom of the window to start with a blank form. ### Add Form Fields Once in the builder, you will see the **Add form elements** menu. Simply click a question type to add it to your current form page. *** ## Generate a form with AI Instead of starting from a preset or a blank form, you can have Kinetic generate a complete, ready-to-edit form by pasting your Shopify store URL into the **+ New Form** modal. Kinetic scrapes the store, picks the right questions, and — for product quizzes — wires real products to the answers automatically. ### What it does * **URL-based generation:** Paste any Shopify store URL into the **+ New Form** modal to start the build. * **Intelligent scraping:** Kinetic scans the URL to understand the store's context, extract branding elements, and pull live product data. * **Curated question bank:** Forms are assembled from a proprietary database of 2,000+ high-converting survey questions, filtered to your store's niche. ### The generation process ### Paste your store URL In the **+ New Form** modal, choose **Generate with AI** and paste the Shopify store URL you want to generate from. ### Pick the form types Choose which types of form you'd like Kinetic to generate. Options include: * **Welcome Flow** * **Post-Purchase Survey** * **Product Finder Quiz** ### Let Kinetic build it Kinetic handles the full build behind the scenes — structuring the quiz, matching products to potential answers, laying out the form, and optimizing the flow for conversions. ### Preview and test When generation finishes, an interactive preview modal opens. Click through the form to test the logic and flow before saving. ### Save to your dashboard Click **Done** on the preview to save the form instantly to your Forms dashboard. ### Product Finder Quizzes When you choose **Product Finder Quiz**, Kinetic goes a step further: * **Real product integration:** Live inventory is pulled directly from the Shopify URL you provided. * **Automated logic mapping:** Scraped products are assigned to the relevant quiz answers, so the recommendation engine is fully functional out of the gate. ### Editing the generated form AI generation is a high-fidelity starting point, not a finished product. Once saved, the form opens in the standard builder where you can: * Add, remove, or reorder questions * Adjust every setting under the **Settings** tab (Branding, Product Quiz logic, Targeting, etc.) * Tweak the design and copy to match your voice Even when the generated quiz looks great out of the gate, it's worth opening the **Settings → Product Quiz** panel to confirm the column layout and end-screen product caps match how you want recommendations to appear. *** ## Add and edit fields ### Adding Questions Click **Add Field** to insert a new question. Choose from these field types: **Input Fields:** * **Text** - Short, single-line responses (names, cities) * **Long Text** - Multi-line feedback or comments * **Email** - Validated email address collection * **Phone** - Phone numbers with country validation **Choice Fields:** * **Multiple Choice** - Single or multi-select options * **Dropdown** - Space-saving selection list * **Image Selection** - Visual choice grid * **Yes / No** - Simple binary yes or no question * **Checkbox** - Single checkbox for opt-ins or confirmations **Rating & Ranking:** * **NPS Score** - 0-10 satisfaction scale * **Opinion Scale** - Customizable numerical rating scale * **Rating** - Visual icon-based ratings (stars, hearts, smileys) **Display Elements:** * **Text Label** - Section headers or instructions * **Date Picker** - Calendar date selection ### Editing Questions 1. Click any field to open its settings panel on the right 2. Enter your question text 3. Configure answer options (for choice fields) 4. Set the Klaviyo property name for data storage 5. Toggle "Required" if the question is mandatory Learn more about configuring each question element type, including advanced settings, validation rules, and Klaviyo integration options. ### Reordering Fields Drag the grip icon (⋮⋮) on the left of any field to reorder questions. ### Multi-Page Forms Click **Add New Page** to create pages for your form. This improves completion rates by breaking long forms into digestible steps, and allows you to track partial submissions in AMP. *** ### Enable Product Recommendations By default, forms are set to **Universal** (standard data collection). To display product recommendations you must first switch your form type within the builder. To switch to recommendation mode: ### Select an Element Click on a choice-based element in the builder (e.g., **Multiple Choice**, **Dropdown**, or **Picture Choice**). ### Change Form Type At the top of the right-hand panel, locate the form-type dropdown and change the setting from **Universal** to **Product Recommendation**. ### Pin Your Products You will now see a **+ Pin Product** button under each answer option. Click it to browse and select products from your connected Shopify store. **Product recommendation forms also capture data:** Enabling recommendations does not change how answers are stored or collected. This will work exactly the same as a standard form type. ### How the Scoring Logic Works Kinetic uses a point-based system to determine which product to recommend at the end of the form. **The Point System:** Each time a user selects an answer, the product(s) pinned to that specific choice receive **1 point**. If a user selects multiple answers, each associated product receives a point. * **Calculating the Result:** At the end of the form, the system tallies the points for all pinned products. * **The Winner:** The product with the **highest number of points** is displayed to the user on the submission screen. *** ## Save your form When you are finished building your form, click the **Save** button in the top right of the builder. **Note:** Once you have saved your form, a **Used In** button will appear at the top of the builder next to the form's name. Clicking this button will display a list of all email templates where this specific form is currently implemented, allowing you to easily track its usage across your campaigns in the future. *** ## Embed your form Once your form is saved, click the dark **Embed Form** button near the top of the right-hand panel. The right-hand panel will be replaced with a slide-out menu containing every distribution option, grouped under three headers: **Email**, **Website**, and **Share**. ### Email Use these options to deploy your form in a Klaviyo email. * **Add to Flow** — Prompts you to import a template from your Klaviyo template gallery. Use this when you want the form to live inside an existing automated flow. * **Use in Campaign** — Opens a centered **Export HTML Snippet** modal showing a preview of the form. Click **Copy HTML** at the bottom of the modal to copy the snippet to your clipboard, then paste it into the Klaviyo campaign editor. See the full quickstart for adding a form to a Kinetic email template. ### Website * **Embed on Website** — Generates the code snippet needed to place the form on a website. Use this for on-site capture, landing pages, or checkout flows. ### Share * **Copy direct link** — Copies a direct URL to the fallback Kinetic-hosted web form (a standard web page). Use this in CTA buttons, share it with colleagues for review, or send it anywhere a normal link is supported. The Embed Form menu replaces the previous workflow of dragging the Form Widget into a template manually. The Form Widget still exists for templates built inside the Kinetic email builder — see "Using the Form Widget" below. *** ## Using the Form Widget (Kinetic email builder) If you are building your email inside the Kinetic template builder, you can also place the form directly via the Form Widget: 1. Open your template in the Kinetic template builder by heading to **Email Templates** in the left control panel. 2. Drag in the **Form Widget** and position it accordingly. 3. You will now see a popup where you can select your form. *** ## Update or replace a form If you make changes to a form in the **Form Builder**, you will need to update the form widget within your templates to see the changes. To update: 1. In your template, select the **Form Widget**. 2. Select **Update Form** in the top right settings panel to pull in the latest version. * You will see an icon if changes have been detected in your form. 3. Repeat this for each template where the form is used. To use a different form, click **Re-select Form** and choose another from your library. # Email Distribution Source: https://docs.usekinetic.com/form-builder/embed/email Add your form to Klaviyo email flows and campaigns. Deploy your interactive form inside Klaviyo emails. ## Add to Flow Connect your form to an automated Klaviyo flow: 1. Click **Embed Form** in the form builder's right panel. 2. Select **Add to Flow** under the Email section. 3. Choose a Klaviyo template from your template gallery. 4. The form is embedded automatically — push the updated template to Klaviyo and select it in your flows as you would any other template. ## Use in Campaign For one-time campaign emails: 1. Click **Embed Form** → **Use in Campaign** 2. An **Export HTML Snippet** modal shows a preview 3. Click **Copy HTML** to copy the snippet 4. Paste it into the Klaviyo campaign editor's HTML block After editing a form, you need to re-export and update the HTML in Klaviyo. Changes are not synced automatically for campaign snippets. # Share Link Source: https://docs.usekinetic.com/form-builder/embed/share Share your form via a direct URL. Every published form has a direct URL on the Kinetic-hosted webform: ``` https://app.usekinetic.com/forms/YOUR_FORM_ID ``` ## How to Get the Link 1. Open your form in the builder 2. Click **Embed Form** in the right panel 3. Under **Share**, click **Copy direct link** ## Use Cases * Share with colleagues for review before going live * Use as a CTA link in social media posts * Add to SMS campaigns or push notifications * Quick testing during development The direct link always shows the latest published version of your form. # Website Embed Source: https://docs.usekinetic.com/form-builder/embed/website Deploy your form on any website with a simple script tag. # Website Embed Embed your Kinetic form on any website — Shopify stores, landing pages, or custom sites. ## Installation Add the embed script to your site's `` or before ``: ```html theme={null} ``` Then add the form element where you want it to be displayed on your website: ```html theme={null}
``` ### Shopify Installation For Shopify stores, add the script in **Online Store → Themes → Edit Code → theme.liquid** before ``. Installing it in `theme.liquid` (rather than on a single template) makes it the **Global** script — required for user identification, tracking, and Klaviyo sync to work across pages, including email-redirect landings. ## Layout Options | Layout | Description | | --------- | ----------------------------------------------------------------------------------------------------------- | | `inline` | Embeds the form directly into the body of the page. Always visible — no trigger needed. | | `popup` | Centered modal with a dimmed background. Requires a trigger (default button, custom element, or auto-open). | | `slider` | Side panel that slides in from the left or right when triggered. | | `popover` | Small chat-style bubble that opens the form in a floating card in the bottom-left or bottom-right corner. | | `sidetab` | Clickable tab pinned to the edge of the screen that slides the form out, similar to Slider. | ## Configuring the Embed The embed script renders the form using settings from the form builder. To control how it looks and behaves on your site: * **[Website Layout](/form-builder/settings/website-layout)** — display style, trigger button label, first-page configuration, form controls, and picture-choice grid. * **[Trigger](/form-builder/settings/trigger)** — auto-open, delay, suppression period, custom trigger element, and post-submission hide. * **[Targeting](/form-builder/settings/targeting)** — device, URL rules, email traffic, UTM parameters, location, and Shopify cart contents. # Configure End Screen Source: https://docs.usekinetic.com/form-builder/end-screens/index Learn how to customize the final confirmation screen your users see after submitting a form. The **End Screen** is the final step of your form. It allows you to thank respondents, provide further instructions, display a discount code, or guide them to another webpage using a Call to Action (CTA) button. This guide covers how to set up a standard (single) End Screen. If you want to show different end screens based on how a user answered specific questions, you'll need to use conditional logic. [Read more here](/form-builder/logic). ## Accessing End Screen Settings To begin customizing your end screen: In the Form Builder, scroll down to the bottom of your form canvas and click on the **End Screen** block (indicated by the green flag icon). Once selected, the right-hand settings panel will update to show the End Screen options. Click the **⚙️ Configure End Screens** button. ## Designing the Default End Screen Clicking the configure button opens the **End Screens** configuration panel. To create a single, universal end screen, ensure the **Multiple end Screens** toggle is turned **off**. Under the **Default End Screen** section, you can customize the following properties: ### 1. Alignment Choose how you want the content of your end screen to be aligned. You can select between: * **Left-aligned** * **Center-aligned** * **Right-aligned** ### 2. Image (Optional) You can visually enhance your end screen by adding an image or GIF. * Click the **Add Image** button to open the Media Library. * Choose an existing file or upload a new one. * **Supported formats:** SVG, PNG, JPG, or GIF. * *Note: Images will be automatically compressed and resized for optimal performance.* ### 3. End Screen Content Use the rich text editor to craft your confirmation message. * **Formatting Options:** You can bold, italicize, or underline text, and insert hyperlinks. * **Headings:** Use the text dropdown (labeled `Aa`) to easily switch between Headings or standard paragraph text. ### 4. Call-to-Action (CTA) Button If you want to direct users to another page (like your main website or info page) after they submit the form, you can add a button directly into your end screen content. Click the **+ Add Button** option located within the text editor toolbar. In the pop-up modal, fill out the following fields: * **Button Label:** The text that will appear on the button (e.g., "Click Here" or "Visit our Website"). * **URL:** The destination link (`https://...`). * **Open in New Tab:** Toggle this on if you want the link to open in a new browser tab so the user doesn't lose the original form page. Click **Add Button** to insert the CTA into your editor. **Styling your CTA Button:** You do not need to manually color the button in this menu. The button will automatically inherit the brand colors and styling you have established in your form's settings. # Setting Up Multiple End Screens Source: https://docs.usekinetic.com/form-builder/end-screens/multiple Learn how to create and manage multiple end screens to show respondents different outcomes based on their answers. If you want to show different end screens according to specific logic rules, you can enable the Multiple End Screens feature. This allows you to tailor the final confirmation page based on how a user filled out your form. This page covers how to create and manage the different end screen variants. To learn how to route users to these specific screens, you will also need to [configure your Logic Rules](/form-builder/logic). ## Enabling Multiple End Screens To get started, you need to turn on the feature within the End Screens configuration panel: Select your End Screen block in the form builder and click **⚙️ Configure End Screens** to open the panel. Inside the End Screens panel, toggle the first option **ON** for **Multiple end Screens**. ## Adding Additional End Screens Once enabled, you will see your initial screen labeled as the "Default Screen". To create a new variant: 1. Scroll beneath the Default Screen and click the **+ Add End Screen** button. 2. This will generate a new panel (e.g., "Screen 2") to create your alternate end screen. 3. You can configure this new screen exactly as you would a standard end screen, including adding text, images, and Call-to-Action (CTA) buttons. 4. You can click **+ Add End Screen** to set up as many end screens as you might need. ### Deleting an End Screen If you've added too many screens or simply need to remove one, click the **Trash icon** located directly next to the "Set Default" button on the top right side of the specific end screen's panel. **Keep an eye on email size!** While there is no hard limit to how many end screens you can create, adding a large number of them can increase your overall email size. You should regularly monitor the size of your form from within the **Preview** panel of the template builder to ensure your email doesn't get clipped by inbox providers. ### How End Screens are Titled To help you organize and identify your end screens in the builder, the system automatically assigns a title to each screen's panel based on the text content you add. * The title will automatically pull from the highest-level heading used in the text editor. * If you use a **Heading 1**, it will take that text. * If you only use a **Heading 2**, it will take that text instead. * If you use both a Heading 1 and a Heading 2, it will prioritize the highest level (Heading 1) as the title for the end screen. ## Setting the Default End Screen When using multiple end screens, one screen must always be designated as the **Default**. The default end screen acts as a fallback. It is the screen that will automatically be shown to a user if: * No logic rules are triggered by their specific selections. * The established logic rules are broken or no longer relevant. By default, the first screen you created will hold this status, but you can change it at any time: * To change the default, find the screen you want to act as the fallback and click the **Set Default** button located on the right side of its panel header. # Checkbox Fields Source: https://docs.usekinetic.com/form-builder/fields/checkbox Learn how to add and configure single Checkbox questions in your form. The **Checkbox** field allows you to add a single, isolated checkbox to your form. This is perfect for capturing isolated responses where a user either needs to check a box or leave it blank, such as agreeing to terms and conditions or opting into a specific newsletter. ## Adding a Checkbox Field To add this field type to your form: Click the **+ Add Field** button within your form builder canvas. In the pop-up menu, under the "Choice" category, select **Checkbox**. ## Field Settings Once the checkbox is added to your canvas, selecting it will open its configuration settings in the right-hand panel. ### General Settings * **Question:** Enter the internal name or prompt for your checkbox question here. * **Default Checked:** Toggle this on if you want the box to be pre-selected when the user views the form. If enabled, the user will have to manually uncheck it to opt out. * **Required:** Toggle this on if the user must check the box before they are allowed to submit the form. ### Design Settings These options control the visual appearance of your checkbox container. * **Minimal Style:** Toggle this on to display a simple, standard bare checkbox without any surrounding container styling. * **Fill Background:** Choose whether the checkbox has a solid background color behind it. * **Stack Direction:** Control whether the field aligns vertically or horizontally. * **Alignment:** Choose to align the checkbox field to the Left, Center, or Right. ### Checkbox Settings * **Checkbox Text:** This is the specific text that will appear directly next to the checkbox. * *Note: If you leave this field completely empty, the form will automatically use whatever text you entered in the "Question" field at the top of the settings panel.* ### Klaviyo Settings * **Property Name:** This dictates the exact custom property name where the user's response will be saved inside your connected Klaviyo account. # Choice Fields Source: https://docs.usekinetic.com/form-builder/fields/choice Configure multiple choice, dropdown, and image selection fields with advanced layout options and Klaviyo integration. ## Managing Answer Options For choice-based elements like Multiple Choice, you can precisely map how data is displayed vs. how it is stored. | Field | Description | | :----------------------- | :------------------------------------------------------------------ | | **Display Text (Left)** | The label visible to users inside the form (e.g., "Curly"). | | **Storage Name (Right)** | The value saved to the user's Klaviyo profile (e.g., "Curly Hair"). | **Add or Remove Options:** Click the **+ Add** button to include more choices, or the trash icon to delete existing ones. *** ## Layout and Design Settings ### Choice Settings * **Allow Multiple:** Toggle this to let users select more than one option. You can also define a **Min** and **Max** number of allowed selections. * **Columns:** Choose between 1 and 4 columns. * *Pro-Tip:* If you have many options, use multiple columns to reduce scrolling and keep the entire question visible on one screen. ### Visual Design * **Show Checkboxes:** Toggle to display checkboxes for selected options. * **Fill Background:** When enabled, the option button will highlight with a background color when selected. If disabled, the option text will change color when selected. * **Stack Direction:** Arrange options **Vertically** or **Horizontally**. * **Full Width:** Expand horizontal elements to span the entire width of the form box. * **Alignment:** Choose between **Left**, **Center**, or **Right** alignment for your option buttons. *** ## Klaviyo Integration Settings To ensure your data syncs correctly, configure the Klaviyo profile properties at the bottom of the settings panel. ### Set a Property Name In the **Property Name** field, enter the key that will represent this question in Klaviyo (e.g., `HairType`). ### Automatic Data Sync Once defined, every answer submitted by a user will be automatically saved under this property name in their Klaviyo profile. ### Follow Naming Conventions **Important:** Spaces are not allowed in property names. Please use: * **Capitalization** (e.g., `FavoriteColor`) * **Underscores** (e.g., `favorite_color`) # Date Picker Field Source: https://docs.usekinetic.com/form-builder/fields/date-picker Configure date elements with flexible input methods, and custom formats. ## Date and Utility Elements ### Date Element The Date element is ideal for capturing birthdays, preferred appointment dates, or any other date specific questions. Toggle this on to show an interactive calendar widget. Users can browse months and years to select a date visually. Toggle the Date Picker off to let users type the date manually via their keyboard using a pre-defined format. ### Advanced Date Configuration * **Date Format:** Choose the display format that matches your region: `DD/MM/YYYY`, `MM/DD/YYYY`, or `YYYY/MM/DD`. * **Show Components:** Customize exactly what data is collected. You can toggle **Day**, **Month**, or **Year** on/off individually. * *Example:* Turn off "Year" if you only need a user's birthday (month and day) for annual celebrations. ### Data Storage & Klaviyo Sync How you save date information affects how you can use it for marketing automation later. * **Combined Storage:** Saves the entire date as a single string under one property name (e.g., `birthday: 15/03/1990`). * **Separate Fields:** Creates individual properties for Day, Month, and Year. This is recommended for advanced segmentation. * *Example:* Mapping the month separately allows you to easily create a Klaviyo segment for "Users born in March." ## Klaviyo Integration Settings To ensure your data syncs correctly, configure the Klaviyo profile properties at the bottom of the settings panel. ### Set a Property Name In the **Property Name** field, enter the key that will represent this question in Klaviyo (e.g., `UserBirthday`). ### Automatic Data Sync Once defined, the date submitted by a user will be automatically saved under this property name in their Klaviyo profile. ### Follow Naming Conventions **Important:** Spaces are not allowed in property names. Please use: * **Capitalization** (e.g., `UserBirthday`) * **Underscores** (e.g., `user_birthday`) # Dropdown Source: https://docs.usekinetic.com/form-builder/fields/dropdown Compact selection list for choosing from many options. # Dropdown A dropdown field presents answer options in a compact select menu — ideal when you have many choices but limited screen space. ## When to Use * Long lists of options (countries, categories, sizes) * When screen real estate is limited * When you don't need visual emphasis on options ## Configuration | Setting | Description | | -------------------- | ------------------------------------------------ | | **Label** | The question text shown above the dropdown | | **Options** | List of selectable values | | **Required** | Whether an answer is mandatory | | **Placeholder** | Hint text shown when no option is selected | | **Klaviyo Property** | The profile property name for storing the answer | ## Data Format The selected value is stored as a string: ```json theme={null} { "field_name": "option_2" } ``` For short lists (2-5 options), consider using a [Choice field](/form-builder/fields/choice) instead — the visual options are easier to scan. # Contact Fields Source: https://docs.usekinetic.com/form-builder/fields/email Configure email and phone elements with validation, formatting rules, and Klaviyo data sync. ## Contact Information Settings Capturing contact details accurately is vital for lead generation and SMS marketing. The **Email** and **Phone** elements include specialized validation features to ensure your database remains clean and actionable. ### Email Element The Email element is pre-configured to recognize standard email formats and will prevent submission if an invalid address is entered. * **Question:** Define the label or call-to-action (e.g., *"What is your best email address?"*). * **Required:** If enabled, the user must provide an email to move to the next page or submit the form. * **Placeholder:** Enter the text displayed inside the field before the user starts typing (e.g., *'[example@email.com](mailto:example@email.com)'*). * **Property Name:** Define the Klaviyo property name where the email will be stored in the user's profile. *** ### Phone Element The Phone element provides advanced configuration options to ensure the numbers you collect are real and properly formatted for global or local reach. * **Question:** Customize the prompt for the user. * **Required:** Toggle on to to make this field mandatory. * **Placeholder:** Provide a format example for your users. #### Phone Validation Options Use these settings to restrict or format how phone numbers are entered: When active, the system checks the structural validity of the number based on the selected region. Toggle this on to restrict inputs to a specific country's format. **Targeting a single market?** When you enable **Country-Specific** mode, a "Select Country" dropdown appears. Choosing a country (e.g., USA, UK, or Germany) will automatically apply the correct country code prefix and validation rules for that specific nation. *** ## Klaviyo Integration Settings To ensure your data syncs correctly, configure the Klaviyo profile properties at the bottom of the settings panel. ### Set a Property Name In the **Property Name** field, enter the key that will represent this question in Klaviyo (e.g., `PhoneNumber`). ### Automatic Data Sync Once defined, every answer submitted by a user will be automatically saved under this property name in their Klaviyo profile. ### Follow Naming Conventions **Important:** Spaces are not allowed in property names. Please use: * **Capitalization** (e.g., `PhoneNumber`) * **Underscores** (e.g., `email_address`) # Image Selection Source: https://docs.usekinetic.com/form-builder/fields/image-choice Visual choice grid with images for each option. # Image Selection Image selection fields display answer options as a visual grid with images — perfect for product preferences, style quizzes, or any question where visuals help the user decide. ## When to Use * Product preference questions * Style or aesthetic quizzes * Visual A/B comparisons * Any question where images communicate better than text ## Configuration | Setting | Description | | ------------------- | --------------------------------------------- | | **Label** | The question text | | **Options** | Each option has a label, value, and image URL | | **Allow Multiple** | Whether users can select more than one option | | **Columns** | Number of columns in the grid (1-4) | | **Image Max Width** | Maximum width constraint for images | | **Required** | Whether an answer is mandatory | ## Adding Images For each option, upload or paste an image URL. Supported formats: JPEG, PNG, WebP, GIF. ## Data Format Single select: ```json theme={null} { "field_name": "option_1" } ``` Multi-select: ```json theme={null} { "field_name": ["option_1", "option_3"] } ``` For product quiz forms, use the "Pin Product" button on each option to link real Shopify products for the recommendation engine. # Long Text Source: https://docs.usekinetic.com/form-builder/fields/long-text Multi-line text area for detailed feedback and comments. # Long Text (Textarea) A multi-line text area for open-ended responses — feedback, comments, detailed descriptions. ## When to Use * Open-ended feedback questions * "Anything else you'd like to share?" * Detailed descriptions or explanations ## Configuration | Setting | Description | | -------------------- | ------------------------------ | | **Label** | The question text | | **Placeholder** | Hint text shown when empty | | **Required** | Whether an answer is mandatory | | **Klaviyo Property** | The profile property name | ## Data Format ```json theme={null} { "field_name": "This is a multi-line response\nwith line breaks preserved." } ``` # NPS Score Field Source: https://docs.usekinetic.com/form-builder/fields/nps Configure Net Promoter Score elements to measure customer loyalty. ## NPS Score Element The **Net Promoter Score® (NPS)** is a standard metric used to measure customer loyalty and the likelihood of users recommending your product to others. ### Configuration Options The NPS element is designed to be simple and effective, providing the following settings: * **Question:** Enter your specific NPS prompt (e.g., *"How likely are you to recommend \[Company Name] to a friend or colleague?"*). * **Required:** Toggle on to to make this field mandatory. * **Fill Background:** Toggle this on to highlight the score buttons with a solid background color when selected, or off to use a bordered style. *** ### Understanding the NPS Scale The NPS element features a standardized scale from **0 to 10**. **Why can't I change the scale?** The 0–10 scale is industry-standard. By keeping the scale fixed, you can accurately benchmark your score against global standards and track your brand's performance over time without data inconsistency. * **0–6 (Detractors):** Customers who are unhappy and may damage your brand through negative word-of-mouth. * **7–8 (Passives):** Satisfied but unenthusiastic customers who are vulnerable to competitive offerings. * **9–10 (Promoters):** Loyal enthusiasts who will keep buying and refer others, fueling your growth. *** ## Klaviyo Integration Settings To ensure your data syncs correctly, configure the Klaviyo profile properties at the bottom of the settings panel. ### Set a Property Name In the **Property Name** field, enter the key that will represent this question in Klaviyo (e.g., `NpsScore`). ### Automatic Data Sync Once defined, the answer submitted by a user will be automatically saved under this property name in their Klaviyo profile. ### Follow Naming Conventions **Important:** Spaces are not allowed in property names. Please use: * **Capitalization** (e.g., `NpsScore`) * **Underscores** (e.g., `nps_score`) # Opinion Scale Fields Source: https://docs.usekinetic.com/form-builder/fields/opinion-scale Learn how to add and configure customizable Opinion Scale ratings in your form. The **Opinion Scale** field allows you to collect opinion or scale ratings from your users. It functions similarly to a standard Net Promoter Score (NPS) survey, but offers full customization. If you want to collect numerical ratings outside of the strictly standardized NPS format, this is the ideal field to use. **Opinion Scale vs. Net Promoter Score (NPS)** While both fields function similarly and pass data to Klaviyo in the exact same way, the **Net Promoter Score®** field acts as a quick shortcut. Selecting the NPS field automatically sets up the industry-standard 0 to 10 scale and phrasing, and has NPS specific analytics in the Kinetic analytics dashboard. You should use the **Opinion Scale** field when you want to ask a custom question or use a non-standard numerical range (such as 1 to 5). ## Adding an Opinion Scale Field To add this rating type to your form: Click the **+ Add Field** button within your form builder canvas. In the pop-up menu, under the "Rating & ranking" category, select **Opinion Scale**. ## Field Settings Once added, select the Opinion Scale block in the canvas to open its configuration settings in the right-hand panel. ### General Settings * **Question:** Enter the text of your prompt or question here. * **Required:** Toggle this on if the user must provide a rating before they are allowed to submit the form. ### Scale Settings This section allows you to define the numerical range of your scale. * **From / To:** Use the dropdown menus to select the starting and ending numbers for your scale. *For example, you can set a classic 0 to 10 scale, or a smaller 1 to 5 scale*. ### Scale Labels You can add text labels beneath the numbers to help explain the meaning of the scale to your respondents. If you prefer to display only numbers, you can leave these text fields completely blank. * **Left:** The label for the beginning, or most negative end, of the scale (e.g., "Not likely" or "Absolutely not"). * **Center:** An optional label for the midpoint of the scale (e.g., "Neutral"). * **Right:** The label for the highest, or most positive end, of the scale (e.g., "Very likely"). ### Design Settings * **Fill Background:** Toggle this on to fill the square of the user's selected number with a solid brand color. If you toggle this off, the selected number will only display a colored border around it instead of a solid fill. ### Klaviyo Settings * **Property Name:** This dictates the exact custom property name where the user's numerical rating will be saved inside your connected Klaviyo account. # Phone Field Source: https://docs.usekinetic.com/form-builder/fields/phone Collect phone numbers with country-specific validation. # Phone Field Collect phone numbers with optional country-specific formatting and validation. ## Configuration | Setting | Default | Description | | ---------------------- | ------- | ------------------------------------- | | **Label** | — | The question text | | **Required** | false | Whether a phone number is mandatory | | **Phone Validation** | On | Enable format validation | | **Country-Specific** | Off | Restrict to a specific country format | | **Validation Country** | US | Country code for validation format | ## Validation When phone validation is enabled, the input is checked against the selected country's phone number format. Invalid numbers show a validation error. ## Data Format ```json theme={null} { "field_name": "+1 (555) 123-4567" } ``` Phone numbers are stored as entered by the user. If you need a standardized format for Klaviyo, consider using the E.164 format validation. # Rating Fields Source: https://docs.usekinetic.com/form-builder/fields/rating Learn how to add and configure Rating fields in your form. The **Rating** field allows you to collect feedback using visual icons like stars, hearts, or smileys. This is an engaging, visually appealing way to ask for product reviews, customer satisfaction scores, or general opinions. It provides similar functionality to an Opinion Scale or NPS survey but utilizes a more expressive format. ## Adding a Rating Field To add this rating type to your form: Click the **+ Add Field** button within your form builder canvas. In the pop-up menu, under the "Rating & ranking" category, select **Rating**. ## Field Settings Once added, select the Rating field in the canvas to open its configuration settings in the right-hand panel. ### General Settings * **Question:** Enter the text for your question or prompt here. * **Required:** Toggle this on if the user must provide a rating before they are allowed to submit the form. ### Design Settings These settings control the overall appearance of the rating scale. * **Fill Background:** Toggle this on to fill the background behind the selected icon with a solid brand color. If turned off, the icon will only have a border. * **Show Numbers:** Toggle this on to display the corresponding numerical value beneath each icon in the scale. * **Alignment:** Choose to align the icons to the Left, Center, or Right of the field container. ### Rating Settings This section is where you customize the specific icons and scale of your rating field. * **Steps:** Use the dropdown to select the total number of icons in your scale (e.g., a 1 to 5 scale or 1 to 10). * **Icon Set:** Choose the visual theme for your scale. You can select between: * **Stars** * **Hearts** * **Smileys** (These dynamically change expression based on the selected rating, from angry/unhappy to progressively happier) * **Icon Style:** If you selected the Stars or Hearts icon set, you can further customize their appearance: * **Flat (SVG):** A solid-color SVG icon that will automatically inherit your form's brand colors. * **Emoji:** A standard, full-color emoji icon. ### Scale Labels You can add text labels beneath the ends of the scale to help explain the rating system. * **Left:** The label for the most negative end of the scale (e.g., "Poor" or "Not Good"). * **Right:** The label for the most positive end of the scale (e.g., "Excellent" or "Amazing"). ### Klaviyo Settings * **Property Name:** This determines the exact custom property name where the user's rating score will be saved in your connected Klaviyo account. # Text Input Fields Source: https://docs.usekinetic.com/form-builder/fields/text-input Configure short and long text input fields for collecting open-ended responses. ## Text Input Elements Text elements allow you to collect qualitative, open-ended responses from your users. Whether you need a simple name or a detailed review, these fields provide the flexibility needed for descriptive data collection. Best for brief, single-line responses like names, job titles, or specific keywords. Ideal for multi-line feedback, detailed comments, or descriptive answers. Use for simple number inputs. ### Configuration Options Unlike choice-based elements, text inputs do not require option mapping. Both the Short and Long Text elements share the following standard configuration fields: * **Question:** Enter the prompt or label your users will see (e.g., *"What is your main goal for this year?"*). * **Required:** If enabled, the user must enter text to proceed to the next page or submit the form. * **Placeholder:** Provide a "hint" or example text that appears inside the input field before the user starts typing (e.g., *"Type your feedback here..."*). *** ## Number Fields The **Number** field allows you to prompt subscribers to type in a specific numerical value. This is useful for collecting data like age, quantity, or any other open-ended numerical response. ### Adding a Number Field To add this field type to your form: Click the **+ Add Field** button within your form builder canvas. In the pop-up menu, under the "Text" category, select **Number**. ### Field Settings Once added, select the Number field in the canvas to open its configuration settings in the right-hand panel. **General Settings** * **Question:** Enter the text for your prompt or question here. * **Required:** Toggle this on if the user must provide a number before they are allowed to submit the form. * **Placeholder:** Enter example text that will display faintly inside the input box before the user starts typing (e.g., "Enter number here..."). **Number Settings** * **Whole numbers only:** This toggle controls the formatting of the numbers accepted. * If toggled **ON**, users can only enter full integers (e.g., 1, 2, 10). * If toggled **OFF**, users are permitted to enter fractional or decimal numbers (e.g., 1.5, 2.7). ## Klaviyo Integration Settings To ensure your data syncs correctly, configure the Klaviyo profile properties at the bottom of the field settings panel. ### Set a Property Name In the **Property Name** field, enter the key that will represent this question in Klaviyo (e.g., `HairType`). ### Automatic Data Sync Once defined, every answer submitted by a user will be automatically saved under this property name in their Klaviyo profile. ### Follow Naming Conventions **Important:** Spaces are not allowed in property names. Please use: * **Capitalization** (e.g., `FavoriteColor`) * **Underscores** (e.g., `favorite_color`) # Text Label Element Source: https://docs.usekinetic.com/form-builder/fields/text-label Use text labels for section headers, instructions, and visual organization in your forms. ## Text Label Element The **Text Label** is a non-input element. It is used strictly for the visual organization and flow of your form. ### Purpose and Usage * **Section Headers:** Create clear titles for different parts of your form. * **Detailed Instructions:** Provide extra context that doesn't fit within a standard question field. * **Visual Breathing Room:** Use labels to break up pages with multiple questions. **No Data Sync Required:** Since the Text Label does not collect user input, you do not need to define a Klaviyo property name for it. It exists purely for the user interface. # Yes / No Fields Source: https://docs.usekinetic.com/form-builder/fields/yes-no Learn how to add and configure Yes / No questions in your form. The **Yes / No** field is the most straightforward way to ask a simple binary question in your form. It is ideal for gathering quick confirmations, preferences, or opt-ins from your respondents. ## Adding a Yes / No Field To add this question type to your form: Click the **+ Add Field** button within your form builder canvas. In the pop-up menu, under the "Choice" category, select **Yes / No**. ## Field Settings Once added, select the field in the canvas to open its configuration settings in the right-hand panel. Here you can customize how the question appears and functions: ### General Settings * **Question:** Enter the text of your question here. * **Required:** Toggle this on if the user must answer this question before submitting the form. ### Design Settings These settings control the visual layout of your Yes/No buttons. * **Show Radio Circles:** Toggle on to display traditional circular radio buttons next to the text options. * **Fill Background:** Choose whether the selected answer option button has a solid background color. * **Stack Direction:** Select whether the Yes and No options should be stacked vertically (one on top of the other) or horizontally (side-by-side). * **Alignment:** If your options are stacked horizontally, choose to align them to the Left, Center, or Right. ### Yes / No Labels While the default text is "Yes" and "No", you can customize these labels to better fit your specific question. * **Yes Label:** Enter your preferred text for the affirmative option (e.g., "True," "Agree," "I'm In!"). * **No Label:** Enter your preferred text for the negative option (e.g., "False," "Disagree," "Not today"). ### Klaviyo Settings * **Property Name:** This determines how the user's answer will be saved as a custom property on their profile in your connected Klaviyo account. * *Note: This field auto-populates with a default ID, but it is highly recommended to change it to something recognizable (e.g., `interested_in_newsletter` or `agreed_to_terms`) for easier segmentation later.* # Forms Overview Source: https://docs.usekinetic.com/form-builder/index Manage your interactive forms — create, configure, publish, and track performance. # Forms Overview The **Forms** page is your central hub for managing all interactive forms. From here you can create new forms, view submission counts, and open any form in the builder. ## Creating a form Click **+ New Form** to start. You can: * **Generate with AI** — paste a Shopify URL and let Kinetic build a tailored form * **Use a preset** — start from templates like Post-Purchase NPS or Welcome Survey * **Start from scratch** — blank canvas with full control ## Form list Each form shows: * **Title** — click to open in the builder * **Status** — Published or Draft * **Responses** — total completed submissions * **Completion rate** — percentage of started forms that were completed ## Next steps Learn about the form builder canvas. Explore all available question types. Configure branding, layout, and targeting. Track form performance and submissions. # Setting Up Logic Rules Source: https://docs.usekinetic.com/form-builder/logic/index Learn how to show different end screens based on how a user fills out your form using conditional logic rules. Once you have created your multiple end screens, you need to set up **Logic Rules** to tell the form which screen to show to which user. Logic rules are built on "If/Then" statements: *If* a user answers a question in a certain way, *then* show them a specific end screen. If no rules are set up, or if a user's answers don't match any of the rules, the form will automatically show the [Default End Screen](/form-builder/end-screens). ## Creating a Logic Rule To begin creating logic rules, select the End Screen block in the form builder and click **⚙️ Configure End Screens**. Then, navigate to the **Logic Rules** tab at the top of the panel. If this is your first time setting up logic for this form, the panel will be empty. Click the **+ Add Rule** button to create your first rule. In the new rule block, use the first dropdown labeled "Field..." to select the specific question you want to base this rule on. * The dropdown will list your form's pages and the questions within them (e.g., "Page 1 > Multiple Choice Question 1"). The next dropdown determines how the answer should be evaluated. Select either: * **is:** The user's answer *must match* the value you set in the next step. * **is not:** The user's answer *must not match* the value you set in the next step. In the "Value..." dropdown, select the specific answer option that will trigger this rule. If you need a rule to depend on more than one answer, click the **+ Add Condition** button located beneath your first condition. You can then choose whether these conditions should be evaluated with **AND** or **OR** logic: * **AND:** The user must meet *all* conditions in the rule to see the designated end screen. *(Example: If "Favorite Color" is "Red" AND "Size" is "Large", show the "Red/Large" end screen.)* * **OR:** The user only needs to meet *one* of the conditions to see the designated end screen. *(Example: If "Favorite Color" is "Red" OR "Favorite Color" is "Blue", show the "Cool Colors" end screen.)* Finally, use the "**Then show:**" dropdown at the bottom of the rule block to choose which end screen the user should see if they meet this condition. * This dropdown lists all the end screens you've created, using the highest-level heading (H1 or H2) from each screen as its title. * If an end screen doesn't have a heading, it will simply be labeled "Screen". ## Understanding Rule Hierarchy If you have multiple rules set up, it's crucial to understand how they interact. **Rules are checked in chronological order, from top to bottom.** When a user submits the form, the system evaluates their answers against your rules starting with Rule 1. If their answers match Rule 1, they are shown that corresponding end screen, and the system stops checking any further rules. If their answers *don't* match Rule 1, it moves on to check Rule 2, and so on. ### Reordering Rules Because the system stops at the *first* matching rule, the order of your rules is important. You should always place your most specific or most important rules at the top of the list. To change the order of your rules, simply drag them using the icon on the left of the rule panel into your desired order. ## Deleting Rules If you no longer need a specific logic rule, you can easily remove it. Simply locate the rule you want to delete and click the **Trash icon** located in the top right corner of that rule's panel. # Results Source: https://docs.usekinetic.com/form-builder/results/index Understand how your form is performing — views, submissions, funnel drop-off, and per-question breakdowns. The **Results** view surfaces everything you need to evaluate a form: top-line submission counts, channel-specific performance, a question-by-question funnel, and individual response breakdowns. Open it from the **Results** tab on any form. The sidebar header shows the **total submission count** across all channels and time. Use the **Date Range** dropdown to scope every metric on the page (defaults to **All time**). The sidebar also lists each **question** in the form with its response count — click one to jump straight to that question's breakdown further down the page. ## Website Embed Top-line performance for the form when embedded on your site. | Metric | Description | | --------------------- | ------------------------------------------------------------------------------------------ | | **Embed Views** | Times the embed loaded on a page. Counts impressions, not unique visitors. | | **Embed Submissions** | Submissions that originated from the website embed (separate from email submissions). | | **Conversion Rate** | Embed Submissions ÷ Embed Views. A quick read on how well the on-site experience converts. | ### By Domain Breakdown of views, submissions, and conversion rate per domain the embed is loaded on. Useful for spotting which storefronts, preview environments, or staging URLs are driving traffic. ### By Display Mode Shows the split of views across each display mode (`inline`, `popup`, `slider`, `popover`, `sidetab`). If you've configured multiple modes, this is where you'll see which is doing the work. ## Email Embed Analytics covering forms embedded in your emails. | Metric | Description | | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | **Opens** | Times the form was opened. Includes the period-over-period change vs. the previous matching window. | | **Partial Responses** | Sessions where at least one question was answered but the form wasn't submitted. | | **Complete Responses** | Fully submitted forms. The period-over-period change here is the headline number for most reviews. | | **Completion Rate** | Complete Responses ÷ Opens. Reflects how well the form retains people once it's been opened. | | **Median Time to Complete** | Median (not mean) time from first interaction to submission. Median is more robust to outliers like tabs left open. | | **Response Distribution** | Share of responses by client/channel — Apple Mail, Gmail (AMP), and Web. Helps you see where your audience actually engages. | ## Funnel Analytics How users move through the form, page by page and question by question. Available under the **Funnel Analytics** tab in the sidebar. | Chart | What it shows | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | **Page Funnel** | Completed vs. dropped-off counts at each page. Look for the biggest step-down between pages to spot optimization opportunities. | | **Question Completion Rate** | Shows percentage and count of users who answered each question. Use this to gain insights on multiple choice questions. | | **Avg. Questions Answered** | Average number of questions answered per session, with answered vs. skipped split. A quick read on overall engagement depth. | ## Per-Question Breakdown Below the overview, each question in the form gets its own section. The sidebar lists them with response counts; clicking jumps to the corresponding block. For each question you'll see: * **Question text** and response count * **Completion rate** for that question * **Question type** badge (e.g. `Multiple Choice`, `Text Input`, `NPS`) * A visual breakdown of responses * An **Option / Count / Percentage** table for choice-based questions This is where you go to understand *what* people are actually answering versus the overview, which tells you *how many* are answering. ## Exporting & Syncing * **Refresh Results** — pulls the latest data without reloading the page. * **Export Results** — downloads submissions as CSV for analysis in spreadsheets or BI tools. * **Resync All to Klaviyo** — pushes all submission data to Klaviyo profiles again. # Branding Source: https://docs.usekinetic.com/form-builder/settings/branding Set colors and button styles that apply across email and website forms. Found under **Settings → Branding** in the form builder. These settings apply to both email (AMP/Apple Mail) and website embeds. ## Colors | Setting | Purpose | | ------------------- | -------------------------------------------------------------------------- | | **Primary Color** | Used for selected answer highlights, progress bar fill, and active states. | | **Secondary Color** | Used for secondary UI elements and hover states. | Choose a primary color that has enough contrast against white backgrounds — it's used for small UI elements like radio indicators and progress bars. ## Button Styling Controls the appearance of **Next**, **Submit**, and **CTA** buttons across all channels. | Setting | Description | | ----------------- | --------------------------------- | | **Background** | Button background color | | **Text Color** | Button text color | | **Padding** | Inner spacing (CSS padding value) | | **Border Radius** | Corner rounding | A live **Sample Button** preview updates as you change these values. Button styles also apply to the welcome screen CTA button and product recommendation "View Product" buttons. # Email Advanced Source: https://docs.usekinetic.com/form-builder/settings/email-advanced Apple Mail specific settings and email rendering options. Found under **Settings → Advanced** in the **Email** section. ## Fluid Mode | Setting | Description | | -------------- | ------------------------------------------------------------------------------------------------------------------------ | | **Fluid Mode** | Auto-advance on single-choice pages when an answer option is selected. Multi-question pages still require clicking Next. | Fluid Mode creates a smoother, faster experience in email while still collecting partial responses. Removing the friction of an extra button click can lead to more data points collected. ## Keep Form in Email | Setting | Description | | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Keep Form in Email** | Keep the form visible after submission in Apple Mail. When disabled, the user will no longer see the form after they submit. | | **Show Product Results in Email** | Display product recommendations directly in Apple Mail. When disabled, the user will be redirected to a landing page displaying their product recommendations. | **Constraints:** * Not available for forms with text input fields (automatically disabled) * The last page of your form must have exactly 1 question ## Conditional Visibility Conditionally hide the form in Klaviyo emails based on a recipient's profile property. When enabled, the form is only shown to recipients who meet the specified condition. | Setting | Description | | -------------------------- | -------------------------------------------------------------------------------------- | | **Conditional Visibility** | Enable or disable conditional visibility for this form | | **Property name** | The Klaviyo profile property to check (e.g. `skin_type`) | | **Condition** | When the form should be shown: `is empty`, `has a value`, or `equals` a specific value | | **Value** | The expected value (only shown when condition is set to `equals`) | Use this to prevent showing a form to users who have already provided the data you're collecting. For example, hide a skin type quiz for customers who already have `skin_type` set on their Klaviyo profile. # Email Layout Source: https://docs.usekinetic.com/form-builder/settings/email-layout Configure how the form looks inside email clients. Found under **Settings → Layout** in the **Email** section. Controls the form container, display options, and first-page design. ## Form Container | Setting | Description | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Card Layout** | Wraps the form in a card so it stands out from the surrounding email body. Turn off for a flush, inline look that blends with the email background. | | **Background** | Card background color. Use a light tint to draw attention, or match your email background for a more subtle treatment. | | **Border Radius** | Corner rounding of the card. Higher values feel softer and more modern; `0` gives sharp, editorial corners. Only applies when Card Layout is on. | | **Padding** | Inner spacing between the card edge and the form content. Larger values give the form room to breathe; smaller values are more compact. Only applies when Card Layout is on. | | **Interactivity Indicator** | Shows a subtle tap animation on the first question so recipients realise the email is interactive — useful since most email content is static and customers may not expect to engage. | # Email Redirect Source: https://docs.usekinetic.com/form-builder/settings/email-redirect Configure where the email fallback link sends visitors. Found under **Settings → Email Redirect** in the **Email** section. ## What is the Email Redirect? When a subscriber's email client doesn't support AMP or Apple Mail interactivity, they see a **fallback** version of the form with a button that links to a web page where they can complete the form. By default, this links to the **Kinetic-hosted webform** (`/forms/{formId}`). You can change this to your own website URL if you have the embed script installed. ## Custom Redirect URL You can point this at any page on your store — even one that doesn't have a form embed on it. The redirect itself will work regardless. To keep user identification, tracking, and Klaviyo sync intact when the subscriber lands on the redirect page, make sure the **Global** Kinetic script is present in your Shopify theme's `theme.liquid`. With the global script in place, Kinetic can recognise the subscriber from the redirect URL parameters and continue the session seamlessly. See [Website Embed](/form-builder/embed/website) for how to install the global script. If you're redirecting to a page where you want the form itself to auto-open (not just identify the user), that page also needs the form embed installed. ## How It Works 1. Subscriber opens email in an unsupported client (e.g., Outlook) 2. They see a static preview of the first question 3. Clicking the button opens your redirect URL with `?kf_form={formId}` appended 4. The embed script detects this parameter 5. If the subscriber was identified via email, their email is pre-filled # Variables & Hidden Fields Source: https://docs.usekinetic.com/form-builder/settings/hidden-fields Capture background data and perform calculations without visible form fields. Found under **Settings → Variables & Hidden Fields** in the form builder. ## Hidden Fields Hidden fields capture data invisibly and optionally sync it to Klaviyo profiles. They are not shown to the user but are included in the form submission data. ### Source Types | Source | Description | Example | | ----------------- | ------------------------------------------- | -------------------------------------- | | **Klaviyo** | Pull from the recipient's Klaviyo profile | First name, city, custom properties | | **URL parameter** | Capture a value from the page URL | `?utm_source=email` → captures `email` | | **Static** | A fixed value submitted with every response | Always submits `"campaign_2025"` | ### Presets Common Klaviyo profile fields are available as one-click presets: * First Name, Last Name, Email, Phone Number, City, Country, Region ### Configuration Options | Option | Description | | ------------------------ | -------------------------------------------------------------------------------------------------------------- | | **Key** | The field name used in the submission data | | **Source type** | Where the value comes from (Klaviyo, URL parameter, or static) | | **Value** | The source value — a Klaviyo Liquid variable, URL param name, or static string | | **Sync to profile** | When enabled, pushes the value back to the Klaviyo profile on submission | | **Klaviyo property key** | Custom property name when syncing to Klaviyo (e.g. capture as `utm_source` but store as `acquisition_channel`) | | **Prefix / Suffix** | Prepend or append text to the captured value | | **Fallback** | Default value if the source is empty | ### Using Hidden Fields in the Form Hidden field values can be used as merge tags inside the form itself. Use `{{hidden:key}}` in field labels, welcome headlines, or intro text to personalize the form with the captured value. For example, if you have a hidden field with key `first_name` sourced from Klaviyo, you can write a welcome headline like: > Hi `{{hidden:first_name}}`, we have a few questions for you! The placeholder is replaced at runtime with the actual value. If the value is empty, the fallback is used (or the placeholder is removed). Hidden fields are useful for tracking attribution (UTM parameters), personalizing the form experience (e.g. greeting users by name), or enriching Klaviyo profiles with data from other sources. ## Variables Variables are numeric values that can be used for scoring and calculations across form pages. They work together with the [Logic Builder](/form-builder/logic) to create scored quizzes and assessments. | Option | Description | | ----------------- | -------------------------------- | | **Name** | The variable name (e.g. `score`) | | **Initial value** | The starting value (default: 0) | Variables are manipulated by the Logic Builder's Scoring and Branching tabs — answer options can add, subtract, or set variable values. The final variable value can determine which end screen is shown. # Integrations Source: https://docs.usekinetic.com/form-builder/settings/integrations Configure Klaviyo sync behavior for email forms. Found under **Settings → Integrations** in the form builder. ## Klaviyo ### Update Klaviyo Profiles When enabled, form responses are saved to Klaviyo profile properties. Each field's answer is stored under the Klaviyo property name configured in the field settings. | Setting | Description | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | **Update Klaviyo Profiles** | Save form responses to Klaviyo profile properties | | **Multi-Choice Value Format** | How multiple selections are stored in Klaviyo. Options: `Comma-separated` or `Array`. Only visible when Update Klaviyo Profiles is enabled. | # Language Source: https://docs.usekinetic.com/form-builder/settings/language Set the form language for button labels and validation messages. # Language Found under **Settings → Language** in the form builder. ## Locale Selection Choose the language used for all auto-generated UI text: * **Button labels**: Next, Previous, Submit * **Validation messages**: "This field is required", "Please enter a valid email" * **Navigation text**: Page numbers, progress indicators * **End screen defaults**: "Thank you!" and success messages ### Supported Languages | Code | Language | | ---- | ---------- | | `en` | English | | `de` | Deutsch | | `fr` | Français | | `es` | Español | | `it` | Italiano | | `pt` | Português | | `nl` | Nederlands | | `sv` | Svenska | | `da` | Dansk | | `no` | Norsk | | `pl` | Polski | Custom button labels (set in end screen configuration) override the language defaults. The locale only affects auto-generated text. ## Need another language? If you need a language that isn't listed above, reach out to [support@usekinetic.com](mailto:support@usekinetic.com). # Product Quiz Source: https://docs.usekinetic.com/form-builder/settings/product-quiz Configure product recommendation behavior and display settings. # Product Quiz Found under **Settings → Product Quiz**. Only visible when the form type is set to **Product Recommendation**. ## Behavior | Setting | Description | | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Product Button Action** | Controls where the product CTA sends users. `View Product Page` is best for considered purchases where customers want more detail. `Cart` adds the product directly and is useful for replenishment-style quizzes. `Checkout` skips straight to purchase and works best for single-product flows where friction hurts conversion. | | **Show Price Range** | When a recommended product has multiple variants at different prices (e.g. sizes or subscription terms), this shows the min–max range instead of a single price. Turn off if all variants are priced the same or if you want to highlight a single starting price. | | **Push to Klaviyo Profile** | Writes the recommended product IDs back to the Klaviyo profile so you can segment on quiz results or trigger flows (e.g. abandoned-quiz reminders, recommendation follow-ups). Required if you want to personalise downstream emails based on quiz outcomes. | ## Display Product grid layout in Gmail (AMP). Apple Mail and the HTML fallback use their own fixed layouts. | Setting | Description | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Desktop Columns** | How recommendations are arranged on desktop Gmail. `1 Horizontal` gives each product the most space and works well for a hero recommendation. `2 columns` is the most common choice. `3 columns` fits more products above the fold but leaves less room for images and copy. | | **Mobile Columns** | Mobile layout for Gmail. `1 Horizontal` stacks products vertically and tends to convert better on small screens. `2 columns` is more compact but can make images and CTAs feel cramped. | ## Endscreen Maximum number of products shown after submission, set per channel. Lower limits keep the email lighter and faster to render; higher limits give customers more to choose from. | Setting | Description | | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Gmail** | Cap for the AMP product grid. Gmail handles richer layouts well, so most setups use 3–6 here. | | **Apple Mail** | Cap for the CSS-based display. Apple Mail clients vary in how much content they render cleanly — keep this lower (often 1–3) to avoid layout issues. | | **Fallback** | Cap for the static HTML fallback shown in clients that don't support AMP or advanced CSS. Keep this small (1–3) since the fallback is the least flexible layout. | | **Fallback Collection** | The collection used when none of the pinned products match a submission — for example, if a customer's answers don't line up with any tagged product. Leave blank to show no recommendations rather than a generic set. | # Targeting Source: https://docs.usekinetic.com/form-builder/settings/targeting Control who sees your form based on device, URL, location, UTM parameters, and cart contents. Found under **Settings → Targeting** in the **Website** section. All rules are evaluated before the form is shown. ## Devices | Option | Description | | ---------------- | -------------------------- | | **All devices** | Show on desktop and mobile | | **Desktop only** | Hide on screens ≤768px | | **Mobile only** | Hide on screens >768px | ## URL Rules | Setting | Description | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | **Only show on certain URLs** | When enabled, add URL patterns — the form only shows on matching pages. Uses `*` as wildcard. Match types: `contains`, `starts with`, or `exactly`. | | **Don't show on certain URLs** | When enabled, add URL patterns — the form is hidden on matching pages. | ``` /collections/* → All collection pages /products/hat-* → Products starting with "hat-" /cart → Cart page ``` ## Email Traffic | Setting | Description | | ------------------------------------ | ------------------------------------------------------------------------------------------------------- | | **Only show to visitors from email** | Form only appears when opened via a fallback link in an email (detected via `?kf_form=` URL parameter). | ## UTM Parameters | Setting | Description | | -------------------------------- | ------------------------------------------------------------------------------------------------ | | **Show based on UTM parameters** | When enabled, add parameter/value pairs — **all must match** (AND logic). Supports `*` wildcard. | ``` utm_source = klaviyo → Only Klaviyo traffic utm_campaign = summer → Summer campaign traffic ``` ## Location Uses Shopify's detected visitor country. | Setting | Description | | ----------------------------------------------- | -------------------------- | | **Show to visitors in certain countries** | Toggle + country selector. | | **Don't show to visitors in certain countries** | Toggle + country selector. | ## Cart Contents (Shopify) | Setting | Description | | ---------------------------------- | -------------------------------------------------- | | **Show based on total cart value** | When enabled, set Min and Max cart value. | | **Show based on number of items** | When enabled, set Min and Max item count. | | **Show based on product type** | When enabled, enter types as comma-separated list. | Cart targeting requires Shopify and uses the `/cart.js` API. # Trigger Source: https://docs.usekinetic.com/form-builder/settings/trigger Configure when and how the form opens on your website. Found under **Settings → Trigger** in the **Website** section. For **Inline** display mode, the form renders immediately — no trigger settings apply. Switch to Popup, Slider, Popover, or Side Tab in [Website Layout](/form-builder/settings/website-layout) for these options. ## Auto-Open | Setting | Description | | ---------------------------------- | ----------------------------------------------------------------------------------- | | **Auto-open** | Automatically open the form | | **Delay** (optional) | Seconds to wait before opening. Only visible when Auto-open is enabled. | | **Suppress for X days** (optional) | Days to suppress auto-open after dismissal. Only visible when Auto-open is enabled. | ## Custom Trigger Element Make any element on your page open the form instead of the built-in trigger button. Enter a **CSS selector**: ``` .my-quiz-button → Class selector #start-quiz → ID selector [data-quiz-trigger] → Data attribute ``` Works with dynamically loaded elements — Kinetic watches for matching elements for up to 30 seconds. ## Post-Submission Behavior | Setting | Description | | ------------------------------ | -------------------------------------------------------- | | **Hide form after submission** | Never show the form again after the visitor completes it | # Website Layout Source: https://docs.usekinetic.com/form-builder/settings/website-layout Configure how the form appears when embedded on a website. Found under **Settings → Layout** in the **Website** section. ## Display & Style Choose how the form appears on your site: | Mode | Description | | ------------ | ---------------------------------------------------------------------- | | **Inline** | Embeds directly into the page body — always visible, no trigger needed | | **Popup** | Centered modal with a dimmed backdrop | | **Slider** | Slides in as a panel from the side | | **Popover** | Floating card in the corner with a chat-style bubble | | **Side Tab** | Fixed tab on the page edge that slides out when clicked | ### Mode-Specific Settings | Setting | Applies to | Description | | ------------------- | ----------------- | ------------------------------------- | | **Size** | Popup | `Standard` or `Fullscreen` | | **Padding** | All | Space between form and container edge | | **Inset** | Fullscreen popup | Gap between popup edge and viewport | | **Position** | Popover, Side Tab | `Left` or `Right` side | | **Overlay Color** | Popup, Slider | Background overlay color | | **Overlay Opacity** | Popup, Slider | Overlay transparency (0-100%) | ### Trigger Button For popup, slider, popover, and side tab modes: | Setting | Description | | ---------------- | ----------------------------------------------------- | | **Button Label** | Text on the trigger button (default: "Take the Quiz") | ## First Page Configuration | Setting | Options | Description | | ----------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------- | | **Mode** | `First question` / `Welcome screen` | What visitors see first. Use Welcome Screen to provide more context or show an introductory text. | | **Image** | `None` / `Left` / `Right` | Optional hero image. | | **Alignment** | `Left` / `Center` / `Right` | Text alignment. | | **Image on** | `First page only` / `All pages` | Display image on the first screen or across all form pages. | | **Minimal style** | On/Off | Hide progress bar, page number, and OK button on page 1. | ### Welcome Screen (when Mode = Welcome screen) | Setting | Description | | --------------------- | ----------------------------- | | **Headline** | Large heading text | | **Description** | Paragraph below the headline | | **CTA Label** | Button text to start the form | | **Social Proof Pill** | Badge above the headline | ## Form Controls | Setting | Description | | ------------------- | ------------------------ | | **Progress Bar** | Show completion progress | | **Question Number** | Show "Question X of Y" | ## Picture Choice Settings | Setting | Description | | ------------------- | -------------------- | | **Columns** | Image grid columns | | **Max Image Width** | Constrain image size | # Used In Source: https://docs.usekinetic.com/form-builder/used-in Track which email templates use this form. The **Used In** tab shows every email template where this form is currently embedded. This helps you: * Track form usage across campaigns and flows * Know which templates need updating after form changes * Avoid accidentally deleting forms that are in active use ## What It Shows Each entry displays: * **Template name** — the Kinetic email template Click a template name to open it in the email builder. This only tracks usage in Kinetic email templates. Forms embedded via HTML snippets or website embeds are not shown here. # Get Whitelisted Source: https://docs.usekinetic.com/getting-started/amp-whitelisting Whitelist your sender domain for AMP to enable interactive emails in Gmail. To enable interactivity, Kinetic combines multiple MIME types within a single email. One of these is **AMP**. To ensure your interactive content displays correctly for Gmail users, your sender domain must be whitelisted by Google. *** ## Choose Your Path There are two ways to handle the whitelisting process. We recommend letting our team handle the heavy lifting for you. ### Option 1: Kinetic Handles It (Recommended) This is the fastest and most reliable way to get approved. 1. **Invite our team:** Add `support@usekinetic.com` as a **Manager** to your Klaviyo account. 2. **Ping us:** Send a quick message to our support team or your account manager via slack or email. 3. **Wait for approval:** Google typically takes around **10 business days** to accept new submissions. We will notify you as soon as your domain is whitelisted. ### Option 2: Manual Whitelisting If you prefer to manage the request yourself, follow Google's standard procedure: 1. **Send an Example:** You must send a real, dynamic email to Google's whitelisting address `ampforemail.whitelisting@gmail.com` for review. The email must be production ready (not a test email) and include an AMP mime type. 2. **Submit the Request:** Fill out [Google's AMP Sender Registration form](https://docs.google.com/forms/d/e/1FAIpQLSdso95e7UDLk_R-bnpzsAmuUMDQEMUgTErcfGGItBDkghHU2A/viewform). 3. **Wait for Review:** Google generally takes **10 working days** to process requests. Read more about AMP whitelisting on the [official website](https://amp.dev/documentation/guides-and-tutorials/start/email_sender_distribution). *** ## Testing Before You Are Whitelisted You don't have to wait for the whitelisting process to finish to start testing your interactive forms. You can enable interactive previews for specific internal accounts immediately. ### 1. Individual Account Settings You can view interactive emails in your personal Gmail account before the domain is globally whitelisted: * Add your sender address to the "Always allow dynamic emails from this sender" setting in your individual Gmail account. * Now emails sent from this specific email address will render AMP in your inbox. Note: this will only effect the inbox where this setting was implemented and should only be used for testing purposes. You must remove this address from your settings once your whitelisting request has been accepted to varify if your account whitelisting has indeed taken effect. Gmail AMP Settings Demo ### 2. Workspace Admin Settings If you are using Google Workspace (formerly GSuite), ensure your Workspace Admin has enabled **Dynamic Email** for the organization. If this setting is disabled at the admin level, whitelisting will not have any effect. *** ## Understanding Display Levels Whether or not a user sees the interactive version of your email depends on the following logic: If the user or admin has disabled dynamic email, they will see the **Static Fallback** version, regardless of whitelisting status. Interactive content is displayed **for everyone** using the gmail client. The interactive version is **hidden by default**. Users see the static fallback unless they have manually added your sender address to their individual account settings. Adding a specific sender to your individual Gmail settings allows you to test the interactive version before the 10-day whitelisting period is over. **Don't wait to start building!** You can build forms, import Klaviyo templates, and send test emails in Kinetic while your whitelisting is under review. Everything you create now will automatically become interactive for your entire audience once the whitelist is active. # Apple mail interactivity Source: https://docs.usekinetic.com/getting-started/apple-mail Most marketers have heard of AMP for Email, but that's only part of the story. At Kinetic, we blend multiple techniques to make interactive emails work in as many inboxes as possible. ## Overview Most marketers have heard of AMP for Email, but that's only part of the story. At Kinetic, we blend **multiple techniques** to make interactive emails work in as many inboxes as possible. One of the most powerful? **Interactive HTML/CSS**, which brings dynamic, interactive experiences to **Apple Mail**. ## **What Apple Mail interactivity can do** Just like AMP, our HTML/CSS-based interactivity in Apple Mail supports: * **In-email actions:** such as button clicks that trigger API calls * **Live content updates:** update content in the email based on user actions * **CSS animations** These interactions feel just as seamless as AMP-powered ones and often look even better in Apple Mail's rendering engine. ## **Why this matters** AMP alone won't cut it if you're aiming for maximum reach. Globally, **Apple Mail accounts for \~51.5%** of email opens—more than Gmail and Yahoo combined. That means Apple-compatible interactivity isn't optional, it's **essential**. Kinetic automatically detects and serves the right version of your email based on the user's inbox provider, so Apple Mail users always get the best version possible. # Integrations Source: https://docs.usekinetic.com/getting-started/connect-klaviyo-shopify Connect your Klaviyo and Shopify accounts to unlock Kinetic's full potential You can try out Kinetic without connecting your Klaviyo or Shopify account. However, to import and export email templates you will need to connect your Klaviyo account. To automatically pull product information for product recommendations, you will need to connect your Shopify store. ## Accessing Integrations 1. Once logged into Kinetic, head to the top right and click on the circle with your initials 2. Select **"Integrations"** from the dropdown list 3. Here you will see two sections to connect your Klaviyo and Shopify accounts ## Connecting Klaviyo Connect your Klaviyo account to import/export your email templates. ### Steps to Connect 1. Click the **"Connect Account"** button in the Klaviyo section 2. You will be redirected to Klaviyo where you will see a list of your accounts 3. Select the account you would like to connect to your Kinetic workspace 4. Click **"Allow"** to grant permissions This connection allows Kinetic to: * Import and export email templates * Handle AMP whitelisting * Sync analytics and form responses * Manage profile properties for your forms ## Connecting Shopify Connect your Shopify store to automatically pull product information for product recommendation quizzes. ### Steps to Connect 1. Click **"Enable Shopify Connection"** in the Shopify section 2. Enter your Shopify Store ID * Find your ID by logging into your Shopify dashboard * Copy the last part of the URL in your browser: `https://admin.shopify.com/store/YOUR-SHOPIFY-ID` 3. Click **"Submit"** Once submitted, a custom Shopify app will be created for your store. When finished, you will receive a link to install the app to finalize your connection. Please allow up to 24 hours for this process. ## Disconnecting Accounts To disconnect an integration: 1. Navigate to the Integrations page 2. Find the connected account 3. Click the disconnect or remove option # Welcome to Kinetic Source: https://docs.usekinetic.com/getting-started/index Turn static emails into dynamic conversations with interactive forms, quizzes, and surveys. # Welcome to Kinetic Kinetic is an interactive email platform that transforms static Klaviyo email templates into engaging, interactive experiences — powered by AMP for Gmail and advanced CSS for Apple Mail. ## What can you build? * **Interactive forms** in emails — surveys, quizzes, NPS scores, and more * **Product recommendation quizzes** that display personalized results * **Website embeds** — popup, slider, inline, and popover forms * **Countdown timers** for urgency-driven campaigns ## Quick links Connect Klaviyo and Shopify to get started. Create an interactive form in minutes. Import a Klaviyo template and add interactivity. Deploy forms on your Shopify store. # Interactive emails 101 Source: https://docs.usekinetic.com/getting-started/interactive-emails-101 Not every inbox plays nice with interactive emails. While Kinetic is built to work across the widest range of inbox providers possible, a few still default to static-only rendering. That's why every Kinetic email includes both an **interactive version** and a **static fallback**. We handle which one shows up automatically, so you can confidently send to your entire list without segmenting or worrying about compatibility. This guide explains how these two layers work, where they render best, and how you can preview them. ### **Domain vs. Inbox Provider** Which version a user sees depends on their **inbox provider**, not their email domain. For example, someone with an **@gmail.com** address might be using Apple Mail on their iPhone, which means they'll see the Apple-compatible interactive version, not the AMP one. ## The Two Versions of a Kinetic Email Each email you build in Kinetic includes: 1. **Interactive Version:** renders for inboxes that support advanced HTML/CSS or AMP. 2. **Fallback Version:** a static version shown when interactivity isn't supported. Technically, there are three rendering technologies (AMP, interactive HTML/CSS, and classic HTML/CSS), but for the sake of simplicity, we will group AMP and interactive HTML/CSS together as the **interactive version**. ### Interactive Version The interactive version lets customers click, scroll, select, or shop *right inside* the email. It's powered by: * **AMP for Email:** used in Gmail, Yahoo, and others that support AMP. * **Interactive HTML/CSS:** used in Apple Mail and some others that allow advanced styling and input elements. While the underlying tech differs, the user experience is nearly identical: interactive, responsive, and seamless. ### Fallback Version If a customer opens your email in an inbox that doesn't support interactivity, they'll see a fallback version. This is the static email you originally built before importing it into Kinetic. It looks and functions like a traditional marketing email, no bells and whistles, just clean and readable content. ## **Inbox Compatibility** For most D2C brands, roughly **80%+** of recipients will see the interactive version. Here's the current breakdown (globally - [Source](https://www.litmus.com/email-client-market-share)): * **Apple Mail**: \~51.5% * **Gmail & Yahoo (AMP)**: \~29% * **Other (Outlook, Hotmail, etc.)**: \~19% Kinetic handles this logic in the background, making sure every consumer sees the best version for the respectively used inbox provider. ### **Device Support** Kinetic emails are fully responsive and work on both desktop and mobile. The version that renders isn't based on the device, it depends entirely on the **inbox app** the user is using to open the email. If the inbox doesn't support interactivity, the fallback version appears automatically. # Setting up your Kinetic account Source: https://docs.usekinetic.com/getting-started/set-up-account Before you begin building your interactive templates, make sure your account is fully up to date to avoid any road blocks. These steps shouldn't take more than a few minutes. ## Connect Klaviyo and Shopify Connect your Klaviyo and Shopify accounts to Kinetic. ## Get Whitelisted We make it easy for you to whitelist your domain with Gmail. # What is AMP? Source: https://docs.usekinetic.com/getting-started/what-is-amp Most emails are just static content: images, text, and links. AMP (Accelerated Mobile Pages) changes that. ## The Basics Most emails are just static content: images, text, and links. AMP (Accelerated Mobile Pages) changes that. AMP is an open-source framework that lets you add **real interactivity** inside emails, think carousels, dropdowns, add-to-cart buttons, and dynamic updates. It's supported by **Gmail**, **Yahoo**, and a handful of other smaller providers. Normally, using AMP requires developer work. But with Kinetic, all the heavy lifting is already done. Our pre-built, no-code widgets let you add AMP-powered elements without touching code. ### Inbox Compatibility You can send an AMP email to anyone, but **only Gmail, Yahoo, and select others** will actually render it interactively. Everyone else will see a static fallback version (which Kinetic generates automatically for you). ## How Kinetic Uses AMP (and More) AMP is just one part of the interactivity puzzle. Kinetic also uses **advanced HTML/CSS techniques** to render interactive emails in inboxes like **Apple Mail**. By combining AMP and HTML/CSS methods, **over 80% of recipients** will get a fully interactive email experience, without you needing to worry about who sees what. ### What AMP Can Do AMP includes a library of built-in components you can use right inside an email, such as: * Image carousels * Accordions * Lightboxes * Multi-step selectors * And more ([view full AMP components list](https://amp.dev/documentation/components/?format=email)) Kinetic turns these into drag-and-drop widgets, customized for e-commerce. No devs required. From interactive product highlights, to upsells and in-email forms and reviews, AMP gives your emails superpowers. ### Limitations of AMP AMP isn't perfect. Here's what you should know: * **Inbox support is limited:** Only Gmail, Yahoo, and a few others support AMP today. * **No inline styles:** AMP requires all styles to be declared in the header using AMP-specific tags. * **Email size restrictions:** AMP emails must stay under size limits defined by inbox providers (usually 200 KB). Kinetic checks this automatically & compresses your emails as much as possible. # Privacy & GDPR Source: https://docs.usekinetic.com/privacy/overview How Kinetic stores and secures your data, plus copy-ready privacy policy snippets you can drop into your own site. This page explains how Kinetic handles, stores, and secures the data you and your subscribers generate, and provides ready-to-paste privacy-policy language you can add to your own site. *** ## Where is data stored? All data is hosted on infrastructure located within the **European Union**. Kinetic's sub-processors are: * **Supabase** — database hosting * **Google Cloud Platform** — application hosting * **PostHog** — product analytics No personal data is transferred outside the EU as part of Kinetic's standard processing. *** ## How is data secured? Kinetic applies industry-standard security measures, including: * **AES-256 encryption at rest** for all sensitive credentials and integration tokens * **OAuth 2.0** for secure authentication with third-party integrations (e.g., your email service provider, ecommerce platform) * Access controls and audit logging on internal systems *** ## What data does Kinetic store? On your behalf, Kinetic may process: * **Account info** — names, email addresses, and workspace details * **Email templates, on-site form configurations, and quiz logic** you create in Kinetic * **Form, quiz, and survey submissions** collected from your subscribers and website visitors (both inside emails and on your website) * **Behavioral and engagement data** — interactions with Kinetic-powered forms, clicks, completions * **Encrypted access tokens** for connected integrations *** ## GDPR Consent Mode When you activate Kinetic's **GDPR Consent Mode**, Kinetic uses your store's existing consent mechanism (typically your cookie or consent banner) to identify visitors and subscribers. * **No tracking or identification** happens before the visitor gives valid consent. * Once consent is collected, Kinetic can personalize content, link form responses to a known profile, and run product recommendations. We recommend enabling GDPR Consent Mode for any brand operating in the EU/EEA or the UK, or anywhere consent-based tracking is required. *** ## What to add to your privacy policy You should reference Kinetic as a data processor / service provider in your own privacy policy. We've prepared two ready-to-paste snippets below — pick the one that matches your audience and replace the bracketed placeholders before publishing. For customers operating in the **EU/EEA, UK**, or anywhere GDPR-style language applies. ```text theme={null} Kinetic (Data Processor) We use Kinetic, a product of Kinetic Software GmbH, to power interactive experiences in our marketing emails and on our website, including personalized email content, embedded forms, quizzes, surveys, and product recommendations. Kinetic acts as a data processor on our behalf in accordance with Article 28 GDPR. Provider details Kinetic Software GmbH Kolonnenstraße 8, 10827 Berlin, Germany Website: https://usekinetic.com Contact: support@usekinetic.com What data Kinetic processes On our behalf, Kinetic may process the following categories of data: • Account information (e.g., names, email addresses) • Email templates, on-site form configurations, and quiz logic we create • Form, quiz, and survey submissions collected from our subscribers and website visitors (both inside emails and on our website) • Behavioral and engagement data (e.g., interactions with Kinetic-powered forms, clicks, completions) • Encrypted access tokens for connected integrations (e.g., our email service provider, ecommerce platform) Where the data is stored All data processed by Kinetic is hosted on infrastructure located within the European Union. Kinetic relies on EU-based sub-processors, including Supabase (database hosting), Google Cloud Platform (application hosting), and PostHog (product analytics). No personal data is transferred outside the EU as part of Kinetic's standard processing. How the data is secured Kinetic applies industry-standard security measures, including: • AES-256 encryption at rest for all sensitive credentials and integration tokens • OAuth 2.0 for secure authentication with third-party platforms • Access controls and audit logging on internal systems Consent and user identification We have enabled Kinetic's GDPR Consent Mode. This means Kinetic only identifies a visitor or subscriber, on our website or inside our emails, after they have given valid consent through our website's cookie or consent banner. No tracking, identification, or personalization takes place before that consent is collected. Your rights You can exercise your GDPR rights (access, rectification, erasure, restriction, portability, objection) by contacting us at [YOUR CONTACT EMAIL]. Requests that concern data held within Kinetic's systems will be forwarded to Kinetic, and we will respond within the statutory timeframes. For specific questions about Kinetic's processing activities, you can also contact Kinetic directly at support@usekinetic.com. ``` For customers who do not need GDPR-specific language (e.g., **US-only brands**, or brands that handle GDPR disclosures in a separate section). ```text theme={null} Kinetic (Service Provider) We use Kinetic, a product of Kinetic Software GmbH, to power interactive experiences in our marketing emails and on our website, including personalized email content, embedded forms, quizzes, surveys, and product recommendations. Kinetic processes data on our behalf as a service provider. Provider details Kinetic Software GmbH Kolonnenstraße 8, 10827 Berlin, Germany Website: https://usekinetic.com Contact: support@usekinetic.com What data Kinetic processes On our behalf, Kinetic may process the following categories of data: • Account information (e.g., names, email addresses) • Email templates, on-site form configurations, and quiz logic we create • Form, quiz, and survey submissions collected from our subscribers and website visitors (both inside emails and on our website) • Behavioral and engagement data (e.g., interactions with Kinetic-powered forms, clicks, completions) • Encrypted access tokens for connected integrations (e.g., our email service provider, ecommerce platform) Where the data is stored All data processed by Kinetic is hosted on infrastructure located within the European Union. Kinetic's sub-processors include Supabase (database hosting), Google Cloud Platform (application hosting), and PostHog (product analytics), each operating in EU regions. How the data is secured Kinetic applies industry-standard security measures, including: • AES-256 encryption at rest for all sensitive credentials and integration tokens • OAuth 2.0 for secure authentication with third-party platforms • Access controls and audit logging on internal systems Your choices You can request access to, correction of, or deletion of personal information we have collected about you by contacting us at [YOUR CONTACT EMAIL]. Requests that concern data held within Kinetic's systems will be forwarded to Kinetic. For specific questions about Kinetic's processing activities, you can also contact Kinetic directly at support@usekinetic.com. ``` Replace `[YOUR CONTACT EMAIL]` with your own privacy or support contact before publishing. *** ## Questions? For any specific questions about Kinetic's processing activities, sub-processors, or data-protection measures, contact us at [support@usekinetic.com](mailto:support@usekinetic.com). # Account Source: https://docs.usekinetic.com/settings/account Manage your profile, workspace branding, and store URL. # Account Found under **Settings → Account**. ## Company Logo Upload a logo for your workspace. This appears in the sidebar and workspace switcher. * Click the logo area to upload an image * Supported formats: JPEG, PNG, WebP * The logo is displayed in the sidebar next to your workspace name ## Company Name Your workspace display name. Visible in the sidebar and team invitations. ## Store URL Your Shopify store URL (e.g., `https://yourstore.myshopify.com`). Used for: * Product data fetching in product recommendation quizzes * Cart targeting in website embeds * Store detection for AI form generation Changing the store URL may affect existing product recommendation forms that reference products from the previous store. ## Onboarding Widget The "Get started" checklist in the bottom-right corner tracks your setup progress. You can dismiss it from this page once you've completed the initial setup steps. # Advanced Source: https://docs.usekinetic.com/settings/advanced UTM tracking, email domain rules, GDPR compliance, export settings, and attribution. # Advanced Settings Found under **Settings → Advanced**. ## UTM Tracking Configure custom UTM parameters automatically appended to all links in your forms and emails. | Parameter | Description | | -------------- | --------------------------------- | | `utm_source` | Traffic source identifier | | `utm_medium` | Marketing medium | | `utm_campaign` | Campaign name | | `utm_term` | Paid search term | | `utm_content` | Content variant (for A/B testing) | Each parameter can be set to a static value or left empty to be auto-filled. ## Export Settings ### Export Only Mode When enabled, Kinetic only exports the rendered HTML without pushing to Klaviyo. Useful for workflows where you manage Klaviyo updates separately. ### Manual Export When enabled, templates are not automatically synced — you must manually trigger exports. ## Email Domain Rules ### Allowed Domains When enabled, only submissions from specified email domains are accepted. Enter domains as a comma-separated list (e.g., `gmail.com, outlook.com`). ### Excluded Domains Block submissions from specific email domains (e.g., disposable email providers). Enter domains as a comma-separated list. ## GDPR Compliance When enabled, the website embed operates in privacy-safe mode: * No persistent cookies without consent * No identity merge without marketing consent * No Klaviyo sync without marketing consent * Consent detected via Shopify Customer Privacy API or `KineticForms.setConsent()` Forms still work fully without consent — submissions are simply anonymous until consent is granted. ## Attribution Window Set how many days after a form submission the system looks for a Shopify purchase to attribute revenue. | Setting | Default | Description | | ---------------------- | ------- | ------------------------------------------ | | **Attribution Window** | 7 days | Days to look back for purchase attribution | ## Custom Store Setup Advanced Shopify configuration for stores with non-standard setups: ### Product Metafields Define custom metafield namespaces and keys for product variant data that Kinetic should read when fetching products. ### Attribute Metafields Define custom metafield namespaces and keys for product attribute data. Most stores don't need custom metafield configuration. This is only needed if your store uses non-standard metafield structures for variant data. # Plans & Billing Source: https://docs.usekinetic.com/settings/billing Manage your subscription plan, submission limits, and payment. # Plans & Billing Found under **Settings → Plans & Billing**. ## Current Plan View your active subscription plan and its included monthly submission allowance. ## Submission Usage Your current submission count vs. your plan's monthly limit is shown in the sidebar widget ("Responses Collected X / Y"). The counter resets on your billing cycle date. ## Changing Plans Browse available plans and upgrade or downgrade. Changes take effect immediately for upgrades, or at the end of the current billing cycle for downgrades. ## Additional Responses If you need more submissions beyond your plan's limit, additional response packs can be added to your subscription. ## Manage Billing Click **Manage Billing** to open the Stripe billing portal where you can: * Update your payment method * View and download invoices * Cancel your subscription ## Agency Billing Agency accounts can have a billing parent company. Child workspaces inherit the parent's plan and submission limits. Submissions across all child workspaces count toward the parent's total. # Developer Source: https://docs.usekinetic.com/settings/developer Manage API keys and test the Kinetic API. # Developer Found under **Settings → Developer**. Available on paid plans only. ## API Keys Create API keys to access your form data programmatically. ### Creating a Key 1. Click **Create Key** 2. Give it a name (e.g., "Zapier integration") 3. Copy the key — **it's shown only once** The key format is `kntc_` followed by 40 random characters. Keys are stored as irreversible hashes — Kinetic cannot retrieve your key after creation. ### Revoking a Key Click the trash icon next to any active key. This immediately invalidates it — any integrations using it will stop working. ## API Playground Build and test API requests directly from the dashboard: 1. Select an **endpoint** (Submissions, Form Stats, List Forms) 2. Toggle **filters** (email, date range, form) 3. Click **Send Request** to see the response 4. Copy the generated **cURL / JavaScript / Python** code The playground uses your logged-in session — no API key needed for testing. The generated code includes your selected API key for copy-paste into your integrations. ## Learn More See the full [API Reference](/api) for endpoint documentation. # Workspace Settings Source: https://docs.usekinetic.com/settings/index Manage your Kinetic workspace — account, integrations, billing, and team. # Workspace Settings Access settings from the **account menu** (top-right avatar) → choose any settings option. ## Settings Tabs Profile, display name, and workspace info. Connect Klaviyo and Shopify. Subscription plan and payment. Invite members and manage roles. Switch between or create workspaces. UTM tracking, domain rules, GDPR. API keys and playground. # Integrations Source: https://docs.usekinetic.com/settings/integrations Connect Klaviyo and Shopify to power your interactive emails. # Integrations Found under **Settings → Integrations**. ## Klaviyo Connect your Klaviyo account to push email templates, sync form submissions as profile properties, and connect forms to Klaviyo flows. ### Connecting Click **Connect Klaviyo** to authorize via Klaviyo's OAuth flow. You'll be redirected to Klaviyo to grant access. ### Required Scopes The following scopes are requested during authorization: | Scope | Purpose | | ----------------------------------- | ------------------------------- | | `accounts:read` | Read account info | | `templates:read`, `templates:write` | Push email templates | | `campaigns:read`, `campaigns:write` | Campaign management | | `flows:read`, `flows:write` | Flow integration | | `profiles:read`, `profiles:write` | Sync form responses to profiles | | `lists:read`, `lists:write` | List management | | `metrics:read` | Read analytics metrics | | `events:read`, `events:write` | Track events | | `segments:read`, `segments:write` | Segment management | ## Shopify Connect your Shopify store to pull product data for product recommendation quizzes, enable cart-based targeting for website embeds, and use Shopify customer identity for form pre-fill. ### Connecting Click **Connect Shopify** and enter your Shopify store URL. You'll be redirected to Shopify to authorize the app. You need both Klaviyo and Shopify connected for the full feature set. Forms work without Shopify, but product quizzes and cart targeting require it. # Team Source: https://docs.usekinetic.com/settings/team Invite team members, assign roles, and manage workspace access. # Team Found under **Settings → Team**. ## Inviting Members 1. Enter the new member's **email address** 2. Select one or more **workspaces** to grant access to 3. For each workspace, choose a **role** 4. Click **Send Invite** The invitee receives an email with a link to join. Pending invitations are shown below the team list. ## Team Members View all members with: * **Name** and **email** * **Role** per workspace * **Workspace access** — which workspaces they can access ### Filtering * Filter by **workspace** to see who has access * Filter by **role** to find members with specific permissions ## Roles Roles control what a team member can do within a workspace. Each workspace assignment can have a different role. ## Removing Members Click the remove button next to a member to revoke their access to a specific workspace. This does not delete their account — they can still access other workspaces they've been invited to. Use the **Invite** button in the top-right corner of any page as a quick shortcut. # Workspaces Source: https://docs.usekinetic.com/settings/workspaces Manage multiple workspaces for different brands or clients. # Workspaces Found under **Settings → Workspaces**. ## What Are Workspaces? Workspaces are separate environments within Kinetic. Each workspace has its own: * Forms and email templates * Klaviyo and Shopify connections * Team members * Submission limits and billing ## Switching Workspaces Click the workspace name in the top-left sidebar to open the workspace switcher. Select a workspace to switch to it. ## Creating a Workspace 1. Go to **Settings → Workspaces** 2. Click **Create Workspace** 3. Enter a name for the new workspace ## Agency Workspaces Agencies can create client workspaces from the **Clients** page. Client workspaces are linked to the agency's billing parent for centralized subscription management.