How to Embed Forms on Any Website

You built a form. It looks great in the editor. Now you need it on your website where actual visitors can fill it out. This guide covers the three ways to embed Instaform on any website, with specific instructions for popular platforms.

The Three Embed Options

Instaform offers three embed methods. Each has different strengths depending on your use case.

Option 1: Iframe Embed

An iframe embeds your form inside a rectangular frame on your page. The form loads in its own container, isolated from your page's styles.

Best for:

• Pages where you want the form to appear as a dedicated section
• Situations where you need the form to be visually separated from the surrounding content
• Platforms that support HTML but restrict JavaScript

How to use it:

1. Open your form in Instaform and go to the Share or Embed settings
2. Copy the iframe embed code
3. Paste it into your website's HTML where you want the form to appear

The iframe code looks something like this:

<iframe src="https://app.instaform.co/forms/your-form-id"
  width="100%" height="600" frameborder="0">
</iframe>

Tip: Set width="100%" so the form fills its container on all screen sizes. For height, start with 600px and adjust based on your form's length. If your form has many fields, increase the height to avoid internal scrolling.

Option 2: Script Tag Embed

A script tag embeds your form directly into the page's DOM. The form renders inline, as if it were a native part of your page.

Best for:

• The cleanest visual integration with your website
• Better performance than iframes (no additional document overhead)
• Pages where you want the form to match the surrounding layout seamlessly

How to use it:

1. Open your form in Instaform and go to the Embed settings
2. Copy the script tag embed code
3. Paste it into your page's HTML where you want the form to appear

The script embed typically includes a container div and a script tag:

<div id="instaform-container"></div>
<script src="https://app.instaform.co/embed/your-form-id.js"></script>

Tip: Script embeds generally load faster and look more native than iframes. If your platform supports JavaScript, this is usually the best option.

Option 3: Popup Embed

A popup form appears as an overlay when triggered by a button click, a timer, or a scroll event. The form floats on top of your page content with a dimmed background.

Best for:

• Lead capture forms that should not interrupt the page layout
• Call-to-action buttons that open a form on click
• Pages where real estate is limited and you cannot dedicate a full section to the form

How to use it:

1. Open your form in Instaform and go to the Embed settings
2. Choose the popup option and copy the code
3. Add the script to your page and attach it to a button or trigger

Popup embeds create a focused experience. When the overlay appears, the background dims, and the visitor's attention is directed entirely to the form. This can improve conversion rates because it eliminates distractions.

Platform-Specific Instructions

WordPress

Using the block editor (Gutenberg):

1. Add a "Custom HTML" block where you want the form
2. Paste your iframe or script embed code
3. Preview the page to verify the form appears correctly

Using a page builder (Elementor, Beaver Builder, etc.):

1. Add an HTML or Code widget to your layout
2. Paste the embed code into the widget
3. Save and preview

Using the classic editor:

1. Switch to the "Text" tab (not "Visual")
2. Paste the embed code at the desired position
3. Switch back to "Visual" to verify placement

WordPress tip: If you use a caching plugin (WP Super Cache, W3 Total Cache, etc.), clear your cache after adding the embed code. Cached pages may not show the form until the cache refreshes.

Shopify

1. Go to your Shopify admin and navigate to Online Store > Pages (or edit a product page)
2. In the rich text editor, click the code icon to switch to HTML view
3. Paste your embed code
4. Save the page

For the homepage or custom sections, edit your theme's Liquid template files. Add the embed code inside the appropriate section template.

Shopify tip: If embedding on a product page, place the form below the product description. A common use case is a "Request Custom Quote" form on products with variable pricing.

Wix

1. In the Wix Editor, add an "Embed Code" element (found under "Add" > "Embed Code" > "Embed HTML")
2. Paste your iframe embed code into the element
3. Resize the element to fit your form

Wix tip: Wix works best with iframe embeds. Script tag embeds may be restricted depending on your Wix plan.

Squarespace

1. Add a "Code Block" to your page
2. Paste your embed code into the block
3. Toggle off "Display Source" if prompted
4. Save and preview

Squarespace tip: Use iframe embeds on Squarespace. Code blocks support HTML and iframes well, but some JavaScript embeds may behave inconsistently depending on your template.

Static HTML Sites

If you manage your own HTML files, embedding is straightforward:

1. Open the HTML file where you want the form
2. Paste the embed code at the desired location in the <body>
3. Save and deploy

For static site generators (Hugo, Jekyll, Gatsby, Astro), add the embed code to your page template or content file. Most static generators support raw HTML in content files.

React / Next.js / SPA Applications

For single-page applications, the iframe method is simplest:

function ContactForm() {
  return (
    <iframe
      src="https://app.instaform.co/forms/your-form-id"
      width="100%"
      height="600"
      frameBorder="0"
      title="Contact Form"
    />
  );
}

For script tag embeds in React, you will need to load the script dynamically using a useEffect hook.

Styling Your Embedded Form

Regardless of which embed method you choose, your form's appearance is controlled by the theme settings in Instaform. Before embedding, customize:

• Colors: Match your form's button colors and accents to your website's brand palette
• Fonts: Choose a font that complements your site's typography
• Background: Set it to transparent if you want the form to blend with your page, or choose a color that creates a distinct section

With script tag embeds, the form inherits some page context, making it easier to achieve a seamless look. Iframe embeds are more isolated, so the theme settings become your primary styling tool.

Responsive Considerations

All three embed methods produce responsive forms by default. However, there are a few things to watch:

Iframe height: On mobile, your form might need more vertical space because fields stack into a single column. Consider setting a taller iframe height or using a script embed that adjusts automatically.

Container width: Make sure the container where you place the embed code is not constrained to a narrow width. A form squeezed into a 300px sidebar will not be comfortable to fill out.

Test on real devices. After embedding, load the page on your phone and tablet. Check that fields are tappable, text is readable, and the submit button is reachable without awkward scrolling.

Choosing the Right Method

Here is a quick decision guide:

| Use case | Recommended method | |---|---| | Maximum compatibility (works everywhere) | Iframe | | Best visual integration | Script tag | | Lead capture without layout changes | Popup | | Platform restricts JavaScript | Iframe | | Performance is critical | Script tag | | Form triggered by user action | Popup |

If you are unsure, start with the iframe embed. It works on virtually every platform, requires no JavaScript, and provides reliable isolation from your page's existing styles.

After Embedding

Once your form is live on your website, set up email notifications so you are alerted when submissions come in. Then monitor your form's performance through Instaform's analytics dashboard.

Watch your conversion rate — the percentage of page visitors who submit the form. If it is lower than expected, review your form design and consider the conversion optimization tips to improve it.

Your form is only valuable when people can find it and fill it out. Embedding it on your website puts it in front of your audience where they already are.