Guide to Where to Paste a Form's Embed Code

read
Last updated at:

Overview

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.

This step is unique to embedded forms and is not required for popups or flyouts. 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, you will first need to install klaviyo.js on your site in order to publish forms.

Because pasting form code requires access to your site's HTML and ecommerce platform, our support team is unable to offer hands-on assistance. If you don't have a developer on your team, consider reaching out to a Klaviyo partner for assistance.

Get the Embed Code

First, create your embedded form, style it, and add any desired form fields.

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

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

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 

By default, browsers who subscribe to your newsletter through your BigCommerce signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your BigCommerce embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. Learn how to connect your BigCommerce signup forms to Klaviyo

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
    In a BigCommerce account’s Webpages menu, the additional options menu is open, revealing an Edit button.
  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

In the page editor for a BigCommerce Contact page, the HTML button in the content editor is highlighted

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 A cursor hovers over the Customize button for a BigCommerce store’s active theme with a site preview on the left
  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
    BigCommerce store’s drag and drop editor, an HTML block is dropped above the footer, and a Klaviyo embed code is pasted in

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
    BigCommerce store’s current theme, the Advanced menu is open with a cursor hover over the Edit Theme with an image on the left
    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 

Any edits you make only apply to the theme you are editing. If you change your theme in the future, your edits will not automatically move to your new theme.

Shopify

By default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your Shopify embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list.

However, if you are using a custom theme, you may need to add a small snippet of code to your Shopify form to connect it to Klaviyo.

Shopify Footer

  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 signup form will display above your site's copyright information
      In a Shopify store’s footer.liquid file, a Klaviyo embed code has been pasted above the copyright section
  6. Paste the form embed code
  7. Click Save

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

Shopify Non-Footer

By default, browsers who subscribe to your newsletter through your Shopify signup form are automatically added to your Klaviyo newsletter list through the integration. 

If you would like to include an embedded form on your Shopify site 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  
    • If you are using a Shopify 2.0 theme, select Custom Liquid and paste your code in the box
  5. Click Add content > Custom HTML
  6. Paste in your embed code

Shopify Password Page

If you haven't already done so, you will need to install the Klaviyo form installation code, as the password-content.liquid file does not leverage the theme.liquid file. You can find the code installation instructions and snippet in this article. Add the snippet to the end of the file. 

  1. Navigate to your Shopify admin
  2. Go to Online Store > Themes
  3. Click Actions > Edit code
  4. Open your password-content.liquid theme file
    Klaviyo’s javascript has been added to a Shopify store’s password-content.liquid file
  5. Surround the default Shopify signup form with comment tags
    1. Add {% comment %} to start the tag 
    2. Add {% endcomment %} to close the tag
      Comment tags surround a placeholder for code in a Shopify liquid file
  6. Paste your Klaviyo embed code above the commented-out Shopify embed
  7. Save the file 

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

A Klaviyo embed form code has been pasted into a Shopify store’s password-content.liquid file

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

WooCommerce

By default, browsers who subscribe to your newsletter through your WooCommerce signup form are automatically added to your Klaviyo newsletter list through the integration. You do not need to replace your WooCommerce embedded form with a Klaviyo embedded form to ensure that new subscribers are added to your newsletter list. 

  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

WooCommerce site editor, a Klaviyo embed code is pasted into a Custom HTML block.

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’s .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’s .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

x
Was this article helpful?
278 out of 752 found this helpful