How to embed a sign-up form on your website

You will learn

Learn how to add an embedded form to your website by pasting the embed code into the theme files or page editor for your ecommerce store, blog, or site. Where you paste this code will depend on where you want the embedded form to appear and will vary depending on how your site is built.

These instructions are unique to embedded forms, and are not required for popups, flyouts or full page forms. Once you paste the embed code on your site, you can edit your form within Klaviyo without having to worry about updating the snippet when you're ready to publish your changes.

If you're not integrated with Shopify, BigCommerce, Magento, or WooCommerce, which sync a snippet of code called Klaviyo.js through the respective integrations (or for Shopify, through an app embed), you will first need to install Klaviyo.js on your site in order to publish forms. Klaviyo.js is also known as the Active on Site tracking code snippet, because it also enables user activity tracking; you can read more about it in our guide to web tracking. 

Create a new embed form

1. Navigate to the Sign-up forms > Build From Scratch.
2. Name your form and choose a list to add subscribers to.
3. Select Embed as your form type.
4. Click Save and Continue to Design.
   
   
5. Use the editor to style your form and add any desired form fields.

Get the embed code

Once you have your form styled the way you'd like, there are 2 places you can retrieve the form's embed code:

1. In the Targeting & Behaviors section:
   
2. When publishing an embedded form, you will see a modal that also prompts you to paste the embed code on your site:
   

Then, publish your form and copy the code snippet to paste on your site. 

Paste the code on your site

Where you should paste the code on your site depends on where you want the embedded form to appear and varies by integration. Below, we've outlined some example use cases. Select the platform you use from the sidebar menu to jump to instructions for that platform.

BigCommerce 

If you’d like to replace your BigCommerce footer form with a Klaviyo form, or if you’d like to add a Klaviyo embedded form elsewhere on your site, you have multiple options, outlined below. 

Use the Page Editor

1. Navigate to Storefront > Webpages.
2. Select the page where the embedded form should appear.
3. Select Edit from the Action menu.
   
4. Click HTML in the Page Content section to open the source code editor.
5. Paste in the form’s embed code.
6. Click Update and save your changes.

Use the theme editor

1. Log in to your BigCommerce store.
2. Navigate to Storefront > My Themes.
3. Click Customize under the Current Theme section. 
   src="/hc/article_attachments/8812546060315/embedaform6.jpeg" alt="customize button being clicked under the Current Theme section of the theme editor" width="571" height="354"
4. Select the page where you’d like to add the embedded form.
5. Locate the section on the page where you plan to add the form.
6. Drag in an HTML block.
7. Paste your form’s embed code into the block editor.
8. Save the block.
9. Save your changes.
   
   

Insert into your theme files 

1. Navigate to Storefront > My Themes.
2. Click the Advanced dropdown in the Current Theme section.
3. Click Edit Theme Files.
   
   
   1. If the option to Edit Theme Files does not appear: 
      1. Make a copy of the theme
      2. Edit the copy
4. Navigate to the file that contains the source code for the section where you want to embed a form.
5. Locate the section in the code where the form should appear.
6. Paste the embed code.
7. Save your changes. 

Shopify

Shopify Footer for All Themes

If you would like to place your embedded form in the footer of your site, follow the steps below. These instructions apply to both Shopify vintage themes and Shopify 2.0 themes. 

1. Navigate to your Shopify admin.
2. Go to Online Store > Themes.
3. Click Actions > Edit code.
4. Open your footer.liquid theme file.
5. Locate the area where you want the form to display.
   1. In the example below, the sign-up form will display above your site's copyright information:
      
6. Paste the form embed code.
7. Click Save.

The form will appear now in the footer of your site.

Shopify non-footer for vintage themes

If you would like to include an embedded form on your Shopify site (using a vintage theme) anywhere besides the footer, follow these steps: 

1. Navigate to your Shopify admin.
2. Go to Online Store > Themes.
3. Click Customize > Add Section.
4. Choose the following option that appears for you:
   • Custom content
     1. Add this block
     2. Delete the default content that populates
   • Custom HTML  
5. Click Add content > Custom HTML.
6. Paste in your embed code.
7. Click Save.

Shopify non-footer for 2.0 themes

If you would like to include an embedded form on your Shopify site (using a 2.0 theme) anywhere besides the footer, follow these steps:

1. Create your embedded sign-up form in Klaviyo.
2. Save your form ID.
   To find your form ID, navigate to the embedded form in your Klaviyo account. The form ID is the six-letter code at the end of the URL.
3. Navigate to your Shopify admin.
4. Go to Online Store > Themes.
5. Click Customize.
6. Click Add Section and scroll down to find Klaviyo Embedded Form under Apps.
   
   
7. Click on the new section, and add your Embedded form ID in the text box.
   
8. Click Save.
9. Now your embedded form has been added to your theme, and you can drag and drop it where you would like within the page.

Shopify password page for all themes

If you would like to place your embedded form on your site's password page, follow the steps below. These instructions apply to both Shopify vintage themes and Shopify 2.0 themes. 

You will need to install Klaviyo's code snippet that enables sign-up forms, known as Klaviyo.js, separately on the password page.  This is because the password-content.liquid file (or the password.liquid file in Shopify 2.0) does not leverage the theme.liquid file, where the integration installs it automatically. The Klaviyo.js installation instructions are included below.

1. Navigate to your Shopify admin.
2. Go to Online Store > Themes.
3. Click Actions > Edit code.
4. For vintage themes, open your password-content.liquid theme file, or password.liquid file for 2.0 themes.
5. Copy the Klaviyo.js code snippet below and paste it at the bottom of the file.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=API_KEY"></script>

6. Where you see Public API Key in the snippet, you will need to replace this with your Klaviyo account's public API Key; to find your public API Key, navigate to Account > Settings > API Keys.
   
7. Surround the default Shopify sign-up form with comment tags to prevent it from showing on your site:
   1. Add {% comment %} to start the tag 
   2. Add {% endcomment %} to close the tag
      
8. Paste your Klaviyo embedded form code above the commented-out Shopify embedded form.
9. Click Save. 

The Klaviyo embed form will now appear on the password page of your site.

Please note that any published popup and flyout forms in your account will appear on this page once you install Klaviyo.js, unless you specify for them not to be shown on the specific URL. 

WooCommerce

1. Open your WooCommerce dashboard.
2. Click Customize Your Site.
3. Navigate to the page where you’d like to add the embedded form.
4. Click Add a widget > Custom HTML.
5. Paste the embed code into the content section.
6. Click the Publish button to publish the changes.

Other platforms 

For a Klaviyo embedded form to work, two code snippets must be present on your page: Klaviyo’s Javascript, and the form’s embed code. Many of Klaviyo’s default integrations (e.g., Magento, Magento 2) automatically inject Klaviyo.js into your site. Check your platform’s integration settings to ensure this option is selected. 

If your platform doesn’t have a native Klaviyo integration, add our .js manually by following these instructions. 

Once Klaviyo.js is installed, you can paste the form’s embed code into your site’s HTML/source code wherever you’d like it to appear. If you aren’t comfortable editing code on your site and would prefer to have an expert do it for you, contact a Klaviyo partner. 

Additional resources

• Getting started with sign-up forms
• How to install Klaviyo.js to publish sign-up forms
• How to embed a form on your order confirmation page
• How to add a Klaviyo embedded form to your BigCommerce site