How to Embed Forms on Any Website: HTML, WordPress, React, and More

Embedding a form on a website means placing a form built in an external tool directly into a web page so visitors can fill it out without leaving the site. The embed typically uses an iframe tag, a JavaScript snippet, or a platform-specific component that loads the form inside your page layout.

Every contact page, landing page, and lead generation funnel needs a form. Building forms from scratch with HTML and a backend is time-consuming and introduces security concerns around validation, spam prevention, and data storage. Form builders like AntForms handle the backend, but you still need to get the form onto your website.

According to a 2024 HubSpot State of Marketing report, 74% of marketers use web forms as their primary lead collection method (HubSpot, 2024). A Formstack survey found that organizations using embedded forms see 20% higher completion rates compared to redirect links (Formstack, 2023). We embed AntForms on dozens of customer websites every month, and the platform differences trip people up more than the embed code itself.

WordPress handles things differently than React. Webflow has its own embed system. Squarespace restricts JavaScript on certain plans. Every major platform is covered below with copy-paste instructions that work in 2026.

Choosing the right embed method

Your embed method depends on your website platform, responsive sizing needs, and whether you want inline forms, popups, or slide-in panels.

Three primary embed methods exist:

1. Iframe embed. The most universal option. Works on any platform that accepts HTML. The form loads in a sandboxed frame.
2. JavaScript embed. A script tag that injects the form directly into your page DOM. Supports auto-resizing and deeper integration with your page.
3. Platform-specific integration. WordPress plugins, React components, or CMS-native embed blocks designed for specific form builders.

Each method has tradeoffs:

For most use cases, iframe is the right starting point. It works everywhere, requires no dependencies, and isolates the form from your page’s CSS (which prevents style conflicts). Switch to JavaScript embed when you need auto-resizing or popup triggers.

How to embed a form using HTML iframe

An iframe embed works on any website that allows custom HTML, requiring only a single HTML tag with your form URL and zero dependencies.

The basic iframe embed code:

<iframe
  src="https://app.antforms.com/f/your-form-id"
  width="100%"
  height="600"
  frameborder="0"
  loading="lazy"
  title="Contact form"
  style="border: none; max-width: 700px; margin: 0 auto; display: block;"
></iframe>

Key attributes:

• src: Your form’s public URL from AntForms or any form builder.
• width=“100%”: Makes the form fill its container, which is essential for mobile-friendly forms.
• height: Set this to match your form’s length. A form with 5 fields needs roughly 500 to 700 pixels. A longer form needs 800 to 1200 pixels.
• loading=“lazy”: Defers loading until the iframe scrolls into view, preserving your page’s initial load speed.
• title: Required for accessibility. Screen readers use this to describe the iframe’s purpose.
• frameborder=“0” and style=“border: none”: Removes the default browser border around iframes.

Setting the right height

The most common iframe embed problem is a form that either gets cut off or shows excessive whitespace below the submit button. Two approaches:

1. Fixed height. Measure your form’s height by opening it in a browser, inspecting the form container, and reading the height value. Add 50 to 100 pixels as a buffer. This works for forms that do not change height (no conditional logic, no expandable sections).

2. Dynamic height with postMessage. AntForms and other modern form builders send a postMessage event from the iframe to the parent page when the form height changes. Add a listener on your page:

<script>
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'antforms-resize') {
      document.getElementById('my-form-iframe').style.height = e.data.height + 'px';
    }
  });
</script>

This handles conditional logic branches that add or remove fields, expanding text areas, and validation error messages that push content down.

Cross-origin considerations

Iframes are sandboxed by the browser’s same-origin policy. Your page’s CSS and JavaScript cannot access the form inside the iframe, and vice versa. This is a security advantage: the form builder handles validation and data submission in its own isolated context.

The tradeoff is that you cannot change form colors or fonts from your page’s stylesheet (use the form builder’s theme settings instead), and analytics tracking requires the form builder to fire its own events. AntForms sends submission events via postMessage for this purpose.

Embedding forms in WordPress

WordPress supports iframe embeds through Custom HTML blocks in Gutenberg without requiring any plugin installation or theme modification.

Method 1: Custom HTML block (no plugin needed)

