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.
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.
Create a new embed form
- Navigate to the Sign-up forms > Build From Scratch.
- Name your form and choose a list to add subscribers to.
- Select Embed as your form type.
- Click Save and Continue to Design.
- 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:
- In the Targeting & Behaviors section:
- 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
By default, browsers who subscribe to your newsletter through your BigCommerce sign-up 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 sign-up 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
- Navigate to Storefront > Webpages.
- Select the page where the embedded form should appear.
- Select Edit from the Action menu.
- Click HTML in the Page Content section to open the source code editor.
- Paste in the form’s embed code.
- Click Update and save your changes.
Use the theme editor
- Log in to your BigCommerce store.
- Navigate to Storefront > My Themes.
- 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" - Select the page where you’d like to add the embedded form.
- Locate the section on the page where you plan to add the form.
- Drag in an HTML block.
- Paste your form’s embed code into the block editor.
- Save the block.
- Save your changes.
Insert into your theme files
- Navigate to Storefront > My Themes.
- Click the Advanced dropdown in the Current Theme section.
- Click Edit Theme Files.
- If the option to Edit Theme Files does not appear:
- Make a copy of the theme
- Edit the copy
- If the option to Edit Theme Files does not appear:
- 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.
- Paste the embed code.
- 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
Browsers who subscribe to your newsletter through your Shopify sign-up form are automatically added to your Klaviyo list through the integration, if you've selected a list in your integration settings. 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.
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.
- Navigate to your Shopify admin.
- Go to Online Store > Themes.
- Click Actions > Edit code.
- Open your footer.liquid theme file.
- Locate the area where you want the form to display.
- In the example below, the sign-up form will display above your site's copyright information:
- In the example below, the sign-up form will display above your site's copyright information:
- Paste the form embed code.
- 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:
- Navigate to your Shopify admin.
- Go to Online Store > Themes.
- Click Customize > Add Section.
- Choose the following option that appears for you:
- Custom content
- Add this block
- Delete the default content that populates
- Custom HTML
- Custom content
- Click Add content > Custom HTML.
- Paste in your embed code.
- 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:
Note that you must have Shopify App Embed enabled to use this feature. For help enabling it, head to our guide on how to enable onsite tracking for Shopify.
- Create your embedded sign-up form in Klaviyo.
- 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. - Navigate to your Shopify admin.
- Go to Online Store > Themes.
- Click Customize.
- Click Add Section and scroll down to find Klaviyo Embedded Form under Apps.
- Click on the new section, and add your Embedded form ID in the text box.
- Click Save.
- 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.
- Navigate to your Shopify admin.
- Go to Online Store > Themes.
- Click Actions > Edit code.
- For vintage themes, open your password-content.liquid theme file, or password.liquid file for 2.0 themes.
- 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>
- 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.
- Surround the default Shopify sign-up form with comment tags to prevent it from showing on your site:
- Add {% comment %} to start the tag
- Add {% endcomment %} to close the tag
- Paste your Klaviyo embedded form code above the commented-out Shopify embedded form.
- 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
By default, browsers who subscribe to your newsletter through your WooCommerce sign-up 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.
- Open your WooCommerce dashboard.
- Click Customize Your Site.
- Navigate to the page where you’d like to add the embedded form.
- Click Add a widget > Custom HTML.
- Paste the embed code into the content section.
- 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.