Blog
July 16, 2025
Blog
July 16, 2025
Blog
July 16, 2025
Add high-converting Klaviyo embed forms to your site in 8 simple steps. Learn setup, styling, targeting, compliance, and troubleshooting tips to boost list growth.
Stop Losing Leads to Bad Forms
Aggressive popups can turn visitors away before they subscribe. Klaviyo embed forms offer a quieter, always-visible alternative, ideal for footers, sidebars, and landing pages.
They don’t interrupt. Instead, they build trust and capture leads passively.
In this guide, you’ll learn how to:
Build and customise embedded forms
Embed them on Shopify, WooCommerce, and WordPress
Troubleshoot visibility issues
Optimise for mobile, compliance, and conversions
Ready to create forms that work without annoying your audience? Let’s dive in.
Step 1: Understand What a Klaviyo Embed Form Is
A Persistent, Passive Signup Method
A Klaviyo embed form is a static signup form placed directly into your site’s HTML. Unlike popups or flyouts, it stays visible without triggering behaviour, making it ideal for non-intrusive, passive lead generation.
According to Klaviyo’s official guide, embedded forms are best used when you want an always-on method of collecting signups without disrupting the user’s browsing session.
Key Features of a Klaviyo Embed Form
Direct Placement: Code is manually embedded into a page or section (e.g. footer, sidebar).
Persistent Visibility: It always shows unless removed, requiring no trigger.
Non-Intrusive: It doesn’t interrupt browsing like a modal or timed popup.
Fully Customisable: Includes design tools, field control, and compliance options.
Form Type: You must select "Embed" when creating your form in Klaviyo.
When Should You Use It?
Embedded forms are ideal for:
Blog Sidebars: Readers are already engaged and more likely to subscribe.
Footer Areas: A universal placement for casual opt-ins.
Landing Pages: Especially on gated content or resource downloads.
Product Pages: To collect emails without interrupting the product experience.
Post-Purchase Confirmation Pages: Request SMS consent or review sign-ups.
Bonus Tip: Combine embedded forms with UTM parameter tracking (e.g., utm_source=newsletter_footer) for better list segmentation and source tracking.
If you’re still experimenting with different signup form types, check out our Top 8 Klaviyo Pop-Up Form Strategies to Drive Conversions to see when and how to use pop-ups versus embedded forms.
Step 2: Install Klaviyo.js on Your Site
Why You Need It
To render any Klaviyo form—whether embed, popup, or flyout—you must install klaviyo.js on your site. This script enables:
Display of your signup forms
Behaviour and targeting settings
Tracking of visitor activity and submissions
Flow triggers based on onsite actions
Without it, your forms won’t appear, and data will not sync to Klaviyo.
Klaviyo confirms this in their official developer documentation, which outlines how the script is essential to power any onsite form, especially when integrating platforms manually or outside pre-built apps.
Installation by Platform
Shopify
Preferred method: Use the Klaviyo for Shopify app to install
klaviyo.jsautomatically.Manual method: Add this code before the closing
</head>tag in yourtheme.liquidfile:
<script async type="text/javascript" src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY"></script>
WooCommerce
Add the script manually to
header.php, or use a plugin like Insert Headers and Footers.Make sure the script loads across all relevant pages where forms appear.
WordPress (non-Woo)
Use a plugin (Insert Headers and Footers or similar) or paste the script into
header.php.You can also deploy it via Google Tag Manager if you’re managing multiple properties.
Confirm It’s Working
Use your browser’s DevTools to check for
klaviyo.jsin the<head>section.Or install the Klaviyo Chrome Extension to detect active scripts and onsite forms.
In Klaviyo, go to Settings > Onsite > Forms & Personalisation to confirm the script is active.
If you're embedding forms on Shopify, be sure your integration is solid. This Shopify x Klaviyo Integration Guide walks through everything you need to ensure form behaviour, tracking, and targeting all sync properly.
Step 3: Create and Customise the Embed Form in Klaviyo
Creating a high-converting embedded form in Klaviyo takes just a few structured steps. Once created, it can be placed directly into your website’s HTML to passively collect subscribers without disrupting the user journey.
Step-by-Step: Creating a Klaviyo Embed Form
1. Access the Form Builder
Go to Signup Forms in your Klaviyo dashboard
Click Create Signup Form
2. Choose “Embed” as Your Form Type
Select the Embed option (not popup or flyout)
Name your form and assign it to the correct list
3. Customise Your Form Design: Use the drag-and-drop builder to:
Add fields like Email, SMS, First Name
Style fonts, buttons, and colours to match your brand
Toggle mobile preview to test responsiveness
Add GDPR/SMS consent checkboxes if needed
Adjust spacing, padding, and background visuals
4. Set Targeting and Behaviour Settings
While embedded forms are static, you can still control visibility by:
Device (mobile vs desktop)
Geography (e.g. show in EU only)
Page rules (show on specific URLs or blog templates)
5. Publish and Generate Embed Code
Click Publish to activate tracking and generate your embed snippet
Without publishing, the form won’t display—even if the code is added to your site
Source: Klaviyo
Step 4: Embed the Form on Your Platform (Shopify, WooCommerce, WordPress)
Once your Klaviyo embed form is published, you’ll receive a unique HTML snippet. You’ll need to manually insert this code into your website. The process varies slightly depending on your platform.
Shopify
There are two reliable ways to embed a Klaviyo form in Shopify using the updated editor:
1. Embed on a Specific Shopify Page
To add a form to a standalone page (like a landing page or “Join Our List” page):
Go to Online Store > Pages
Choose or create a page
In the Content box, click “Show HTML” (icon:
< >)Paste your published Klaviyo embed code
Save and preview
Important: This method works well for embedding forms on dedicated landing pages or blog-style content.
2. Add the Form to a Shopify Theme Section (e.g. Footer or Homepage)
For global visibility across your site:
Go to Online Store > Themes > Customise
Choose the Footer or any visible section
Add a Custom Liquid or Custom HTML block (depending on your theme)
Paste in the Klaviyo embed code
Save and check mobile/desktop rendering
Source: Klaviyo
If needed, you can still manually insert the code in theme.liquid or footer.liquid under Online Store > Themes > Edit Code, though the Theme Editor is preferred for no-code control.
WooCommerce / WordPress (Classic)
If you’re using WooCommerce or classic WordPress themes:
Go to Appearance > Widgets
Add a Custom HTML block in the Footer or Sidebar
Paste the embed code
Save and preview
Source: Klaviyo
For broader visibility, you can insert the embed code directly into footer.php in the Theme File Editor.
Page Builder Tip:
If you use Elementor, simply drag in an HTML widget and paste your Klaviyo embed snippet.
WordPress Block Editor (Gutenberg)
Open your desired post or page
Add a Custom HTML block
Paste the embed code
Use the Preview option, then publish
Important Note:
The Klaviyo WordPress plugin does not support embedded forms. You must use manual HTML insertion.
Step 5: Troubleshooting – Why Your Klaviyo Embed Form Isn’t Showing
Is your form missing from the page? Before you panic, run through this 7-step checklist to fix the most common visibility issues.
7-Step Embed Form Troubleshooting Checklist
1. Did You Publish the Form?
Your embed form won’t render until you click Publish inside Klaviyo.
2. Is Klaviyo.js Installed Correctly?
This script is essential for forms to display, track data, and trigger flows.
Confirm it’s placed before
</head>and loads site-wide.
3. Is the Embed Code Placed in a Visible Section?
Don’t place the code inside hidden containers (
display: none) or collapsed elements.Ideal locations: footer, sidebar, or above-the-fold content.
4. Are There Theme or Platform Conflicts?
Some Shopify themes delay rendering, and WordPress caching plugins can block fresh code.
Try these:
Clear your site cache
Test in incognito
Disable recently added apps or plugins
5. Are Your Display Settings Too Restrictive?
Check the form’s Targeting & Behaviour rules in Klaviyo.
Examples that may block visibility:
Device = desktop only (but you’re testing on mobile)
Location = EU only
URL = specific page slug not being tested
6. Is JavaScript Being Delayed by Your Theme?
On some platforms,
klaviyo.jsloads too late due to async settings.Solution: Move the script higher in the
<head>, or test with simpler themes.
7. Is Attribution Being Tracked Properly?
Use UTM parameters (e.g.
utm_source=footer_form) or hidden fields to segment sources.Helps confirm if the form is collecting data, even if not immediately visible.
Also, make sure your tracking parameters are consistent with your broader analytics setup—Klaviyo UTM Tracking can help you measure attribution and troubleshoot performance more effectively.
Step 6: Optimise Styling and Mobile Responsiveness
A high-converting form isn’t just functional—it needs to look great across devices and match your brand. Here’s how to optimise design, responsiveness, and layout.
Design for Responsiveness
Use full-width containers: Set your form’s container to
width: 100%so it adapts to mobile screens.Avoid fixed widths: Fixed-width elements can break layouts on smaller devices. Use flexible percentages or media queries in your CSS.
Use Klaviyo’s mobile preview: Toggle between desktop and mobile in the Klaviyo builder to catch layout issues before publishing.
Example CSS for mobile layout:
Match Your Brand
Use custom fonts and colours: Set fonts, button colours, and background to match your website branding.
Add a logo or icon: Reinforce your brand with subtle visual cues, especially in inline forms.
Write a consistent CTA: Ensure the form language aligns with your brand tone. E.g. "Join the club" vs. "Subscribe now."
Smart Placement Ideas
Footer: Great for passive sign-ups across all pages.
Blog Sidebar: Targets engaged readers.
Landing Page Inline: Perfect for gated content or promotions.
Strong visual design isn’t just for forms; it also boosts campaign performance. Our Email Template for Product Promotion guide shows how smart layout and styling can drive clicks and conversions.
Step 7: Stay Compliant and Map Consent Fields
Before collecting emails and phone numbers, review the Klaviyo SMS Compliance Guide to avoid costly mistakes and ensure you're following the latest opt-in laws and deliverability best practices.
Collecting Consent the Right Way
Use clear checkboxes: Separate email and SMS consent boxes (e.g.
“Yes, I want to receive emails.”
“Yes, I want to receive SMS updates.”)
Link to your Privacy Policy: Add “By signing up, you agree to our [Privacy Policy]” with a clickable link.
Use hidden fields for source tracking (optional): Add UTM fields (e.g.
utm_source=footer_form) for segmentation.
Map Fields to Klaviyo Profile Properties
Email consent →
email_consent = expressedSMS consent →
sms_consent = expressedCustom fields: If using a third-party form or custom setup, ensure data maps to standard Klaviyo properties via API or manual mapping.
Enable Double Opt-In (Recommended)
Improves list quality: Reduces fake signups and boosts engagement.
How to enable: Go to Lists > Settings > Subscribe & Preference Pages > toggle on “Send opt-in confirmation.”
Customise the experience: Add your brand voice, logo, and CTA to the confirmation page and email.
If you’re not yet using double opt-in, here are 10 Best Double Opt-In Email Examples to inspire how you confirm signups while keeping your list clean and compliant.
Step 8: Test and Optimise for Conversions
Once your embedded form is live, the next step is maximising how well it converts visitors into subscribers. Klaviyo provides analytics and testing tools that help you fine-tune for performance.
A/B Test to Find What Works
Focus on one variable at a time: This helps isolate the impact of changes and improves test reliability.
Test your CTA:
“Sign Up” vs “Get 10% Off”
“Subscribe for Early Access” vs “Join the Club”
Form length & fields:
Email only vs Email + SMS
Consider progressive profiling (capture more data later)
Placement tests:
Footer vs blog sidebar
Above vs below-the-fold on landing pages
Design variants:
Test different background colours, fonts, and button shapes
Try visual elements like icons or images for engagement
Timing and delay: While embedded forms are always visible, you can still test the context in which they appear (e.g. on which page, or after how much scroll).
Track the Right Metrics
Use Klaviyo’s built-in form analytics to measure:
Views: How many people see the form
Submits: How many people complete it
Conversion rate: % of views that lead to submissions
Device breakdown: Desktop vs mobile performance
List growth over time: See how each form contributes
Not sure where to start with testing? Our 10 Essential A/B Tests to Boost Email Conversions gives you high-impact ideas that you can apply to both forms and campaigns.
Embedded vs Popup vs Flyout – What to Use When?
Klaviyo offers various form types, including embedded, pop-up, and flyout, each with its own advantages. Selecting the appropriate one depends on your objective, page context, and user experience priorities.
Form Type Comparison
Combining embedded and pop-up forms can significantly increase opt-ins, especially when paired with 5 Proven Techniques for Increasing SMS Opt-Ins in Klaviyo.
FAQs
1. Can I track where subscribers came from using an embed form?
Yes, use UTM parameters or hidden fields to capture source information (such as utm_source or signup_location) for segmentation in Klaviyo.
2. Do embedded forms slow down site speed?
No, if implemented correctly. Klaviyo.js is lightweight and only loads once. Place the script before the
</head>tag for best performance.
3. Can I embed multiple forms on the same page?
Yes, but each must have a unique ID. Ensure targeting rules don’t conflict, and test responsiveness across devices.
4. Should I still use popups if I have an embed form?
Absolutely. Embed forms support passive growth, while popups create urgency. Running both strategically improves total conversions.
5. What’s the best CTA for an embedded form?
Keep it benefit-driven and aligned with intent. Examples: “Get 10% Off,” “Join Our Community,” or “Get Free Home Styling Tips.”
Conclusion
If your embedded form isn’t converting, it’s likely not styled well, placed right, or set up with the right targeting. But when done right, it becomes a powerful always-on tool to collect high-quality leads without disrupting your site.
Whether you’re using Klaviyo on Shopify, WooCommerce, or WordPress, this guide gives you the exact steps to build forms that grow your list and stay compliant. Don’t stop at embedded forms. To truly maximise signups and conversions across the funnel, explore our Klaviyo Customer Journey Guide to see how forms, flows, and data can all work together. Start simple, optimise often, and let the data guide you.
Key Takeaways
Install Klaviyo.js First: Without it, your form won’t render, track data, or trigger flows.
Use the ‘Embed’ Type for Always-On Forms: Best for footers, sidebars, and landing pages where popups feel intrusive.
Paste Code in the Right Spot: Avoid hidden divs or delayed loading sections, check using DevTools.
Style for Mobile and Match Your Brand: Mobile-first design and on-brand colours boost form trust and submission rates.
Add Consent Checkboxes for GDPR & SMS: Avoid deliverability issues by clearly collecting and mapping permission.
Test and Optimise Regularly: A/B test CTAs, placement, fields, and use Klaviyo analytics to improve.
Struggling to get your Klaviyo embedded forms to actually show up on your site?
From missing Klaviyo.js to theme conflicts, even small issues can cost you sign-ups. Let our experts audit your setup, fix visibility problems, and optimise your form for maximum conversions. Click here to book now.
Stop Losing Leads to Bad Forms
Aggressive popups can turn visitors away before they subscribe. Klaviyo embed forms offer a quieter, always-visible alternative, ideal for footers, sidebars, and landing pages.
They don’t interrupt. Instead, they build trust and capture leads passively.
In this guide, you’ll learn how to:
Build and customise embedded forms
Embed them on Shopify, WooCommerce, and WordPress
Troubleshoot visibility issues
Optimise for mobile, compliance, and conversions
Ready to create forms that work without annoying your audience? Let’s dive in.
Step 1: Understand What a Klaviyo Embed Form Is
A Persistent, Passive Signup Method
A Klaviyo embed form is a static signup form placed directly into your site’s HTML. Unlike popups or flyouts, it stays visible without triggering behaviour, making it ideal for non-intrusive, passive lead generation.
According to Klaviyo’s official guide, embedded forms are best used when you want an always-on method of collecting signups without disrupting the user’s browsing session.
Key Features of a Klaviyo Embed Form
Direct Placement: Code is manually embedded into a page or section (e.g. footer, sidebar).
Persistent Visibility: It always shows unless removed, requiring no trigger.
Non-Intrusive: It doesn’t interrupt browsing like a modal or timed popup.
Fully Customisable: Includes design tools, field control, and compliance options.
Form Type: You must select "Embed" when creating your form in Klaviyo.
When Should You Use It?
Embedded forms are ideal for:
Blog Sidebars: Readers are already engaged and more likely to subscribe.
Footer Areas: A universal placement for casual opt-ins.
Landing Pages: Especially on gated content or resource downloads.
Product Pages: To collect emails without interrupting the product experience.
Post-Purchase Confirmation Pages: Request SMS consent or review sign-ups.
Bonus Tip: Combine embedded forms with UTM parameter tracking (e.g., utm_source=newsletter_footer) for better list segmentation and source tracking.
If you’re still experimenting with different signup form types, check out our Top 8 Klaviyo Pop-Up Form Strategies to Drive Conversions to see when and how to use pop-ups versus embedded forms.
Step 2: Install Klaviyo.js on Your Site
Why You Need It
To render any Klaviyo form—whether embed, popup, or flyout—you must install klaviyo.js on your site. This script enables:
Display of your signup forms
Behaviour and targeting settings
Tracking of visitor activity and submissions
Flow triggers based on onsite actions
Without it, your forms won’t appear, and data will not sync to Klaviyo.
Klaviyo confirms this in their official developer documentation, which outlines how the script is essential to power any onsite form, especially when integrating platforms manually or outside pre-built apps.
Installation by Platform
Shopify
Preferred method: Use the Klaviyo for Shopify app to install
klaviyo.jsautomatically.Manual method: Add this code before the closing
</head>tag in yourtheme.liquidfile:
<script async type="text/javascript" src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY"></script>
WooCommerce
Add the script manually to
header.php, or use a plugin like Insert Headers and Footers.Make sure the script loads across all relevant pages where forms appear.
WordPress (non-Woo)
Use a plugin (Insert Headers and Footers or similar) or paste the script into
header.php.You can also deploy it via Google Tag Manager if you’re managing multiple properties.
Confirm It’s Working
Use your browser’s DevTools to check for
klaviyo.jsin the<head>section.Or install the Klaviyo Chrome Extension to detect active scripts and onsite forms.
In Klaviyo, go to Settings > Onsite > Forms & Personalisation to confirm the script is active.
If you're embedding forms on Shopify, be sure your integration is solid. This Shopify x Klaviyo Integration Guide walks through everything you need to ensure form behaviour, tracking, and targeting all sync properly.
Step 3: Create and Customise the Embed Form in Klaviyo
Creating a high-converting embedded form in Klaviyo takes just a few structured steps. Once created, it can be placed directly into your website’s HTML to passively collect subscribers without disrupting the user journey.
Step-by-Step: Creating a Klaviyo Embed Form
1. Access the Form Builder
Go to Signup Forms in your Klaviyo dashboard
Click Create Signup Form
2. Choose “Embed” as Your Form Type
Select the Embed option (not popup or flyout)
Name your form and assign it to the correct list
3. Customise Your Form Design: Use the drag-and-drop builder to:
Add fields like Email, SMS, First Name
Style fonts, buttons, and colours to match your brand
Toggle mobile preview to test responsiveness
Add GDPR/SMS consent checkboxes if needed
Adjust spacing, padding, and background visuals
4. Set Targeting and Behaviour Settings
While embedded forms are static, you can still control visibility by:
Device (mobile vs desktop)
Geography (e.g. show in EU only)
Page rules (show on specific URLs or blog templates)
5. Publish and Generate Embed Code
Click Publish to activate tracking and generate your embed snippet
Without publishing, the form won’t display—even if the code is added to your site
Source: Klaviyo
Step 4: Embed the Form on Your Platform (Shopify, WooCommerce, WordPress)
Once your Klaviyo embed form is published, you’ll receive a unique HTML snippet. You’ll need to manually insert this code into your website. The process varies slightly depending on your platform.
Shopify
There are two reliable ways to embed a Klaviyo form in Shopify using the updated editor:
1. Embed on a Specific Shopify Page
To add a form to a standalone page (like a landing page or “Join Our List” page):
Go to Online Store > Pages
Choose or create a page
In the Content box, click “Show HTML” (icon:
< >)Paste your published Klaviyo embed code
Save and preview
Important: This method works well for embedding forms on dedicated landing pages or blog-style content.
2. Add the Form to a Shopify Theme Section (e.g. Footer or Homepage)
For global visibility across your site:
Go to Online Store > Themes > Customise
Choose the Footer or any visible section
Add a Custom Liquid or Custom HTML block (depending on your theme)
Paste in the Klaviyo embed code
Save and check mobile/desktop rendering
Source: Klaviyo
If needed, you can still manually insert the code in theme.liquid or footer.liquid under Online Store > Themes > Edit Code, though the Theme Editor is preferred for no-code control.
WooCommerce / WordPress (Classic)
If you’re using WooCommerce or classic WordPress themes:
Go to Appearance > Widgets
Add a Custom HTML block in the Footer or Sidebar
Paste the embed code
Save and preview
Source: Klaviyo
For broader visibility, you can insert the embed code directly into footer.php in the Theme File Editor.
Page Builder Tip:
If you use Elementor, simply drag in an HTML widget and paste your Klaviyo embed snippet.
WordPress Block Editor (Gutenberg)
Open your desired post or page
Add a Custom HTML block
Paste the embed code
Use the Preview option, then publish
Important Note:
The Klaviyo WordPress plugin does not support embedded forms. You must use manual HTML insertion.
Step 5: Troubleshooting – Why Your Klaviyo Embed Form Isn’t Showing
Is your form missing from the page? Before you panic, run through this 7-step checklist to fix the most common visibility issues.
7-Step Embed Form Troubleshooting Checklist
1. Did You Publish the Form?
Your embed form won’t render until you click Publish inside Klaviyo.
2. Is Klaviyo.js Installed Correctly?
This script is essential for forms to display, track data, and trigger flows.
Confirm it’s placed before
</head>and loads site-wide.
3. Is the Embed Code Placed in a Visible Section?
Don’t place the code inside hidden containers (
display: none) or collapsed elements.Ideal locations: footer, sidebar, or above-the-fold content.
4. Are There Theme or Platform Conflicts?
Some Shopify themes delay rendering, and WordPress caching plugins can block fresh code.
Try these:
Clear your site cache
Test in incognito
Disable recently added apps or plugins
5. Are Your Display Settings Too Restrictive?
Check the form’s Targeting & Behaviour rules in Klaviyo.
Examples that may block visibility:
Device = desktop only (but you’re testing on mobile)
Location = EU only
URL = specific page slug not being tested
6. Is JavaScript Being Delayed by Your Theme?
On some platforms,
klaviyo.jsloads too late due to async settings.Solution: Move the script higher in the
<head>, or test with simpler themes.
7. Is Attribution Being Tracked Properly?
Use UTM parameters (e.g.
utm_source=footer_form) or hidden fields to segment sources.Helps confirm if the form is collecting data, even if not immediately visible.
Also, make sure your tracking parameters are consistent with your broader analytics setup—Klaviyo UTM Tracking can help you measure attribution and troubleshoot performance more effectively.
Step 6: Optimise Styling and Mobile Responsiveness
A high-converting form isn’t just functional—it needs to look great across devices and match your brand. Here’s how to optimise design, responsiveness, and layout.
Design for Responsiveness
Use full-width containers: Set your form’s container to
width: 100%so it adapts to mobile screens.Avoid fixed widths: Fixed-width elements can break layouts on smaller devices. Use flexible percentages or media queries in your CSS.
Use Klaviyo’s mobile preview: Toggle between desktop and mobile in the Klaviyo builder to catch layout issues before publishing.
Example CSS for mobile layout:
Match Your Brand
Use custom fonts and colours: Set fonts, button colours, and background to match your website branding.
Add a logo or icon: Reinforce your brand with subtle visual cues, especially in inline forms.
Write a consistent CTA: Ensure the form language aligns with your brand tone. E.g. "Join the club" vs. "Subscribe now."
Smart Placement Ideas
Footer: Great for passive sign-ups across all pages.
Blog Sidebar: Targets engaged readers.
Landing Page Inline: Perfect for gated content or promotions.
Strong visual design isn’t just for forms; it also boosts campaign performance. Our Email Template for Product Promotion guide shows how smart layout and styling can drive clicks and conversions.
Step 7: Stay Compliant and Map Consent Fields
Before collecting emails and phone numbers, review the Klaviyo SMS Compliance Guide to avoid costly mistakes and ensure you're following the latest opt-in laws and deliverability best practices.
Collecting Consent the Right Way
Use clear checkboxes: Separate email and SMS consent boxes (e.g.
“Yes, I want to receive emails.”
“Yes, I want to receive SMS updates.”)
Link to your Privacy Policy: Add “By signing up, you agree to our [Privacy Policy]” with a clickable link.
Use hidden fields for source tracking (optional): Add UTM fields (e.g.
utm_source=footer_form) for segmentation.
Map Fields to Klaviyo Profile Properties
Email consent →
email_consent = expressedSMS consent →
sms_consent = expressedCustom fields: If using a third-party form or custom setup, ensure data maps to standard Klaviyo properties via API or manual mapping.
Enable Double Opt-In (Recommended)
Improves list quality: Reduces fake signups and boosts engagement.
How to enable: Go to Lists > Settings > Subscribe & Preference Pages > toggle on “Send opt-in confirmation.”
Customise the experience: Add your brand voice, logo, and CTA to the confirmation page and email.
If you’re not yet using double opt-in, here are 10 Best Double Opt-In Email Examples to inspire how you confirm signups while keeping your list clean and compliant.
Step 8: Test and Optimise for Conversions
Once your embedded form is live, the next step is maximising how well it converts visitors into subscribers. Klaviyo provides analytics and testing tools that help you fine-tune for performance.
A/B Test to Find What Works
Focus on one variable at a time: This helps isolate the impact of changes and improves test reliability.
Test your CTA:
“Sign Up” vs “Get 10% Off”
“Subscribe for Early Access” vs “Join the Club”
Form length & fields:
Email only vs Email + SMS
Consider progressive profiling (capture more data later)
Placement tests:
Footer vs blog sidebar
Above vs below-the-fold on landing pages
Design variants:
Test different background colours, fonts, and button shapes
Try visual elements like icons or images for engagement
Timing and delay: While embedded forms are always visible, you can still test the context in which they appear (e.g. on which page, or after how much scroll).
Track the Right Metrics
Use Klaviyo’s built-in form analytics to measure:
Views: How many people see the form
Submits: How many people complete it
Conversion rate: % of views that lead to submissions
Device breakdown: Desktop vs mobile performance
List growth over time: See how each form contributes
Not sure where to start with testing? Our 10 Essential A/B Tests to Boost Email Conversions gives you high-impact ideas that you can apply to both forms and campaigns.
Embedded vs Popup vs Flyout – What to Use When?
Klaviyo offers various form types, including embedded, pop-up, and flyout, each with its own advantages. Selecting the appropriate one depends on your objective, page context, and user experience priorities.
Form Type Comparison
Combining embedded and pop-up forms can significantly increase opt-ins, especially when paired with 5 Proven Techniques for Increasing SMS Opt-Ins in Klaviyo.
FAQs
1. Can I track where subscribers came from using an embed form?
Yes, use UTM parameters or hidden fields to capture source information (such as utm_source or signup_location) for segmentation in Klaviyo.
2. Do embedded forms slow down site speed?
No, if implemented correctly. Klaviyo.js is lightweight and only loads once. Place the script before the
</head>tag for best performance.
3. Can I embed multiple forms on the same page?
Yes, but each must have a unique ID. Ensure targeting rules don’t conflict, and test responsiveness across devices.
4. Should I still use popups if I have an embed form?
Absolutely. Embed forms support passive growth, while popups create urgency. Running both strategically improves total conversions.
5. What’s the best CTA for an embedded form?
Keep it benefit-driven and aligned with intent. Examples: “Get 10% Off,” “Join Our Community,” or “Get Free Home Styling Tips.”
Conclusion
If your embedded form isn’t converting, it’s likely not styled well, placed right, or set up with the right targeting. But when done right, it becomes a powerful always-on tool to collect high-quality leads without disrupting your site.
Whether you’re using Klaviyo on Shopify, WooCommerce, or WordPress, this guide gives you the exact steps to build forms that grow your list and stay compliant. Don’t stop at embedded forms. To truly maximise signups and conversions across the funnel, explore our Klaviyo Customer Journey Guide to see how forms, flows, and data can all work together. Start simple, optimise often, and let the data guide you.
Key Takeaways
Install Klaviyo.js First: Without it, your form won’t render, track data, or trigger flows.
Use the ‘Embed’ Type for Always-On Forms: Best for footers, sidebars, and landing pages where popups feel intrusive.
Paste Code in the Right Spot: Avoid hidden divs or delayed loading sections, check using DevTools.
Style for Mobile and Match Your Brand: Mobile-first design and on-brand colours boost form trust and submission rates.
Add Consent Checkboxes for GDPR & SMS: Avoid deliverability issues by clearly collecting and mapping permission.
Test and Optimise Regularly: A/B test CTAs, placement, fields, and use Klaviyo analytics to improve.
Struggling to get your Klaviyo embedded forms to actually show up on your site?
From missing Klaviyo.js to theme conflicts, even small issues can cost you sign-ups. Let our experts audit your setup, fix visibility problems, and optimise your form for maximum conversions. Click here to book now.
Add high-converting Klaviyo embed forms to your site in 8 simple steps. Learn setup, styling, targeting, compliance, and troubleshooting tips to boost list growth.
Stop Losing Leads to Bad Forms
Aggressive popups can turn visitors away before they subscribe. Klaviyo embed forms offer a quieter, always-visible alternative, ideal for footers, sidebars, and landing pages.
They don’t interrupt. Instead, they build trust and capture leads passively.
In this guide, you’ll learn how to:
Build and customise embedded forms
Embed them on Shopify, WooCommerce, and WordPress
Troubleshoot visibility issues
Optimise for mobile, compliance, and conversions
Ready to create forms that work without annoying your audience? Let’s dive in.
Step 1: Understand What a Klaviyo Embed Form Is
A Persistent, Passive Signup Method
A Klaviyo embed form is a static signup form placed directly into your site’s HTML. Unlike popups or flyouts, it stays visible without triggering behaviour, making it ideal for non-intrusive, passive lead generation.
According to Klaviyo’s official guide, embedded forms are best used when you want an always-on method of collecting signups without disrupting the user’s browsing session.
Key Features of a Klaviyo Embed Form
Direct Placement: Code is manually embedded into a page or section (e.g. footer, sidebar).
Persistent Visibility: It always shows unless removed, requiring no trigger.
Non-Intrusive: It doesn’t interrupt browsing like a modal or timed popup.
Fully Customisable: Includes design tools, field control, and compliance options.
Form Type: You must select "Embed" when creating your form in Klaviyo.
When Should You Use It?
Embedded forms are ideal for:
Blog Sidebars: Readers are already engaged and more likely to subscribe.
Footer Areas: A universal placement for casual opt-ins.
Landing Pages: Especially on gated content or resource downloads.
Product Pages: To collect emails without interrupting the product experience.
Post-Purchase Confirmation Pages: Request SMS consent or review sign-ups.
Bonus Tip: Combine embedded forms with UTM parameter tracking (e.g., utm_source=newsletter_footer) for better list segmentation and source tracking.
If you’re still experimenting with different signup form types, check out our Top 8 Klaviyo Pop-Up Form Strategies to Drive Conversions to see when and how to use pop-ups versus embedded forms.
Step 2: Install Klaviyo.js on Your Site
Why You Need It
To render any Klaviyo form—whether embed, popup, or flyout—you must install klaviyo.js on your site. This script enables:
Display of your signup forms
Behaviour and targeting settings
Tracking of visitor activity and submissions
Flow triggers based on onsite actions
Without it, your forms won’t appear, and data will not sync to Klaviyo.
Klaviyo confirms this in their official developer documentation, which outlines how the script is essential to power any onsite form, especially when integrating platforms manually or outside pre-built apps.
Installation by Platform
Shopify
Preferred method: Use the Klaviyo for Shopify app to install
klaviyo.jsautomatically.Manual method: Add this code before the closing
</head>tag in yourtheme.liquidfile:
<script async type="text/javascript" src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY"></script>
WooCommerce
Add the script manually to
header.php, or use a plugin like Insert Headers and Footers.Make sure the script loads across all relevant pages where forms appear.
WordPress (non-Woo)
Use a plugin (Insert Headers and Footers or similar) or paste the script into
header.php.You can also deploy it via Google Tag Manager if you’re managing multiple properties.
Confirm It’s Working
Use your browser’s DevTools to check for
klaviyo.jsin the<head>section.Or install the Klaviyo Chrome Extension to detect active scripts and onsite forms.
In Klaviyo, go to Settings > Onsite > Forms & Personalisation to confirm the script is active.
If you're embedding forms on Shopify, be sure your integration is solid. This Shopify x Klaviyo Integration Guide walks through everything you need to ensure form behaviour, tracking, and targeting all sync properly.
Step 3: Create and Customise the Embed Form in Klaviyo
Creating a high-converting embedded form in Klaviyo takes just a few structured steps. Once created, it can be placed directly into your website’s HTML to passively collect subscribers without disrupting the user journey.
Step-by-Step: Creating a Klaviyo Embed Form
1. Access the Form Builder
Go to Signup Forms in your Klaviyo dashboard
Click Create Signup Form
2. Choose “Embed” as Your Form Type
Select the Embed option (not popup or flyout)
Name your form and assign it to the correct list
3. Customise Your Form Design: Use the drag-and-drop builder to:
Add fields like Email, SMS, First Name
Style fonts, buttons, and colours to match your brand
Toggle mobile preview to test responsiveness
Add GDPR/SMS consent checkboxes if needed
Adjust spacing, padding, and background visuals
4. Set Targeting and Behaviour Settings
While embedded forms are static, you can still control visibility by:
Device (mobile vs desktop)
Geography (e.g. show in EU only)
Page rules (show on specific URLs or blog templates)
5. Publish and Generate Embed Code
Click Publish to activate tracking and generate your embed snippet
Without publishing, the form won’t display—even if the code is added to your site
Source: Klaviyo
Step 4: Embed the Form on Your Platform (Shopify, WooCommerce, WordPress)
Once your Klaviyo embed form is published, you’ll receive a unique HTML snippet. You’ll need to manually insert this code into your website. The process varies slightly depending on your platform.
Shopify
There are two reliable ways to embed a Klaviyo form in Shopify using the updated editor:
1. Embed on a Specific Shopify Page
To add a form to a standalone page (like a landing page or “Join Our List” page):
Go to Online Store > Pages
Choose or create a page
In the Content box, click “Show HTML” (icon:
< >)Paste your published Klaviyo embed code
Save and preview
Important: This method works well for embedding forms on dedicated landing pages or blog-style content.
2. Add the Form to a Shopify Theme Section (e.g. Footer or Homepage)
For global visibility across your site:
Go to Online Store > Themes > Customise
Choose the Footer or any visible section
Add a Custom Liquid or Custom HTML block (depending on your theme)
Paste in the Klaviyo embed code
Save and check mobile/desktop rendering
Source: Klaviyo
If needed, you can still manually insert the code in theme.liquid or footer.liquid under Online Store > Themes > Edit Code, though the Theme Editor is preferred for no-code control.
WooCommerce / WordPress (Classic)
If you’re using WooCommerce or classic WordPress themes:
Go to Appearance > Widgets
Add a Custom HTML block in the Footer or Sidebar
Paste the embed code
Save and preview
Source: Klaviyo
For broader visibility, you can insert the embed code directly into footer.php in the Theme File Editor.
Page Builder Tip:
If you use Elementor, simply drag in an HTML widget and paste your Klaviyo embed snippet.
WordPress Block Editor (Gutenberg)
Open your desired post or page
Add a Custom HTML block
Paste the embed code
Use the Preview option, then publish
Important Note:
The Klaviyo WordPress plugin does not support embedded forms. You must use manual HTML insertion.
Step 5: Troubleshooting – Why Your Klaviyo Embed Form Isn’t Showing
Is your form missing from the page? Before you panic, run through this 7-step checklist to fix the most common visibility issues.
7-Step Embed Form Troubleshooting Checklist
1. Did You Publish the Form?
Your embed form won’t render until you click Publish inside Klaviyo.
2. Is Klaviyo.js Installed Correctly?
This script is essential for forms to display, track data, and trigger flows.
Confirm it’s placed before
</head>and loads site-wide.
3. Is the Embed Code Placed in a Visible Section?
Don’t place the code inside hidden containers (
display: none) or collapsed elements.Ideal locations: footer, sidebar, or above-the-fold content.
4. Are There Theme or Platform Conflicts?
Some Shopify themes delay rendering, and WordPress caching plugins can block fresh code.
Try these:
Clear your site cache
Test in incognito
Disable recently added apps or plugins
5. Are Your Display Settings Too Restrictive?
Check the form’s Targeting & Behaviour rules in Klaviyo.
Examples that may block visibility:
Device = desktop only (but you’re testing on mobile)
Location = EU only
URL = specific page slug not being tested
6. Is JavaScript Being Delayed by Your Theme?
On some platforms,
klaviyo.jsloads too late due to async settings.Solution: Move the script higher in the
<head>, or test with simpler themes.
7. Is Attribution Being Tracked Properly?
Use UTM parameters (e.g.
utm_source=footer_form) or hidden fields to segment sources.Helps confirm if the form is collecting data, even if not immediately visible.
Also, make sure your tracking parameters are consistent with your broader analytics setup—Klaviyo UTM Tracking can help you measure attribution and troubleshoot performance more effectively.
Step 6: Optimise Styling and Mobile Responsiveness
A high-converting form isn’t just functional—it needs to look great across devices and match your brand. Here’s how to optimise design, responsiveness, and layout.
Design for Responsiveness
Use full-width containers: Set your form’s container to
width: 100%so it adapts to mobile screens.Avoid fixed widths: Fixed-width elements can break layouts on smaller devices. Use flexible percentages or media queries in your CSS.
Use Klaviyo’s mobile preview: Toggle between desktop and mobile in the Klaviyo builder to catch layout issues before publishing.
Example CSS for mobile layout:
Match Your Brand
Use custom fonts and colours: Set fonts, button colours, and background to match your website branding.
Add a logo or icon: Reinforce your brand with subtle visual cues, especially in inline forms.
Write a consistent CTA: Ensure the form language aligns with your brand tone. E.g. "Join the club" vs. "Subscribe now."
Smart Placement Ideas
Footer: Great for passive sign-ups across all pages.
Blog Sidebar: Targets engaged readers.
Landing Page Inline: Perfect for gated content or promotions.
Strong visual design isn’t just for forms; it also boosts campaign performance. Our Email Template for Product Promotion guide shows how smart layout and styling can drive clicks and conversions.
Step 7: Stay Compliant and Map Consent Fields
Before collecting emails and phone numbers, review the Klaviyo SMS Compliance Guide to avoid costly mistakes and ensure you're following the latest opt-in laws and deliverability best practices.
Collecting Consent the Right Way
Use clear checkboxes: Separate email and SMS consent boxes (e.g.
“Yes, I want to receive emails.”
“Yes, I want to receive SMS updates.”)
Link to your Privacy Policy: Add “By signing up, you agree to our [Privacy Policy]” with a clickable link.
Use hidden fields for source tracking (optional): Add UTM fields (e.g.
utm_source=footer_form) for segmentation.
Map Fields to Klaviyo Profile Properties
Email consent →
email_consent = expressedSMS consent →
sms_consent = expressedCustom fields: If using a third-party form or custom setup, ensure data maps to standard Klaviyo properties via API or manual mapping.
Enable Double Opt-In (Recommended)
Improves list quality: Reduces fake signups and boosts engagement.
How to enable: Go to Lists > Settings > Subscribe & Preference Pages > toggle on “Send opt-in confirmation.”
Customise the experience: Add your brand voice, logo, and CTA to the confirmation page and email.
If you’re not yet using double opt-in, here are 10 Best Double Opt-In Email Examples to inspire how you confirm signups while keeping your list clean and compliant.
Step 8: Test and Optimise for Conversions
Once your embedded form is live, the next step is maximising how well it converts visitors into subscribers. Klaviyo provides analytics and testing tools that help you fine-tune for performance.
A/B Test to Find What Works
Focus on one variable at a time: This helps isolate the impact of changes and improves test reliability.
Test your CTA:
“Sign Up” vs “Get 10% Off”
“Subscribe for Early Access” vs “Join the Club”
Form length & fields:
Email only vs Email + SMS
Consider progressive profiling (capture more data later)
Placement tests:
Footer vs blog sidebar
Above vs below-the-fold on landing pages
Design variants:
Test different background colours, fonts, and button shapes
Try visual elements like icons or images for engagement
Timing and delay: While embedded forms are always visible, you can still test the context in which they appear (e.g. on which page, or after how much scroll).
Track the Right Metrics
Use Klaviyo’s built-in form analytics to measure:
Views: How many people see the form
Submits: How many people complete it
Conversion rate: % of views that lead to submissions
Device breakdown: Desktop vs mobile performance
List growth over time: See how each form contributes
Not sure where to start with testing? Our 10 Essential A/B Tests to Boost Email Conversions gives you high-impact ideas that you can apply to both forms and campaigns.
Embedded vs Popup vs Flyout – What to Use When?
Klaviyo offers various form types, including embedded, pop-up, and flyout, each with its own advantages. Selecting the appropriate one depends on your objective, page context, and user experience priorities.
Form Type Comparison
Combining embedded and pop-up forms can significantly increase opt-ins, especially when paired with 5 Proven Techniques for Increasing SMS Opt-Ins in Klaviyo.
FAQs
1. Can I track where subscribers came from using an embed form?
Yes, use UTM parameters or hidden fields to capture source information (such as utm_source or signup_location) for segmentation in Klaviyo.
2. Do embedded forms slow down site speed?
No, if implemented correctly. Klaviyo.js is lightweight and only loads once. Place the script before the
</head>tag for best performance.
3. Can I embed multiple forms on the same page?
Yes, but each must have a unique ID. Ensure targeting rules don’t conflict, and test responsiveness across devices.
4. Should I still use popups if I have an embed form?
Absolutely. Embed forms support passive growth, while popups create urgency. Running both strategically improves total conversions.
5. What’s the best CTA for an embedded form?
Keep it benefit-driven and aligned with intent. Examples: “Get 10% Off,” “Join Our Community,” or “Get Free Home Styling Tips.”
Conclusion
If your embedded form isn’t converting, it’s likely not styled well, placed right, or set up with the right targeting. But when done right, it becomes a powerful always-on tool to collect high-quality leads without disrupting your site.
Whether you’re using Klaviyo on Shopify, WooCommerce, or WordPress, this guide gives you the exact steps to build forms that grow your list and stay compliant. Don’t stop at embedded forms. To truly maximise signups and conversions across the funnel, explore our Klaviyo Customer Journey Guide to see how forms, flows, and data can all work together. Start simple, optimise often, and let the data guide you.
Key Takeaways
Install Klaviyo.js First: Without it, your form won’t render, track data, or trigger flows.
Use the ‘Embed’ Type for Always-On Forms: Best for footers, sidebars, and landing pages where popups feel intrusive.
Paste Code in the Right Spot: Avoid hidden divs or delayed loading sections, check using DevTools.
Style for Mobile and Match Your Brand: Mobile-first design and on-brand colours boost form trust and submission rates.
Add Consent Checkboxes for GDPR & SMS: Avoid deliverability issues by clearly collecting and mapping permission.
Test and Optimise Regularly: A/B test CTAs, placement, fields, and use Klaviyo analytics to improve.
Struggling to get your Klaviyo embedded forms to actually show up on your site?
From missing Klaviyo.js to theme conflicts, even small issues can cost you sign-ups. Let our experts audit your setup, fix visibility problems, and optimise your form for maximum conversions. Click here to book now.
Join our newsletter list
Sign up to get the most recent blog articles in your email every week.
Other Blogs
Other Blogs
Check our other project Blogs with useful insight and information for your businesses
Other Blogs
Other Blogs
Check our other project Blogs with useful insight and information for your businesses
Other Blogs
Other Blogs
Check our other project Blogs with useful insight and information for your businesses