How to Embed Forms on Any Website: The Complete Guide

You've built a beautiful form. Now you need to put it on your website. Sounds simple, but the "how" depends on your website platform, your design goals, and the user experience you want to create.

In this guide, we'll cover every major embedding method — when to use each one, and step-by-step instructions for the most popular platforms.

Method 1: Inline Iframe Embed

The simplest and most universal method. An iframe loads your form inside a rectangular area on the page. It works on literally any website that supports HTML.

• Pros: Works everywhere, easy to implement, isolated from host page CSS
• Cons: Fixed height can cause scrolling issues, can feel disconnected from the page
• Best for: Landing pages, dedicated form pages, simple blog embeds

Usage: paste the iframe snippet into your HTML where you want the form to appear. Most form builders provide a copy-paste snippet. Set a reasonable height (600-800px works for most forms) or use a responsive resize script.

Method 2: Popup / Modal Embed

A popup embed triggers the form in a fullscreen or centered modal overlay when the user clicks a button. This keeps your page clean and creates a focused form-filling experience.

• Pros: Doesn't take up page space, focused experience, great for CTAs
• Cons: Requires a trigger action (button click), can feel intrusive if auto-triggered
• Best for: "Contact Us" buttons, newsletter signups, feedback triggers

Method 3: Script Embed (Lightweight)

Some form builders offer a lightweight JavaScript snippet that injects the form directly into the page DOM. This avoids the isolation issues of iframes and allows the form to inherit some of the host page's styles.

• Pros: Smooth integration, no iframe scrolling issues, smallest footprint
• Cons: May conflict with host page CSS, requires JavaScript enabled
• Best for: SaaS websites, React/Next.js apps, custom web applications

Platform-Specific Instructions

WordPress: Use the Custom HTML block (Gutenberg) or a shortcode plugin. Paste your iframe or script embed code. For popups, add the popup script in your theme's header via Appearance → Header Scripts, then use a button with the `data-typerson-popup` attribute.

Webflow: Add an Embed element from the Add panel and paste your embed code. For responsive iframes, set the width to 100% and height to a fixed value in pixels.

Squarespace: Use a Code Block (available on Business plan and above) and paste your embed snippet. Note that Squarespace strips some JavaScript, so iframe embeds tend to be more reliable.

React / Next.js: You can embed via iframe using a standard `<iframe>` component, or integrate the form directly using the API to fetch questions and build a custom renderer. For popup mode, use a modal component and load the form URL inside it.

Tips for a Great Embedded Experience

1. 1Always set a reasonable iframe height — too short causes double scrollbars, too tall wastes space
2. 2Match your form's theme to your website's branding for a seamless look
3. 3Test on mobile — embedded forms must be responsive
4. 4Use popup mode for secondary forms (like feedback) and inline for primary forms (like lead capture)
5. 5Add a loading state so users don't see a blank space while the form loads

Embedding with Typerson

Typerson provides all three embedding methods — iframe, popup, and script — with ready-to-copy code snippets. The share dialog shows you the exact code for each method, and the forms are responsive by default. The script embed is under 5KB and loads asynchronously, so it won't slow down your page.