How to embed a form on a website: the code, the platforms and the fixes

Under the hood, almost every form embed is the same thing: an iframe, a small window in your page that loads the form from the builder's servers. You copy a pointer to the form, not the form itself, which is why an embed keeps working when you edit the form, and why nearly every embed problem comes down to the window: where it sits, how big it is, and whether your site lets it open.

The examples below use the snippet from Upform's Share tab, but the steps apply to any iframe embed from any builder.

What it means to embed a form

To embed a form is to show a form hosted by a form builder inside a page on your own website. The visitor stays on your URL and answers inside the frame, and the response goes to the form builder, which still runs its spam checks (Upform uses invisible reCAPTCHA v3, covered on the security page).

There are three common ways to put a form in front of people, and each suits a different place:

Some builders also sell script-based popups and slide-in panels. Upform has neither: it gives you the iframe, the link and the email button, with no JavaScript added to your site.

Get the embed code

In Upform the code lives on the Share tab of the form builder.

1. Publish the form. Forms stay private until published, so a draft cannot leak onto a live page.

2. Open the Share tab. It holds three cards: Form link, Embed on your website, and Embed in email.

3. Set the height. The Height (px) field starts at 600, and the snippet updates as you type.

4. Copy the snippet and paste it into your page, as described for each platform below.

<iframe src="https://app.upform.com/preview/client-onboarding" width="100%" height="600" frameborder="0" style="border:none;border-radius:8px;"></iframe>Copy

The snippet holds the form's address, not its questions. Edit the form, press Save, and every page that embeds it shows the new version on its next load. The only setting that lives in your page is the height.

What each part of the embed code does

Here is the snippet as the Share tab writes it, with your form's ID at the end of the address:

<iframe src="https://app.upform.com/preview/your-form-id" width="100%" height="600" frameborder="0" style="border:none;border-radius:8px;"></iframe>

Two attributes are worth adding by hand:

• title. Screen readers announce a frame by its title. Without one, people hear little more than "frame". Name it after what the form does, such as "Contact form" or "Event registration". The form accessibility guide covers the rest of what makes a form usable without a mouse or a screen.
• loading="lazy". The browser waits to load the frame until the visitor scrolls near it, which keeps the page fast. It also keeps your numbers honest, because Upform counts a view when the form loads.

With both added, the snippet looks like this:

<iframe
  src="https://app.upform.com/preview/your-form-id"
  title="Contact form"
  width="100%"
  height="600"
  loading="lazy"
  frameborder="0"
  style="border:none;border-radius:8px;"></iframe>

Where to paste the snippet on your platform

Any page that accepts raw HTML can hold the snippet. Menus change between versions, so the steps below stick to the parts that stay stable. On every platform, paste into an element made for code, never a text block, which prints the code as text or removes it.

WordPress

In the block editor, add a Custom HTML block where the form should go and paste the snippet. The block has a preview option, so you can see the frame before you update the page. Page builders offer the same thing as an HTML or code widget, and in the classic editor you paste into the Text tab rather than the Visual one.

If the iframe vanishes when you save, WordPress is filtering it. Only accounts allowed to post unfiltered HTML can save iframes: administrators and editors on a standard install, and only super admins on a multisite network. Some security plugins strip iframes for everyone until you allow them.

Webflow

Add a Code Embed element, Webflow's element for custom code (older versions of the Designer call it Embed), paste the snippet into its code editor and save. Place it inside a section or div that already has the width you want, then judge the size on the published or staging site rather than in the Designer.

Squarespace

Edit the page, add a Code block where the form belongs and paste the snippet. Code blocks are not included on every Squarespace plan. If you cannot find one, check your plan, or use a button that links to the form instead.

Wix

Add an Embed HTML element, which sits under Embed Code in the editor's Add panel, choose to enter code, paste the snippet and save it. Wix runs your code inside a frame of its own, so the element's size on the canvas is what visitors see: make it at least as tall as the snippet's height. Then check the mobile view, which Wix arranges separately.

Shopify

For a page of its own, such as Contact or Wholesale inquiries, open the page in your Shopify admin, switch the content editor to HTML with its Show HTML button and paste the snippet. To place the form inside a theme template, like the home page or a product page, add a Custom Liquid section or block in the theme editor and paste the snippet there. Custom Liquid comes with Online Store 2.0 themes.

Plain HTML and frameworks

Paste the snippet into the body of the page, inside the container that sets the column width. Nothing goes in the head and there is no script to load. In React and other JSX frameworks, write the style as an object (style={{ border: 'none', borderRadius: 8 }}) and drop frameborder, which the style already covers. On any other platform, look for an element called HTML, Embed, Custom code or iframe.

Size the frame so nothing gets cut off

An iframe does not grow to fit the page inside it. Without a script on both sides to report the height, it stays exactly as tall as you set it. An Upform form fills that height and centers each question in it, and when a question needs more room than the frame has, the frame scrolls inside itself.

That makes sizing a short job with one rule: find your tallest question and make the frame fit it.

Width. Leave width="100%" alone and control the width with the container. A one-question-per-screen form reads well in a column about as wide as a paragraph of text. Stretched across a 1,400 pixel page, it is mostly empty space.

Height. The number depends on what your longest screen holds:

Treat these as starting points. Your logo, font size and question length all move the number, so click through every question on the published page and raise the height until none of them scroll inside the frame.

Embedded forms on phones

On a phone, width="100%" does its job and the frame narrows with the column. The height does not change, and that is where mobile embeds go wrong.

