​
1. Add HTML form in Unbounce

Add Custom HTML component to your Unbounce page:
Unbounce Custom HTML Component
Add the following code to the Custom HTML component: 
<form class="surface-form-handler">
  <input type="email" placeholder="Enter your email" required />
  <button type="submit">Submit</button>
</form>

​
2. Surface Form Constructor

Unbounce JavaScript Settings
  1. In the bottom toolbar, click the “JavaScript” button
  2. Click “Add New JavaScript”
  3. Replace the <question_id> with the question ID from the Surface Form Builder
Question ID Location
  1. Add the following script:
<!-- 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 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:
Unbounce Script Configuration