# Email Input Field Trigger **WAIT...** Make sure that you have added the [**Surface Tag**](/platform/traffic/surface-tag) to your site before proceeding. ## 1. Add the HTML Form [#1-add-the-html-form] Your HTML form needs the `surface-form-handler` class: ```html ``` Add the **`surface-form-handler`** class to any external form that you want to use to trigger the Surface Form popup. ## 2. Modify the Surface Form Embedding Script [#2-modify-the-surface-form-embedding-script] Modify the Surface Form Embedding Script to include the `data-question-id` attribute. You must replace the **``** within **`data-question-id`** attribute below with the question ID from the Surface Form Builder. Question ID Location

```html ``` ## 3. Test Your Integration [#3-test-your-integration] * Enter a valid email in the input field and press "Submit" or hit "Enter". * Verify that the Surface Form popup is displayed as expected. ## 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 constructor script goes in the same place as any other triggered embed. Your existing email input needs `class="surface-form-handler"` on its `

`. 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"; ``` Anywhere before ``, on every page that has a trigger element. Give that element `class="surface-form-button"`.