Do Klaviyo embedded forms slow down site speed?

No, if implemented correctly. Klaviyo.js is lightweight and only loads once per page. Place the script before the closing head tag for best performance and minimal render blocking.

Klaviyo Embed Form: 8 Steps to Add High-Converting Forms to Your Site (2025)

List Growth · Lead Capture

Klaviyo Embed Form: 8 Steps to Add High-Converting Forms to Your Site

10 min read By Sendora Team Jul 10, 2025

Aggressive popups can turn visitors away before they subscribe. Klaviyo embed forms offer a quieter, always-visible alternative — ideal for footers, sidebars, blog content, and landing pages where passive lead capture works best. They don’t interrupt. They build trust and collect high-quality subscribers without asking permission to appear on screen.

What This Guide Covers

What a Klaviyo embed form is — and when to use it vs popups or flyouts
How to install klaviyo.js correctly on Shopify, WooCommerce, and WordPress
Step-by-step form creation, targeting, and embed code generation in Klaviyo
Platform-specific embedding — Shopify Theme Editor, WooCommerce widgets, Gutenberg
7-step troubleshooting checklist for forms that aren’t showing
Mobile optimisation, brand styling, and compliance consent fields
A/B testing CTAs, placements, and fields to improve conversion rate

Step One

Understand What a Klaviyo Embed Form Is

A Klaviyo embed form is a static signup form placed directly into your site’s HTML. Unlike popups or flyouts, it stays visible at all times without triggering based on behaviour — making it ideal for passive, non-intrusive lead generation that doesn’t disrupt the browsing experience.

When Should You Use a Klaviyo Embed Form?

📰 Blog Sidebars

Readers already engaged with your content are more likely to subscribe. Sidebar placement is visible throughout the read without interrupting it.

🦶 Footer Areas

A universal placement across all pages — captures casual opt-ins from users who’ve reached the end of content and are still exploring.

🎯 Landing Pages

Especially for gated content, resource downloads, or waitlist sign-ups where the embed form is the main conversion goal of the page.

🛍️ Product Pages

Collect emails passively below product details — captures intent without interrupting the product evaluation or add-to-cart decision.

✅ Post-Purchase Pages

Request SMS consent or review sign-ups on the /thank-you page — high-trust moment with a customer who just completed a purchase.

📲 Content Hubs

Embed in blog index pages, category pages, or resource libraries where readers scan multiple pieces of content and are primed to subscribe.

Attribution Tip Combine embedded forms with UTM parameter tracking — e.g. utm_source=newsletter_footer — for better list segmentation and source-based personalisation in Klaviyo flows.

Step Two

Install klaviyo.js on Your Site

To render any Klaviyo form — embed, popup, or flyout — you must install klaviyo.js on your site. Without it, your forms won’t appear and data won’t sync to Klaviyo. This script powers form display, behaviour targeting, visitor tracking, and flow triggers.

Add before the closing </head> tag on every page
<script async type="text/javascript"
  src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY">
</script>

Shopify Preferred: Klaviyo App

The easiest method is installing the Klaviyo for Shopify app from the App Store — it adds klaviyo.js automatically across all pages with no code changes needed.

Manual method: Go to Online Store → Themes → Edit Code → theme.liquid and paste the snippet before the closing </head> tag.

WooCommerce

Add the snippet manually to header.php, or use a plugin like Insert Headers and Footers to paste it site-wide without editing theme files. Verify it loads across all relevant pages where your forms appear.

WordPress (non-WooCommerce)

Use Insert Headers and Footers or paste the snippet into header.php via Appearance → Theme File Editor. Alternatively, deploy via Google Tag Manager if you’re managing scripts across multiple properties.

Confirm klaviyo.js Is Loading

Open browser DevTools (F12) → Sources tab → confirm klaviyo.js appears in the <head>
Or use the Klaviyo Chrome Extension to detect active scripts and onsite forms
In Klaviyo: Settings → Onsite → Forms & Personalisation to confirm the script is active on your domain

Step Three

Create and Customise the Embed Form in Klaviyo

Go to Signup Forms in your Klaviyo dashboard and click Create Signup Form.

Choose “Embed” as your form type — not popup or flyout. Name the form and assign it to the correct list.

Design your form using the drag-and-drop builder — add email, SMS, first name fields; customise fonts, button colours, and spacing; toggle mobile preview; add GDPR/SMS consent checkboxes if collecting phone numbers.

Set targeting and behaviour rules — control visibility by device (mobile vs desktop), geography (e.g. EU only), or page URL rules.

