Embed a Full Subscribe Page on Your Website

read
Last updated at:

Overview

Learn how to create a full-page form that serves as a landing page, also called a subscribe page.

Create a Subscribe Page

  1. Click on the list you want the subscribe page to add profiles to
  2. Navigate to the Subscribe & Preference Pages tab from the header navigation menu
  3. 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.

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.

Further, Klaviyo includes 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 or embed the page as a form on your site.

  1. Click Copy URL on the right side of the subscribe page
    embedSubscribePage.png
  2. Replace SUBSCRIBE_URL in the following code snippet with the URL for your page
  3. Copy and paste the snippet with your URL into the code for your site
<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>

Additional Resources

 
x
Was this article helpful?
294 out of 595 found this helpful