How to Embed Forms on Your Website (Complete Guide for 2026)

Why Embedding Matters More Than Linking

Sending users to an external page to fill out a form is one of the fastest ways to lose them. Every redirect adds friction. Every new tab breaks the flow. Every unfamiliar domain triggers a moment of hesitation.

When a form lives directly on your page — inside your blog post, below your product description, or within your landing page — the user never leaves your environment. They stay in the context that motivated them to act. Conversion rates for embedded forms consistently outperform linked forms by 20-40%, and the reason is simple: you removed the gap between intent and action.

This guide covers everything you need to know about embedding forms, calculators, quizzes, and other interactive content on your website in 2026, regardless of what platform you use.

The Two Embedding Methods: iFrame vs JavaScript

Every embedding approach falls into one of two categories. Understanding the tradeoffs will save you hours of debugging.

Method 1: iFrame Embed

An iFrame (inline frame) loads external content inside a sandboxed rectangle on your page. It is the oldest and most universally supported embedding method on the web.

<iframe
  src="https://ninjadoc.com/s/your-form-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 8px;"
></iframe>

Advantages:

Works on virtually every platform and CMS
Complete style isolation — your CSS cannot break the form and the form cannot break your page
Simple to implement — paste one tag and you are done

Disadvantages:

Fixed height causes problems. If the form is taller than the iFrame, users see a scrollbar inside the frame, which feels broken
Dynamic content (conditional fields that appear/disappear) can make the form taller or shorter, but the iFrame does not resize
Mobile responsiveness requires careful height management
Some platforms strip iFrame tags for security reasons

Method 2: JavaScript Script Embed (Shadow DOM)

A JavaScript-based embed injects the form directly into your page, typically inside a Shadow DOM container. The Shadow DOM provides the same style isolation as an iFrame without the fixed-height constraint.

<div id="ninjadoc-form"></div>
<script
  src="https://ninjadoc.com/embed.js"
  data-experience="your-form-slug"
  data-target="ninjadoc-form"
  async
></script>

Advantages:

Auto-resizes as form content changes — no scrollbar issues
Shadow DOM isolates styles bidirectionally (your CSS does not leak in, form CSS does not leak out)
Feels native to your page because the content is part of the DOM, not a sandboxed rectangle
Better accessibility — screen readers can traverse the content naturally

Disadvantages:

Some restrictive platforms block external JavaScript
Requires the hosting platform to allow custom code blocks
Content Security Policy (CSP) headers on your site may need updating to allow the script source

Recommendation: Use the JavaScript/Shadow DOM method whenever your platform supports it. Fall back to iFrame only when script injection is not possible.

NinjaDoc provides both options. The default embed snippet uses the script approach with Shadow DOM isolation, but you can switch to iFrame in the embed settings if needed.

Platform-by-Platform Embedding Guide

WordPress

WordPress is the most common platform for embedding forms, and it supports both methods.

Block Editor (Gutenberg):

Edit the page or post where you want the form
Add a Custom HTML block (not a Paragraph or Text block)
Paste your embed snippet (script or iFrame)
Preview the page to verify it renders correctly

Classic Editor:

Switch to the Text tab (not Visual)
Paste the embed snippet at the desired location
Switch back to Visual to confirm placement, but do not edit the HTML in Visual mode — it may strip script tags

Common WordPress Issues:

Some security plugins (Wordfence, Sucuri) strip script tags. Add your embed source domain to the plugin's whitelist.
Caching plugins may serve a stale version of the page without the embed. Clear your cache after adding the embed.
Page builder plugins (Elementor, Divi, Beaver Builder) each have their own HTML/code widgets. Look for "Custom HTML," "Code," or "Raw HTML" in the widget library.

Webflow

Webflow has excellent support for custom embeds.

Open the Webflow Designer
Drag an Embed element to the canvas where you want the form
Paste the script embed snippet into the code editor
Save and publish

Webflow renders embeds in both the Designer preview and the published site. If the form does not appear in the Designer, check it on the published URL — Designer previews sometimes block external scripts.

Squarespace

Squarespace supports embeds through its Code Block.

Edit the page and click Add Block
Select Code from the block options
Paste your embed snippet
Toggle off "Display Source" to render the embed
Save and preview

Note: Squarespace Business plan or higher is required to use Code Blocks with JavaScript. The Personal plan only supports iFrame embeds.

Shopify

For Shopify storefronts:

Go to Online Store > Pages (or edit a specific page)
In the content editor, click Show HTML (the <> button)
Paste the embed snippet
Save

For product pages or custom sections, you will need to edit the Liquid template. Add the embed snippet inside the relevant section file in your theme code.

Wix

Wix supports embeds through its HTML iFrame widget.

In the Wix Editor, click Add > Embed Code > Custom Code
Paste your embed snippet
Resize the container as needed

Wix's custom code block supports both iFrame and script embeds, though script embeds may require adjusting the container's overflow settings.

Static HTML / Custom Sites

For any static HTML site or custom-built application, paste the embed snippet directly into your HTML where you want the form to appear. No special configuration needed.

