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