Embed a Full Subscribe Page on Your Website

Last updated at:


In Klaviyo, you can create a full-page form that serves as a landing page on its own called a subscribe page.

To create a full-page subscribe form for a list, click on the list and navigate to the Subscribe & Preference Pages tab from the header navigation menu. Here, you can customize the styling of your subscribe page and add custom fields.

You cannot currently collect SMS consent on a subscribe page.

Style and Add Fields to a Subscribe Page

The subscribe page builder allows you to update basic page styling options, customize certain form styles, and add fields:

  • In the Basics tab of the Style/Design section, you can adjust the styling of the page itself, as well as the header, text, and link styles.
  • From the Forms tab of the Style/Design section, you can adjust the styling of your form's buttons and fields.
  • Klaviyo supports a variety of field types as you look to build out your form — you can add basic text fields, as well as checkboxes, radio buttons, and dropdown menus.

Klaviyo supports a few special field names that will add common personal information to someone's Klaviyo profile. The special fields are listed below — make sure to use the syntax displayed here when adding these fields to your form:

  • $first_name: First name
  • $last_name: Last name
  • $phone_number: Phone number
  • $organization: Company or organization someone is affiliated with
  • $title: Occupation title at a company or organization

The special syntax above should be used for the "Field Property" input. For example, to add a text field to collect the subscriber's phone number.


You can collect custom properties using these same fields if you don't use the above syntax.

Embed a Subscribe Page

After you have designed your subscribe page, you can share a link to the Klaviyo-hosted page or embed the page as a form on your site.

To embed this page on your website, simply copy the following snippet of code to your site and replace SUBSCRIBE_URL with the URL for your page.

<iframe id="klaviyo_subscribe_page" src="SUBSCRIBE_URL&embed=1" seamless="seamless" width="100%" scrolling="no" ></iframe> 
<script type="text/javascript" src="//a.klaviyo.com/media/js/lib/iframeresizer.js"></script> 
<script type="text/javascript">iFrameResize({}, '#klaviyo_subscribe_page');</script>

You can find the URL for your page in a box above the page itself, with a button that says, "Copy URL".


Additional Resources

Was this article helpful?
338 out of 665 found this helpful