Embed a Full Subscribe Page on Your Website

read
Last updated at:

Overview

In Klaviyo, you can create a full-page sign up form that serves as a landing page on its own -- this is 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.

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.
  • We support 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 drop-down 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.

addFieldToSubscribe.png

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 and/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".

embedSubscribePage.png
 
x
Was this article helpful?
64 out of 132 found this helpful