How to embed a full subscribe page on your website

read
Last updated at:

You will learn

Learn how to create a full-page subscribe form for a list that serves as a landing page so that your customers can easily sign up to hear more from your brand.

To create a full-page subscribe, 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:

  • Adjust the styling of the page itself, as well as the header, text, and link styles in the Basics tab of the Style/Design section
  • Adjust the styling of your form's buttons and fields in the Forms tab of the Style/Design section
  • Build out your form with additional Klaviyo-supported field types such as 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 in the "Field Property" input. For example, to add a text field to collect the subscriber's phone number.

subscribe page showing ability to add a field and edit the field's appearence

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

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

  1. Copy the following snippet of code to your site
  2. 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".

subscribe page editor showing the page's URL highlighted

Additional resources

 
x
Was this article helpful?
356 out of 699 found this helpful