1. Open the page or post where you want the form.
2. Click the ”+” block inserter and search for “Custom HTML.”
3. Paste your iframe embed code.
4. Click “Preview” to verify the form renders correctly.
5. Publish or update the page.

This method works on WordPress.com (Business plan and above) and all self-hosted WordPress.org installations. No WordPress plugin is needed.

Method 2: WordPress shortcode

Some form builders register a shortcode during plugin installation. With a shortcode, you add the form like this:

[antforms id="your-form-id"]

Shortcodes are simpler than raw HTML and work in both the classic editor and Gutenberg. The plugin handles responsive sizing and theme integration.

Method 3: WordPress plugin with Gutenberg block

Dedicated form builder plugins add a native Gutenberg block. You search for “AntForms” in the block inserter, select your form from a dropdown, and the block renders a preview in the editor. This is the cleanest WordPress integration because the form inherits your theme’s container width and spacing.

For WordPress sites focused on lead generation, combine the embedded form with a high-converting form design that minimizes fields and uses clear calls to action.

Embedding forms in React and Next.js

React applications embed forms using an iframe component or by loading the JavaScript embed script inside a useEffect hook for auto-resize support.

Iframe component

function FormEmbed() {
  return (
    <iframe
      src="https://app.antforms.com/f/your-form-id"
      width="100%"
      height="600"
      frameBorder="0"
      loading="lazy"
      title="Contact form"
      style={{ border: 'none', maxWidth: '700px', margin: '0 auto', display: 'block' }}
    />
  );
}

This is the simplest approach. The iframe is a standard HTML element, so React renders it without any special configuration.

JavaScript embed with useEffect

For auto-resizing or popup forms, load the embed script dynamically:

import { useEffect, useRef } from 'react';

function FormEmbed({ formId }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.antforms.com/embed.js';
    script.async = true;
    script.dataset.formId = formId;
    containerRef.current.appendChild(script);

    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, [formId]);

  return <div ref={containerRef} />;
}

The cleanup function in the useEffect return prevents memory leaks when the component unmounts or the formId prop changes.

Next.js considerations

The useEffect approach works with Next.js SSR because useEffect only executes in the browser. For Next.js App Router, mark the component with 'use client' at the top of the file. Add the form builder’s domain to your CSP frame-src directive to avoid violations.

Embedding forms in Webflow

Webflow’s Embed element accepts raw HTML, making iframe embeds straightforward with no custom code outside the element itself.

Steps:

1. Open the Webflow Designer and navigate to your page.
2. Drag an “Embed” element from the Components panel onto your page.
3. Paste the iframe embed code.
4. Save and publish.

Webflow’s responsive breakpoints do not automatically resize iframe content, so set the iframe width to 100% and test at each breakpoint (desktop, tablet, landscape mobile, portrait mobile). If the form looks cramped on mobile, increase the iframe height for smaller breakpoints using Webflow’s conditional visibility or custom CSS.

For Webflow sites using contact form designs that convert, place the embedded form above the fold on landing pages and keep surrounding content minimal.

Embedding forms in Squarespace and Wix

Both platforms support code injection blocks. In Squarespace (Business plan and above), add a “Code” block, paste the iframe embed code, and toggle off “Display Source.” In Wix, click “Add,” then “Embed Code” and “Custom Embeds,” paste the iframe code, and resize the element to fit your form. Set width to “Stretch” for full-width forms on Wix.

Popup and slide-in form embeds

Popup forms appear in a modal overlay triggered by a button click, scroll depth, or time delay, keeping the page clean until the visitor engages.

Popup and slide-in forms are useful for:

• Lead magnets. Visitor clicks “Download the guide” and a form appears in a modal.
• Exit intent. A form slides in when the cursor moves toward the browser’s close button.
• Floating buttons. A persistent “Contact us” button in the corner opens a form panel.

To build a popup, create a button that toggles a fixed-position overlay containing your form iframe. The overlay needs a semi-transparent backdrop, a close button, and scroll handling for mobile viewports.

AntForms offers a popup embed mode that handles the modal, backdrop, close button, and mobile responsiveness automatically. Add a single script tag with a data-mode="popup" attribute, and the form builder handles the rest.