For React, Next.js, or Vue applications, wrap the embed in a component that loads the script on mount:

import { useEffect, useRef } from 'react';

function NinjaDocEmbed({ slug }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://ninjadoc.com/embed.js';
    script.setAttribute('data-experience', slug);
    script.setAttribute('data-target', containerRef.current.id);
    script.async = true;
    containerRef.current.appendChild(script);

    return () => script.remove();
  }, [slug]);

  return <div id={`ninjadoc-${slug}`} ref={containerRef} />;
}

Common Pitfalls and How to Fix Them

CSS Conflicts

Symptom: The form looks wrong — fonts are different, spacing is off, buttons have unexpected styles.

Cause: Your site's global CSS is overriding the form's styles. This happens with iFrame-less embeds that do not use Shadow DOM.

Fix: Use an embed method that isolates styles. NinjaDoc's script embed uses Shadow DOM by default, which prevents CSS leakage in both directions. If you are using a different form tool that injects into the regular DOM, you may need to add more specific CSS selectors or wrap the form in an iFrame.

Responsive / Mobile Issues

Symptom: The form overflows its container, is too narrow on desktop, or has unusable inputs on mobile.

Cause: Fixed-width iFrames, missing viewport meta tags, or containers that constrain the form's width.

Fix: Always set iFrame width to 100%, not a fixed pixel value. Ensure your page has a proper viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">). Test on actual mobile devices, not just browser dev tools.

Content Security Policy (CSP) Blocks

Symptom: The form does not load and the browser console shows CSP errors.

Cause: Your site's CSP headers do not allow scripts or frames from the embed source domain.

Fix: Add the embed domain to your CSP directives:

Content-Security-Policy:
  script-src 'self' https://ninjadoc.com;
  frame-src 'self' https://ninjadoc.com;

Slow Loading

Symptom: The form takes several seconds to appear after the page loads.

Cause: The embed script is render-blocking, or the form itself has heavy assets.

Fix: Ensure the script tag has the async attribute. NinjaDoc's embed scripts are async by default. If the form still feels slow, consider lazy-loading the embed so it only initializes when the user scrolls it into view.

Form Submissions Not Tracking

Symptom: Users complete the form but submissions do not appear in your dashboard.

Cause: Ad blockers or privacy extensions are blocking the submission request.

Fix: This is a rare edge case. The majority of users do not run aggressive ad blockers that block form submissions. If it is a concern, use the iFrame method — most ad blockers do not block requests originating from within an iFrame.

White-Label Embedding

If you are embedding forms for clients or want the form to feel completely native to your site, white-label embedding removes all third-party branding.

With NinjaDoc's Plus and Pro plans, you can:

Remove the "Powered by NinjaDoc" footer
Apply custom fonts that match your site
Use your own domain for the embed URL (via CNAME)
Match the form's color scheme exactly to your brand

White-label embedding is particularly important for agencies building forms for clients and SaaS companies embedding calculators in their product. Nobody wants a competitor's branding on their page.

Embedding Beyond Forms

The same embedding techniques work for all interactive content, not just forms. You can embed:

Calculators — Build and embed ROI, pricing, and savings calculators directly into landing pages and blog posts
Quizzes — Embed lead generation quizzes and knowledge tests into content pages
Assessments — Embed scored assessments into resource centers and consulting pages

For a detailed walkthrough on embedding calculators specifically, see our guide on how to embed a calculator on your website.

Best Practices for Embedded Forms

Placement

Put the form where intent is highest. On a landing page, that is below the headline and value proposition but above the fold if possible. In a blog post, place it after you have established the problem and your credibility — typically after the second or third section.

Context

Always add a sentence or headline above the embed that tells the user what to expect: "Fill out this quick form to get your custom quote" or "Calculate your potential savings below." An unexplained form appearing in the middle of a page feels jarring.

Loading State

NinjaDoc's embed shows a subtle loading skeleton while the form initializes. If you are building custom embed wrappers, always include a loading state so the user sees something immediately rather than a blank gap.

Mobile Testing

Test every embed on a real phone. Browser dev tools simulate screen sizes but miss real-world issues like touch target sizes, virtual keyboard behavior, and scroll interference. Open your page on an actual iPhone and Android device before going live.

Performance Monitoring

After embedding, check your page's Core Web Vitals. The embed should not significantly impact Largest Contentful Paint (LCP) or Cumulative Layout Shift (CLS). Async-loaded embeds that reserve space with a min-height on the container div will prevent layout shift.

Building the Form to Embed

If you do not have a form yet, NinjaDoc's AI-powered form builder lets you create one from a plain English description. Describe the fields you need, the logic you want, and the results page — and NinjaDoc generates the entire experience ready to embed.

Browse the template library for pre-built forms, calculators, and quizzes you can customize and embed in minutes.

Ready to Embed Your First Form?

NinjaDoc generates your form, handles all embed complexity, and gives you clean code that works on any website. Shadow DOM isolation, auto-resizing, responsive design, and white-label options are all built in.

Start building for free →