Click Publish to activate tracking and generate your embed snippet. Without publishing, the form won’t display — even if the code is on your site.

Klaviyo form builder — select Embed as form type, name it, assign to a list, then customise design and publish Klaviyo Signup Form Setup →

Klaviyo confirmation window showing a published embed form with Live status and the HTML embed code snippet ready to copy and paste into any website

After publishing — copy the embed code snippet and paste it into your website’s HTML where you want the form to appear Klaviyo Embed Code Guide →

Step Four

Embed the Form on Your Platform

Once your form is published, you’ll receive a unique HTML snippet. Here’s how to add it on each platform:

Shopify — Two Methods Recommended: Theme Editor

Method 1 — Specific Page: Go to Online Store → Pages → choose or create a page → click “Show HTML” (icon: < >) in the content box → paste the Klaviyo embed code → Save. Best for dedicated landing pages or “Join Our List” pages.

Method 2 — Theme Section (Footer / Homepage): Go to Online Store → Themes → Customise → select Footer or any section → Add a Custom Liquid or Custom HTML block → paste the embed code → Save. Use for global visibility across all pages.

Shopify theme editor showing Customise button and desktop preview of active theme with section editor for adding a Klaviyo embedded form block to the footer

Shopify Theme Editor — add a Custom Liquid or Custom HTML block in the footer section and paste the Klaviyo embed code Shopify Embed Guide →

WooCommerce / WordPress Classic

Go to Appearance → Widgets → add a Custom HTML block in the Footer or Sidebar widget area → paste the embed code → Save.

For broader visibility, insert the code directly into footer.php in the Theme File Editor. If using Elementor, drag in an HTML widget and paste the Klaviyo snippet.

Important: The Klaviyo WordPress plugin does not support embedded forms — use manual HTML insertion only.

WordPress Block Editor (Gutenberg)

Open the desired post or page → add a Custom HTML block → paste the embed code → Preview to confirm rendering → Publish.

🛍️

→

Step Five

Troubleshoot — Why Your Klaviyo Embed Form Isn’t Showing

If your form is missing from the page, work through this checklist before rebuilding. Most visibility issues have a fast fix.

Did you publish the form?

Your embed form won’t render until you click Publish inside Klaviyo. Even with the code on your site, an unpublished form shows nothing.

Is klaviyo.js installed correctly?

Confirm it’s placed before the closing </head> tag and loads site-wide. Open DevTools → Network tab and filter for “klaviyo” to confirm it’s loading.

Is the embed code in a visible section?

Don’t place the code inside a container with display: none or inside collapsed elements. Use DevTools → Elements to check if the form HTML is present but hidden.

Theme or caching conflict?

Clear your site cache and test in incognito mode. Disable recently added apps or plugins one by one to isolate conflicts. Caching plugins often serve old versions of pages that don’t include new embed code.

Are display settings too restrictive?

Check the form’s Targeting rules in Klaviyo. Examples that block visibility: Device = desktop only (testing on mobile), Location = EU only, or URL = specific slug not being tested.

JavaScript loading too late?

On some platforms, klaviyo.js loads after the form tries to render. Move the script higher in the <head> or test with a simpler theme to rule out async loading conflicts.

Is attribution tracking working?

Add utm_source=footer_form as a UTM parameter or hidden field. If Klaviyo is recording submissions but the form isn’t rendering, the issue is JavaScript — not the form itself.

Step Six

Optimise Styling and Mobile Responsiveness

A form that looks broken on mobile or feels off-brand loses conversions before the visitor has a chance to decide. Mobile optimisation and brand consistency are the two highest-impact design improvements you can make.

📱 Full-Width Containers

Set your form container to width: 100% so it adapts to any screen size. Avoid fixed pixel widths — they break layouts on phones and tablets.

🔍 Use Mobile Preview

Toggle Klaviyo’s mobile preview mode before publishing. Check field spacing, button size, CTA visibility, and text size — common issues aren’t visible in desktop preview.

🎨 Match Your Brand

Set fonts (Google Fonts supported), button colours, and background to match your site. Inconsistent styling reduces trust — especially for first-time visitors.

✍️ Write a Brand-Aligned CTA

Replace generic “Sign Up” with something specific to your brand: “Join the club”, “Get the weekly edit”, “Unlock early access.” Tone matters as much as the offer.

Example Responsive CSS for Mobile

Add to your theme’s CSS for mobile-optimised form layout
/* Klaviyo embed form — mobile responsive */
.klaviyo-form-wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