• Text wraps. A question that fits on one line on a laptop can take three on a phone, so the same screen needs more height, not less.
• Two scrolls fight each other. When the frame is taller than the screen, or scrolls inside itself, a swipe can move the form instead of the page. Keep the frame shorter than the phone's screen where you can, and if the form needs more height than that, link to it instead.
• The keyboard takes half the screen. Each question sits in the middle of the frame, so in a very tall frame the field lands low, right where the keyboard opens. A frame close to the height the question needs keeps the field and its Next button in view.
• Only a real phone tells the truth. A browser's device mode is a fair first check, but the keyboard and the swipe only show up on a device.

If a phone needs a different height from a laptop, set it with CSS instead of the attribute. CSS wins over the height attribute:

<style>
  .form-embed { width: 100%; height: 600px; border: none; }
  @media (max-width: 600px) {
    .form-embed { height: 680px; }
  }
</style>

<iframe class="form-embed" src="https://app.upform.com/preview/your-form-id"
  title="Contact form" loading="lazy"></iframe>

For a long form, a link is often kinder than an embed on phones. The next section covers when to make that switch, and the multi-step forms guide covers how to keep a long form short in practice.

When a link beats an embed

Embedding keeps people on your page. Linking gives the form the whole screen, and for a form that shows one question at a time, the whole screen is often the better place. Link instead of embedding when:

• The form is long. Ten or more questions, or a file upload, reads better full screen than in a box halfway down a page.
• It is shared away from your site. Social bios, chat, texts, QR codes and email all need a link.
• Your platform will not take code. A button that links to the form works on any plan and any system.

The link is on the Form link card of the Share tab. Put it behind a button that names the action, such as "Request a quote", and say how long the form takes. To keep your page open behind it, open the form in a new tab:

<a href="https://app.upform.com/preview/your-form-id" target="_blank" rel="noopener">
  Request a quote (2 minutes)
</a>

A middle ground is to embed a short form, such as a two-question lead capture form, and point people to the longer one afterwards. The Thank You screen has a button whose label and link you set, and it opens that link in a new tab, so the page holding the embed stays put. Set both before the form goes live, so the button points somewhere useful.

Putting a form in an email

You cannot embed a working form in an email. Most email clients, including Gmail and Outlook, do not render iframes or run scripts, so the form would arrive as a blank space. The practical answer is a button that opens the form in the browser, and the Embed in email card on the Share tab writes one for you:

<a href="https://app.upform.com/preview/your-form-id" target="_blank" style="display:inline-block;padding:12px 24px;background-color:#171717;color:#ffffff;text-decoration:none;border-radius:8px;font-family:Arial,sans-serif;font-size:14px;font-weight:500;">Fill out form →</a>

The styles are written inline because many email clients ignore style sheets. To use it:

1. Paste it into an HTML block. Most newsletter builders have one. A normal text block shows the code instead of the button.

2. Rewrite the label. Replace "Fill out form" with the action itself: "Rate your stay" or "Pick a session".

3. Change the color. Swap the background-color value for your brand color, with enough contrast for the white text.

4. Send yourself a test and tap the button on your phone before it goes to your list.

One line above the button saying how long the form takes tells people what they are agreeing to before they click.

Troubleshooting an embedded form

Start with the symptom you can see.

The frame is blank, or says the content is blocked

A Content Security Policy on your site is the usual cause. A CSP is a response header that lists which outside sources a page may load, and its frame-src directive controls iframes. If the form's origin is not on that list, the browser refuses to load the frame and logs an error naming frame-src in the developer console. Add the origin to the directive:

Content-Security-Policy: frame-src 'self' https://app.upform.com

If your policy has no frame-src, browsers fall back to child-src and then default-src, so add the origin to whichever one it uses. The policy is set by your server, hosting platform, a security plugin or a meta tag in the page head. Keep https:// in the address too: browsers block a plain http frame on an https page.

The form is cut off, or scrolls inside itself

The frame is shorter than your tallest question. Raise the height and click through every question, not only the first, then repeat on a phone.

The code disappears when you save

The platform is stripping iframes. In WordPress, save as an account that can post unfiltered HTML, or allow iframes in your security plugin. Elsewhere, check that you pasted into a code element.

The frame says Form Not Published

The form is a draft, or was unpublished, so the frame shows a Form Not Published screen instead of the questions. Publish it in the builder and reload your page. The snippet does not change.

Your latest edits are missing

The embed loads the saved version of the form. Press Save in the builder, then reload the page that holds the embed. There is nothing to paste again.

The frame is empty inside your site editor

Many site editors do not run custom code while you are editing. Preview or publish the page and check it there before you change anything.

Views look high compared with starts

Without loading="lazy", the form loads, and counts a view, for every visitor to the page, including people who never scroll to it. Add lazy loading, and judge the form by its completion rate (submissions divided by starts) in form analytics.

An embed checklist

Run through it once before the page goes live, and again after you change the form.

• The form is published and saved, and the embed shows the latest version.
• The snippet sits in an HTML or code element, not in a text block.
• The frame has a title that names the form.
• Width is 100% inside a column about as wide as a paragraph.
• The height fits the tallest question on a laptop and on a real phone.
• Lazy loading is on if the form sits below the first screen of the page.
• Your Content Security Policy allows the form's origin in frame-src.
• Emails use the button snippet, and long forms or off-site shares use the link.

Match the form's colors, font and corner radius to the page in its design settings. The embed form on website page covers everything else the Share tab does. For what goes inside the form, read form design best practices.