Embed a Full Subscribe Page on Your Website

read

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 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:

2017-05-17_16-10-12.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".

2017-05-17_14-07-37.png
 
Was this article helpful?
8 out of 13 found this helpful