Embedding a Surface Form
Six ways to put a Surface form on your site, and how to pick one.
Each mode has its own page, with instructions for Webflow, Framer, WordPress, Next.js, React, Unbounce and plain HTML.
WAIT... Make sure that you have added the Surface Tag to your site before proceeding.
Pick a Mode
| Mode | The form appears | Best for | Needs the embed script |
|---|---|---|---|
| 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 | Modal over the page, on click | "Book a demo" buttons in a nav or hero | Yes |
| Slideover | Panel sliding in from the side, on click | Long forms where losing page context hurts | Yes |
| 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 | A floating button, bottom corner, every page | Site-wide always-available contact | Yes |
| 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, which applies to all six.
Which One Converts Best
Best first. The fewer clicks between intent and the first question, the better:
Input field trigger
Their first answer is captured before the form opens, so you keep a partial even if they leave.
Inline
Zero clicks. The form is already on the page.
Popup or slideover
One click. Fine when the trigger is explicit ("Book a demo"), poor when it is a surprise.
Widget
Always available, rarely noticed.
Check your own numbers: form analytics gives you view → start → completion per form.
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 first.
Publish after pasting. Webflow and Framer both stage custom code. It does nothing live until you publish.
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.