​
1. Create Surface Constructor

Unbounce JavaScript Settings
  1. In the bottom toolbar, click the “JavaScript” button
  2. Click “Add New JavaScript”
  3. Add the following script:
<!-- Start Surface Form Embed -->
<script>
    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 = "slideover";
        const surface_target_element_class = "surface-form-button";

        const cSurfaceForm = new SurfaceEmbed(surface_src, surface_embed_type, surface_target_element_class);
    }

    // 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

​
2. Configure Form Trigger Button

Unbounce Button Configuration
  1. Select any button on your page where you want the Surface form to appear
  2. In the sidebar, scroll to the bottom
  3. Under “Element Metadata”, set the class to surface-form-button