# Embedding a Surface Form



Each mode has its own page, with instructions for Webflow, Framer, WordPress,
Next.js, React, Unbounce and plain HTML.

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

## Pick a Mode [#pick-a-mode]

| Mode                                                     | The form appears                                                     | Best for                                                                | Needs the embed script |
| -------------------------------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------- | ---------------------- |
| **[Inline](/platform/forms/embedding/inline)**           | In the page, in the flow of content                                  | Landing pages, pricing pages, anywhere the form *is* the call to action | No, just an iframe     |
| **[Popup](/platform/forms/embedding/popup)**             | Modal over the page, on click                                        | "Book a demo" buttons in a nav or hero                                  | Yes                    |
| **[Slideover](/platform/forms/embedding/slideover)**     | Panel sliding in from the side, on click                             | Long forms where losing page context hurts                              | Yes                    |
| **[Input field](/platform/forms/embedding/input-field)** | Opens pre-filled after someone submits an email box you already have | Turning an existing newsletter or "get started" input into a full form  | Yes                    |
| **[Widget](/platform/forms/embedding/widget)**           | A floating button, bottom corner, every page                         | Site-wide always-available contact                                      | Yes                    |
| **[Direct link](/platform/forms/embedding/direct-link)** | Its own page, at a Surface URL                                       | Email, ads, social, QR codes, anywhere you have no site to embed in     | No                     |

Then [optimize loading speed](/platform/forms/embedding/optimize), which applies
to all six.

## Which One Converts Best [#which-one-converts-best]

Best first. The fewer clicks between intent and the first question, the better:

<Steps>
  <Step title="Input field trigger">
    Their first answer is captured before the form opens, so you keep a partial
    even if they leave.
  </Step>

  <Step title="Inline">
    Zero clicks. The form is already on the page.
  </Step>

  <Step title="Popup or slideover">
    One click. Fine when the trigger is explicit ("Book a demo"), poor when it
    is a surprise.
  </Step>

  <Step title="Widget">
    Always available, rarely noticed.
  </Step>
</Steps>

Check your own numbers: [form analytics](/platform/forms/analytics) gives you
view → start → completion per form.

## Two Things That Catch People [#two-things-that-catch-people]

**The embed script needs the Surface Tag.** Inline and direct link work without
it. Every triggered mode needs it, so install the
[Surface Tag](/platform/traffic/surface-tag) first.

**Publish after pasting.** Webflow and Framer both stage custom code. It does
nothing live until you publish.

<Note>
  This section is the reference: what each mode is and the snippet it needs. For
  a click-by-click walkthrough on one host, Framer, Webflow, WordPress, React,
  Next.js or Unbounce, see [Form Embedding](/embedding/website-editors).
</Note>