Responsive sizing and mobile optimization

Setting iframe width to 100% and managing height dynamically ensures embedded forms render correctly across every screen size without scrollbars.

Three rules for responsive embedded forms. First, always set width to 100% and constrain the container with max-width (typically 700px). Second, use dynamic height via postMessage resizing, or set a generous fixed height that accommodates all conditional fields and validation errors. Third, add centering and padding to the iframe’s parent container.

Test every embedded form on a real phone, not just browser DevTools. Touch targets, keyboard behavior (the virtual keyboard pushes content up on mobile), and scroll performance inside iframes can differ from desktop simulations. Mobile-friendly form design principles apply to embedded forms just as much as standalone ones.

AntForms embed options

AntForms provides three embed methods: iframe code, JavaScript snippet with auto-resize, and a direct link for sharing without embedding.

We designed the embed system after testing on 30+ website platforms, so the generated code works without modification on WordPress, Webflow, Squarespace, React, and static HTML sites.

When you publish a form in AntForms, the share panel offers:

1. Direct link. A standalone URL for sharing via email, social media, or QR code.
2. Iframe embed. A pre-configured iframe tag with your form URL, responsive width, and recommended height.
3. JavaScript embed. A script tag that injects the form into your page with auto-resize, popup mode, and event callbacks.

The JavaScript embed supports options via data attributes:

• data-mode="inline" (default): renders the form at the script tag’s location.
• data-mode="popup": renders a button that opens the form in a modal.
• data-mode="slider": renders a floating tab that slides in a form panel from the right edge.

All three modes are responsive, support conditional logic, and fire submission events via postMessage for analytics tracking.

For developers building custom integrations, the AntForms free form builder includes the embed feature on all plans, including free.

Troubleshooting common embed issues

Most embed problems fall into four categories, and each has a straightforward fix you can apply without touching server configuration.

Form cut off at the bottom: increase the iframe height or enable dynamic postMessage resizing. Blank white space: verify the form URL is correct and the form is published, not in draft mode. Browser blocks the iframe: add the form builder’s domain to your Content Security Policy’s frame-src directive. Styling mismatch: iframe content is isolated from your page’s CSS, so customize appearance inside the form builder’s theme settings.

If your form collects files, verify the file upload field works inside the iframe by testing an actual upload on the live page. Some CSP configurations block file requests from sandboxed frames. For forms using conditional logic, test each branch to confirm dynamic height adjustments fire correctly after the iframe loads.

Limitations to know

Iframe embeds cannot inherit your website’s CSS due to cross-origin isolation, so styling must be done inside the form builder. JavaScript embeds that inject into the DOM can conflict with your page’s existing scripts or CSS frameworks in rare cases. Some website platforms (Squarespace Personal, certain Wix free plans) restrict custom code blocks, preventing any embed method. Auto-resize via postMessage depends on the form builder supporting it: not all builders send resize events. Popup and slide-in forms add JavaScript to your page, which can slightly increase page weight and may conflict with other modal libraries. Finally, ad blockers occasionally flag third-party iframes, though form builder domains are rarely on blocklists.

Key takeaways

• Iframe embed is the most universal method. It works on any platform that accepts custom HTML and isolates the form from your page’s code.
• JavaScript embed adds auto-resize, popup modes, and event callbacks at the cost of slightly more complexity.
• WordPress supports iframe embeds via Custom HTML blocks without any plugin. Dedicated plugins add Gutenberg blocks and shortcodes.
• React and Next.js applications use iframe components or useEffect-based script loading. Mark components as client-side in Next.js App Router.
• Webflow, Squarespace, and Wix all support iframe embeds through their respective code or embed blocks.
• Set iframe width to 100% always. Manage height with dynamic postMessage resizing or a generous fixed value.
• Popup and slide-in embeds keep pages clean and work well for lead magnets, exit intent, and floating contact buttons.
• Test every embedded form on a real mobile device before publishing.

Embed your form today

AntForms gives you iframe, JavaScript, and popup embed options on every plan, including free. Build your form, copy the embed code, and add it to your website in under five minutes.

Create your embeddable form on AntForms