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.

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 Behaviors tab
    An embed form’s Behaviors tab is open in Klaviyo, showing an embed code that can be copied into your site’s code
  2. When publishing an embedded form, you will see a modal that also prompts you to paste the embed code on your site:
    An embed form’s publish modal in the Klaviyo platform, including an embed code.

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

From your BigCommerce dashboard, navigate to Storefront > Webpages and select the page where the embedded form should appear. Select Edit from the Action menu. 

In a BigCommerce account’s Webpages menu, the additional options menu is open, revealing an Edit button.

In the Page Content section, click HTML to open the source code editor. Paste in the form’s embed code, then 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

From your BigCommerce dashboard, navigate to Storefront > My Themes. From the Current Theme section, click Customize

A cursor hovers over the Customize button for a BigCommerce store’s active theme with a site preview on the left

Select the page where you’d like to add the embedded form and locate the section on the page where you plan to add it. Drag in an HTML block, and paste your form’s embed code into the block editor. Save the block, then 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 

From your BigCommerce dashboard, navigate to Storefront > My Themes. From the Current Theme section, click the Advanced dropdown and click Edit Theme Files. This opens the web editor.

BigCommerce store’s current theme, the Advanced menu is open with a cursor hover over the Edit Theme with an image on the left

If you're working with a default theme, the option to Edit Theme Files will not appear. First, make a copy of the theme, then make your edits to the copy. 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.

Navigate to the file that contains the source code for the section where you want to embed a form. Locate the section in the code where the form should appear, and paste the embed code there. 

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

To add a Klaviyo form to your Shopify footer, first, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.

Open your footer.liquid theme file. In this example, your signup form will display above your site's copyright information. Search for the term "copyright" in the file.

Next, on a line above the opening <div> for the copyright code, paste the form embed code.

In a Shopify store’s footer.liquid file, a Klaviyo embed code has been pasted above the copyright section

Click Save, and the form will appear 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, you can do so using a Custom HTML block. 

First, navigate to your Shopify admin and go to Online Store > Themes. Then, click Customize > Add Section. Here, you will either see the option to add a Custom content or a Custom HTML block. If you see Custom content instead of Custom HTML, add this block and delete the default content that populates. Next, click  Add content > Custom HTML 

Here, you can paste in your embed code.

Klaviyo’s form editor, a cursor clicks Publish for an embed form, displaying the publish modal

Shopify Password Page

If your store is not yet live and you’d like to collect newsletter signups on your Shopify store’s password page, you can use a Klaviyo form to ensure that these contacts sync to your Klaviyo newsletter list. To do this, navigate to your Shopify admin and go to Online Store > Themes. Then, click Actions > Edit code.

Next, open your password-content.liquid theme file. 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. 

Klaviyo’s javascript has been added to 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. 

Next, comment out the default Shopify signup form so that you can replace it with your Klaviyo form. To comment out code in liquid, surround the code with the following tags: {% comment %} and {% endcomment %}. 

Comment tags surround a placeholder for code in a Shopify liquid file

Finally, paste your Klaviyo embed code above the commented-out Shopify embed. Once you save the file, the Klaviyo embedded form will 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

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. 

If you’d like to add a Klaviyo embedded form on your site, open your WooCommerce dashboard and click Customize Your Site. Navigate to the page where you’d like to add the embedded form. Click Add a widget > Custom HTML and paste the embed code into the content section. When you’re finished, use 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?
232 out of 624 found this helpful