# Inline Form Embed



<Warning>
  **WAIT...** Make sure that you have added the [**Surface Tag**](/platform/traffic/surface-tag) to your site before proceeding.
</Warning>

## iFrame Embed Code [#iframe-embed-code]

Add this code where the form should appear:

```html
<!-- Start Surface Form Embed -->

<iframe
  src="REPLACE ME WITH FORM URL"
  allowfullscreen
  loading="eager"
  fetchpriority="high"
 >
</iframe>

<!-- End of Surface Form Embed -->
```

Replace `REPLACE ME WITH FORM URL` with your form URL. Click **Share** in the
form's `Overview` section to find it.

## Optimize Speed [#optimize-speed]

Add the following `<link>` tags inside the `<head>` of your site:

```html
<!-- Speed up connections to forms.withsurface.com by performing early DNS resolution and TCP handshake -->
<link rel="dns-prefetch" href="https://forms.withsurface.com">
<link rel="preconnect" href="https://forms.withsurface.com" crossorigin>

<!--  Fetch the form in advance, so it's ready when a user opens it. -->
<link rel="prefetch" href="REPLACE ME WITH FORM URL" as="document">
```

<Info>
  Replace `REPLACE ME WITH FORM URL` with a Surface Form URL.
</Info>

<Info>
  If the form uses a custom domain, replace `forms.withsurface.com` in the connection hints with your verified domain. See [Use the Surface Tag with a Custom Domain](/platform/traffic/custom-domains).
</Info>

## Explanation [#explanation]

1. dns-prefetch → Resolves the domain early to skip DNS lookup delays.
2. preconnect → Prepares the TCP + TLS handshake so the browser is ready to request assets immediately.
3. prefetch → Fetches the form in advance, so it's ready when a user opens it.

## Where to Paste It [#where-to-paste-it]

The iframe is the same everywhere. Only where it goes changes.

<Tabs>
  <Tab title="Webflow">
    Add a div at the size you want the form, then drop a **Code Embed** block
    inside it and paste the iframe. Code Embed is a paid-plan feature.
  </Tab>

  <Tab title="Framer">
    **Insert** → **Embed** component. Place it, then in the component's
    **Properties** set **Type** to `URL` and paste your form URL.
  </Tab>

  <Tab title="WordPress">
    In the block editor, &#x2A;*+** → **Custom HTML**, paste the iframe, and
    **Update**. Adjust the `height` in the `style` attribute to fit your form.
    On the Classic editor, use the **Text** tab.
  </Tab>

  <Tab title="Next.js">
    Drop the `<iframe>` straight into the component where the form should
    appear. No script needed for inline.
  </Tab>

  <Tab title="React">
    Same idea: the `<iframe>` goes in the component. Remember React wants
    `frameBorder` and `allowFullScreen` in camelCase.
  </Tab>

  <Tab title="Unbounce">
    Add a **Custom HTML** component to the page and paste the iframe into it.
  </Tab>

  <Tab title="HTML">
    Paste it wherever the form should appear.
  </Tab>
</Tabs>
