Klaviyo→Webflow

Script Version

latestDocumentation for version 1.3.0 - Released 2023-11-15

You're viewing documentation for version 1.3.0, which is the latest release.

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">
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

Required Attributes

  • •
    data-klaviyo-formEnables the integration for this form
  • •
    data-klaviyo-list-id="LIST_ID"Your Klaviyo list/segment ID

Field Mapping

By default, the script will map common field names automatically. For custom fields, use the following attributes:

HTML

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

Advanced Usage

Multiple Forms & Lists

You can 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 Events

Track custom events when a form is submitted:

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 />
  <input type="text" name="first_name" />
  <input type="text" name="last_name" />
  <button type="submit">Subscribe</button>
</form>

SMS Consent

Collect SMS consent with a checkbox:

HTML

<form data-klaviyo-form="sms-signup">
  <input type="email" name="email" required />
  <input type="tel" name="phone_number" required />
  <button type="submit">Subscribe</button>
</form>

API Reference

Klaviyo API Version

This script uses Klaviyo's API revision 2025-04-15 to ensure compatibility with Klaviyo's client subscription endpoints.

If Klaviyo makes breaking changes to their API, we'll release an updated version of this script to maintain compatibility.

Configuration Options

OptionTypeDefaultDescription
klaviyoApiKeyStringnullYour Klaviyo public API key
debugBooleanfalseEnable debug logging to console
defaultListIdStringnullDefault list ID if not specified on form
successMessageString"Thank you for subscribing!"Default success message
errorMessageString"There was an error. Please try again."Default error message

Form Attributes

AttributeDescription
data-klaviyo-formSet to "true" to enable Klaviyo integration for the form
data-klaviyo-list-idThe Klaviyo list/segment ID to subscribe to
data-klaviyo-eventCustom event name to track on form submission
data-klaviyo-event-propertiesJSON string of properties to include with the event
data-klaviyo-success-messageCustom success message for this form
data-klaviyo-error-messageCustom error message for this form

Troubleshooting

Common Issues

Form submissions aren't reaching Klaviyo

  • Verify your Klaviyo API key is correct
  • Check that you've added the data-klaviyo-form="true" attribute to your form
  • Confirm the data-klaviyo-list-id ID is valid
  • Enable debug mode to see detailed error messages in the console

Custom fields aren't mapping correctly

  • Ensure you've added the data-klaviyo-field attribute to your input fields
  • Check that the field name matches exactly what Klaviyo expects
  • For custom properties, make sure they're defined in your Klaviyo account

Debug Mode

Enable debug mode to see detailed logs in your browser console:

JavaScript

KlaviyoWebflow.init({
  publicApiKey: 'YOUR_KLAVIYO_PUBLIC_API_KEY',
  defaultListId: 'YOUR_KLAVIYO_LIST_ID',
  debug: true,
  successMessage: 'Thank you for subscribing!',
  errorMessage: 'There was an error. Please try again.'
});

Version History

Version 1.3.0Latest

Released: 2023-11-15
  • Version 1.3.0 released