Documentation

Integration Guide

Everything you need to connect your Webflow forms to Klaviyo. From quick setup to advanced configurations.

Version:

latest

Getting Started

Connect your Webflow forms to Klaviyo in minutes with our easy-to-use integration script.

What You'll Need

A Webflow site with forms
A Klaviyo account with API credentials

Installation

Add our script to your Webflow site's custom code settings:

HTML

<script src="/api/script/1.3.0"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    KlaviyoWebflow.init({
      publicApiKey: 'YOUR_KLAVIYO_PUBLIC_API_KEY',
      defaultListId: 'YOUR_KLAVIYO_LIST_ID',
      debug: false
    });
  });
</script>

Add this code to your site-wide custom code section in Webflow's dashboard under Site Settings → Custom Code → Footer Code.

Form Setup

Add the data-klaviyo-form attribute to any Webflow form you want to connect to Klaviyo:

HTML

<form data-klaviyo-form="newsletter" data-klaviyo-list-id="abc123">
  <input type="email" name="email" required />
  <input type="text" name="first_name" />
  <button type="submit">Subscribe</button>
</form>

data-klaviyo-form

Enables the integration for this form

data-klaviyo-list-id

Your Klaviyo list/segment ID

Advanced Usage

Multiple Forms & Lists

Connect different forms to different Klaviyo lists:

HTML

<!-- Newsletter form -->
<form data-klaviyo-form="true" data-klaviyo-list-id="NEWSLETTER_LIST_ID">
  <!-- Fields -->
</form>

<!-- Product interest form -->
<form data-klaviyo-form="true" data-klaviyo-list-id="PRODUCT_INTEREST_LIST_ID">
  <!-- Fields -->
</form>

Custom Messages

Customize success and error messages per form:

HTML

<form 
  data-klaviyo-form="contact" 
  data-klaviyo-list-id="abc123" 
  data-klaviyo-source="Custom Form"
  data-klaviyo-success-message="Thanks for subscribing!"
  data-klaviyo-error-message="There was an error, please try again"
>
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

API Reference

Klaviyo API Version

This script uses Klaviyo's API revision 2025-04-15

Configuration Options

Option	Type	Default	Description
publicApiKey	String	null	Your Klaviyo public API key
debug	Boolean	false	Enable debug logging
defaultListId	String	null	Default list ID
successMessage	String	"Thank you!"	Default success message
errorMessage	String	"Error occurred"	Default error message

Troubleshooting

Form submissions aren't reaching Klaviyo

Verify your Klaviyo API key is correct
Check that you've added data-klaviyo-form to your form
Enable debug mode to see detailed error messages

Enable Debug Mode

JavaScript

KlaviyoWebflow.init({
  publicApiKey: 'YOUR_KEY',
  defaultListId: 'YOUR_LIST_ID',
  debug: true  // Enable debug logging
});

Version History

Version 1.3.0

Latest

2023-11-15

Version 1.3.0 released