# Popup Form Embed
**WAIT...** Make sure that you have added the [**Surface Tag**](/platform/traffic/surface-tag) to your site before proceeding.
## Edit Head Tag [#edit-head-tag]
Add this code to your site's `head` tag to enable the popup form.
```html
```
Replace **`REPLACE ME WITH FORM URL`** with your form URL. Click the share
button in the Surface app to find it.
## Choose Trigger Buttons [#choose-trigger-buttons]
Add the class `surface-form-button` to any element that should open the form.
```html
```
## Control Popup Size [#control-popup-size]
Set `popupSize` to control how large the popup is:
```html
```
## Direct Link [#direct-link]
Append `showSurfaceForm=true` to the url of your website.
For example:
```
https://YOUR_WEBSITE.com/?showSurfaceForm=true
```
Replace `YOUR_WEBSITE.com` with your actual website URL.
The popup opens on page load, with no trigger button to click.
## Optimize Speed [#optimize-speed]
Add the following `` tags inside the `` of your site:
```html
```
Replace `REPLACE ME WITH FORM URL` with a Surface Form URL.
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).
### 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 script is the same on every platform. What changes is where it goes, and
how the trigger element gets the `surface-form-button` class.
Webflow [dashboard](https://webflow.com/dashboard) → **Project Settings** →
**Custom Code**, and paste it into the **Footer Code** section. Publish the
site for it to take effect.
Then give the trigger element the class: select the button in Designer, open
the **Style** panel, and add `surface-form-button` to the Style Selector.
Framer → project **Settings** → **Custom Code** → **End of `` tag**.
Framer has no class field, so the trigger needs a code override. In the
element's **Code Overrides**, create a file called `SurfaceFormButton` and
add:
```tsx
export function withClass(Component): ComponentType {
return (props) => {
props.className += " surface-form-button" // keep the leading space
return
}
}
```
Then select `SurfaceFormButton` → `withClass` on the element.
Custom code is a paid Framer feature.
Use a header/footer plugin. [WPCode](https://wordpress.org/plugins/insert-headers-and-footers/)
is the usual choice. **Code Snippets → Header & Footer**, paste into the
**Footer** box, save.
Add `surface-form-button` to the trigger element's CSS classes in the block
editor's **Advanced** panel.
In `app/layout.tsx` (App Router) or `pages/_document.tsx` (Pages Router),
using `next/script` with `strategy="afterInteractive"`:
```tsx
import Script from "next/script";
```
Then ``.
In `public/index.html`, at the end of ``.
Then `` anywhere in
your tree. The embed script binds by class, so it works with elements React
renders later.
In the page editor's bottom toolbar → **JavaScript** → **Add New JavaScript**,
with placement **"Before the body Tag"**.
Unbounce loads scripts unpredictably, so guard the constructor and run it on
first interaction:
```html
```
Anywhere before ``, on every page that has a trigger element. Give
that element `class="surface-form-button"`.