# Email Input Field Trigger











## 1. Add HTML form in Unbounce [#1-add-html-form-in-unbounce]

Add `Custom HTML` component to your Unbounce page:

<Frame>
    <img alt="Unbounce Custom HTML Component" src="__img0" />
</Frame>

Add the following code to the `Custom HTML` component:

```html
<form class="surface-form-handler">
  <input type="email" placeholder="Enter your email" required />
  <button type="submit">Submit</button>
</form>
```

## 2. Surface Form Constructor [#2-surface-form-constructor]

<Frame>
    <img alt="Unbounce JavaScript Settings" src="__img1" />
</Frame>

1. In the bottom toolbar, click the "JavaScript" button
2. Click "Add New JavaScript"
3. Replace the &#x2A;*`<question_id>`** with the question ID from the Surface Form Builder

<Frame>
    <img alt="Question ID Location" src="__img2" />
</Frame>

4. Add the following script:

```html
<!-- Start Surface Form Embed -->
<script data-question-id="<question_id>">
    let surfaceInitialized = false;

    function initializeSurfaceForm() {
        if (surfaceInitialized || typeof SurfaceEmbed === "undefined") return;
        surfaceInitialized = true;

        const surface_src = "REPLACE ME WITH FORM URL"; // Replace with your Surface form URL
        const surface_embed_type = "popup";
        const surface_target_element_class = "surface-form-button";

        const cSurfaceForm = new SurfaceEmbed(surface_src, surface_embed_type, surface_target_element_class);
        cSurfaceForm.popupSize = "medium"; // "small", "medium", "large"
    }

    // Run initializeSurfaceForm only when user interacts
    document.addEventListener("click", initializeSurfaceForm, { once: true });
    document.addEventListener("scroll", initializeSurfaceForm, { once: true });
</script>
<!-- End Surface Form Embed -->
```

1. Make sure to replace the &#x2A;*`REPLACE ME WITH FORM URL`** with your Surface form URL
2. Set the script placement to "Before the body Tag"
3. Click "Done" to save the changes

This is what your script should look like:

<Frame>
    <img alt="Unbounce Script Configuration" src="__img3" />
</Frame>