@media (max-width: 480px) {
  .klaviyo-form-wrapper {
    font-size: 14px;
    padding: 12px;
  }
  .klaviyo-form-wrapper input,
  .klaviyo-form-wrapper button {
    width: 100%;
    min-height: 48px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

Step Seven

Stay Compliant and Map Consent Fields

Before collecting emails and phone numbers, you need the right consent mechanisms in place. GDPR, CCPA, and TCPA all have specific requirements around how consent is collected and stored — and Klaviyo’s form builder supports all of them when configured correctly.

⚖️

→

Step Eight

Test and Optimise for Conversions

Once your embedded form is live, continuous testing is what separates a 2% submission rate from an 8% one on the same traffic. Use Klaviyo’s form analytics and A/B testing to identify and scale what actually works.

🎯 CTA Text

Test “Sign Up” vs “Get 10% Off” vs “Join the Club.” Benefit-driven CTAs consistently outperform generic verbs — but test for your specific audience and offer.

📋 Form Length

Email only vs Email + First Name vs Email + SMS. More fields = richer data but lower conversion. Email-only wins on volume; multi-field wins on segment quality.

📍 Placement

Footer vs blog sidebar vs above-the-fold on landing pages. The same form in different positions can deliver 3x the submissions depending on page context and traffic intent.

🎨 Design Variants

Test background colours, button shapes, or a visual element (icon, illustration). Subtle design changes often lift trust and submission rates without changing the offer.

Key Metrics to Track in Klaviyo Form Analytics

Views: How many visitors saw the form — confirms it’s rendering and visible
Submits: How many completed the form — your primary conversion signal
View-to-submit rate: Your conversion rate — aim for 4–10% for embedded forms
Device breakdown: Desktop vs mobile performance — most optimisation opportunities are on mobile
List growth over time: How each form contributes to overall subscriber growth

Embedded vs Popup vs Flyout — When to Use Each

Form Type	Best For	Pros	Cons
Embed	Footers, sidebars, landing pages, blog inline	Always visible, non-intrusive, high trust, passive growth	Lower urgency, no triggers, relies on placement quality
Popup	First-time visitors, exit-intent, discount capture	High visibility, urgency-driven, powerful with the right offer	Can annoy users, affects UX if timed or targeted poorly
Flyout	Scroll-based soft capture, blog engagement, re-engagement	Less intrusive than popup, flexible trigger timing, subtle	Lower urgency than popup, may be missed by fast scrollers

📋

→

Frequently Asked Questions About Klaviyo Embed Forms

Can I track where subscribers came from using a Klaviyo embed form? +

Yes. Use UTM parameters or hidden fields to capture source data like utm_source or signup_location in Klaviyo profiles. This enables source-based segmentation and lets you trigger different welcome flows based on where someone signed up.

Do Klaviyo embedded forms slow down my site? +

No, if implemented correctly. Klaviyo.js is lightweight and loads only once per page. Place the script with the async attribute before the closing head tag for best performance and minimal render blocking impact.

Can I embed multiple Klaviyo forms on the same page? +

Yes, but each must have a unique form ID. Ensure targeting rules don’t conflict with each other, and test responsiveness across desktop and mobile before publishing. Multiple forms on one page can confuse visitors if not positioned and differentiated clearly.

Should I still use popups if I have an embed form? +

Yes — they serve different purposes. Embedded forms support passive, always-on list growth throughout the browsing session. Popups create urgency at a specific moment. Running both strategically is the highest-performing approach for total opt-in conversions.

Why is my Klaviyo embed form not showing on my site? +

The most common causes: the form hasn’t been published in Klaviyo, klaviyo.js is missing or not loading before the form renders, the embed code is inside a hidden container, targeting rules are too restrictive, or a caching plugin is serving a stale version of the page. Work through the 7-step checklist in Step 5.

Key Takeaways

Install klaviyo.js first: Without it, your form won’t render, track submissions, or trigger flows — no exceptions.
Use the Embed type for always-on forms: Best for footers, sidebars, and landing pages where popups feel intrusive or interrupt the browsing experience.
Paste code in the right spot: Avoid hidden divs, collapsed sections, or async-loaded areas. Verify with DevTools before assuming there’s a form issue.
Style for mobile and match your brand: Mobile-first design and on-brand CTAs boost submission rates — generic forms lose trust before they collect a single email.
Add consent checkboxes for GDPR and SMS: Separate, unchecked checkboxes mapped to Klaviyo profile properties keep you legally compliant and deliverability-safe.
Test and optimise regularly: A/B test CTAs, placement, field count, and design variants using Klaviyo’s analytics to keep improving conversion rate over time.