> ## Documentation Index
> Fetch the complete documentation index at: https://formsplugin.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Klaviyo

> Connect Klaviyo with Framer Forms using the Forms Plugin to automatically add form submissions to your Klaviyo profiles.

# Connect Klaviyo with Framer Forms

Capture leads from your Framer forms and automatically add them to your Klaviyo profiles using the Forms Plugin.

***

## Step 1 - Get Your Klaviyo API Key

Before connecting Klaviyo to your form, generate an API key from your Klaviyo account. This API key allows the Forms Plugin to securely send form submissions to Klaviyo.

<Frame>
  <img src="https://mintcdn.com/formsplugin/nuH6w9HyT7O56VW4/images/screenshots/integrations/klaviyo/klaviyo-step1-api-key.png?fit=max&auto=format&n=nuH6w9HyT7O56VW4&q=85&s=25e9e114f703e803861d8baee376643d" alt="Klaviyo account showing the API Keys settings page" width="1950" height="1118" data-path="images/screenshots/integrations/klaviyo/klaviyo-step1-api-key.png" />
</Frame>

1. Login to your Klaviyo account
2. Navigate to **Settings** → **API Keys**
3. Click **Create Private API Key**
4. Copy the generated API key

<Tip>
  Keep your API key in a secure password manager. Never share it publicly or commit it to a code repository.
</Tip>

***

## Step 2 - Insert Klaviyo Component Into Your Form

Select your form in the Framer canvas and insert the Klaviyo component.

The component connects your form to Klaviyo and automatically detects the form fields in your form layout.

<Frame>
  <img src="https://mintcdn.com/formsplugin/nuH6w9HyT7O56VW4/images/screenshots/integrations/klaviyo/klaviyo-step2-insert-component.png?fit=max&auto=format&n=nuH6w9HyT7O56VW4&q=85&s=ba5d4b94e0d613c650d8b1a27dce92e1" alt="Forms Plugin panel in Framer showing the Klaviyo Integrations screen with the Insert Klaviyo Component button" width="1893" height="1320" data-path="images/screenshots/integrations/klaviyo/klaviyo-step2-insert-component.png" />
</Frame>

***

## Step 3 - Configure Klaviyo API Settings

After inserting the Klaviyo component, configure the API settings in the component properties panel.

<Frame>
  <img src="https://mintcdn.com/formsplugin/k8VmN6UTFugoE8yJ/images/screenshots/integrations/klaviyo/klaviyo-step3-api-settings.png?fit=max&auto=format&n=k8VmN6UTFugoE8yJ&q=85&s=db6750a04b6dc76662e5b6baf4f58f4f" alt="Framer canvas with Klaviyo component selected showing the API Settings modal" width="2575" height="2008" data-path="images/screenshots/integrations/klaviyo/klaviyo-step3-api-settings.png" />
</Frame>

1. Select the **Klaviyo Integration** component in your form
2. Open the properties panel on the right side
3. Paste your **Klaviyo API Key**
4. (Optional) Enter a **List ID** to automatically add submitted profiles to a specific Klaviyo list
5. Choose whether to **Update Existing** profiles if the email already exists in your Klaviyo account

### Required Fields

* **API Key** - Paste the Klaviyo Private API key (starts with `pk_...`) generated from your Klaviyo account.

### Optional Fields

* **List ID** - Enter a Klaviyo List ID (6 chars, e.g. `XaB1Cd`) to automatically subscribe submitted profiles to that list. Leave this empty to create profiles without list subscription.
* **Update Existing** - When set to **Yes**, existing profiles will be updated if the submitted email already exists in Klaviyo. Set to **No** to skip updates and only create new profiles.

<Tip>
  You can find your List ID in Klaviyo under **Audience** → **Lists & Segments**. Open the list you want to use and copy the List ID from the list settings page.
</Tip>

***

## Step 4 - Configure Field Mapping

Map your form fields to Klaviyo profile properties.

The component automatically detects your form field names. You simply connect each field to the correct Klaviyo property.

<Frame>
  <img src="https://mintcdn.com/formsplugin/nuH6w9HyT7O56VW4/images/screenshots/integrations/klaviyo/klaviyo-step4-field-mapping.png?fit=max&auto=format&n=nuH6w9HyT7O56VW4&q=85&s=a2151faf313e59985173ce135c51a99a" alt="Framer canvas showing the Mappings modal with form fields mapped to Klaviyo properties" width="1682" height="1311" data-path="images/screenshots/integrations/klaviyo/klaviyo-step4-field-mapping.png" />
</Frame>

### Example Mapping

| Form Field | Klaviyo Property |
| ---------- | ---------------- |
| email      | email            |
| firstname  | first\_name      |
| lastname   | last\_name       |

***

## Step 5 - Result

When a user submits the form, their details will automatically be added as a profile in Klaviyo. You can verify new profiles in your [Klaviyo Profiles dashboard](https://www.klaviyo.com/profiles).

<Frame>
  <img src="https://mintcdn.com/formsplugin/nuH6w9HyT7O56VW4/images/screenshots/integrations/klaviyo/klaviyo-step5-result.png?fit=max&auto=format&n=nuH6w9HyT7O56VW4&q=85&s=8482c6fd208d32402c64075e1f2801c2" alt="Completed Klaviyo integration on a form with Integration active status" width="1617" height="1237" data-path="images/screenshots/integrations/klaviyo/klaviyo-step5-result.png" />
</Frame>

## Next Steps

* [Integrations Overview](/integrations/overview)
* [Contact Support](https://go.formsplugin.com/contact) if you need help
