How to Redirect Existing Signup Forms to Klaviyo

read
Last updated at:

Overview

This guide explains how to redirect existing signup forms to point to Klaviyo, or otherwise ensure that all of your future subscribers are added to your Klaviyo account after switching from another email service provider.

If you're using one of our pre-built ecommerce integrations, like Shopify or BigCommerce, ecommerce platform-specific forms are synced automatically through the integration. Review the integration settings for your ecommerce platform to confirm these subscribers are automatically synced.

Additionally, Klaviyo offers popup, flyout, and embedded forms that come free with your Klaviyo account. Check out this guide to installing Klaviyo Signup forms.

As you consider importing contacts and connecting signup forms to Klaviyo, keep in mind that maintaining one primary newsletter list will make it easy to later manage and communicate with your contacts efficiently. The segment builder allows you to create dynamic segments of your lists that don’t require any maintenance. 

Redirect Existing Signup Forms

If you already have different signup forms on your website, you'll need to make sure that subscribers using these forms end up in Klaviyo. To start, consider the following: 

628476.png

Redirecting a Custom Form to Klaviyo

If you're migrating over from Mailchimp, you will not be able to redirect existing forms to Klaviyo. Instead, leverage Klaviyo's native Signup Form Builder to create your forms.

If you've configured a custom form, this form likely has a Form Action URL that tells the form where to send new subscribers' email addresses. You will need to simply change this URL to the subscribe page URL for your Klaviyo list. To find this URL, navigate to the Subscribe Pages tab for the particular list.

subscribeNoEmbed.png

Generally speaking, the form should have the following properties:

<form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST">
  <input type="hidden" name="g" value="LIST_ID_HERE">
  <input type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
  OTHER_FORM_CONTENT_HERE
  <button type="submit">Subscribe</button>
</form>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> 

Using a Third-Party Tool

Klaviyo integrates with a number of third-party list growth and landing page tools. Scan our list of available integrations to find yours. If you don't see your tool of choice on our list, we strongly encourage you to reach out to ask them to integrate with us.

Using a Klaviyo Subscribe URL for a Third-Party Signup Form

You can also add users to a list using a POST request from a third-party signup form. This method requires prior knowledge of using APIs.

API requests are made to the Klaviyo Subscribe URL endpoint: https://manage.kmail-lists.com/ajax/subscriptions/subscribe 

POST requests to the above endpoint add a user's email and additional user properties to any list in Klaviyo that you choose. This endpoint is unique from the standard subscribe endpoint used in Klaviyo's native signup forms.

The POST body requires you to pass five distinct properties:

  • g (required) - The desired LIST_ID.
  • email (required) - The user's email address.
  • $fields (optional) - This tells the Klaviyo backend which keys (additional users properties) to expect in the POST request. All properties (other than email) need to be passed as a value under $fields and as its own key.
  • $list_fields (optional) - This inherits from the data from $fields and transposes it as a custom property in list format.
  • other properties (optional) - For each property in $fields, you want to pass a key/value pair like below:
    • $first_name: John
    • $last_name: Smith
    • Custom Property 1: Custom Value 1
    • Custom Property 2: Custom Value 2

Code Snippet


  var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache"
  },
  "data": {
    "g": "{{LIST_ID}}",
    "$fields": "$first_name,$last_name,Favorite Color,Favorite Book,$source",
    "email": "{{email}}",
    "$first_name": "{{first_name}}",
    "$last_name": "{{last_name}}",
    "Favorite Color": "{{favorite_color}}",
    "Favorite Book": "{{favorite_book}}",
    "$source": "Custom Form"
  }
}
 
$.ajax(settings).done(function (response) {
  console.log(response);
});
The snippet above uses {{ }} placeholder syntax, which will need to be altered for your platform. Product fields are dynamically rendered based on which product page you're viewing.

Response

200 Success: Request was successful.

400 BAD REQUEST: The email address used already exists in Klaviyo.

405 METHOD NOT ALLOWED: Required fields are missing from the POST request.

Special Properties

$first_name, $last_name, and $source are special Klaviyo properties. You can choose to include any of these special properties for users: 

  • $id - Your unique identifier for a person
  • $email - Email address
  • $first_name - First name
  • $last_name - Last name
  • $phone_number - Phone number
  • $title -Job title at their business or organization
  • $organization - Business or organization a user belongs to
  • $city - The city a user lives in
  • $region - The region or state a user lives in
  • $country - The country a user lives in
  • $zip - The postal code where the user lives
  • $image - URL to a photo of the user
  • $source - The form the user signed up with

Additional Resources

x
Was this article helpful?
85 out of 241 found this helpful