Form EmbeddingUnbounce
Popup
Embed a Surface Form popup
1. Surface Form Constructor

- In the bottom toolbar, click the "JavaScript" button
- Click "Add New JavaScript"
- 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 = "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 -->- Make sure to replace the
REPLACE ME WITH FORM URLwith your Surface form URL - Set the script placement to "Before the body Tag"
- Click "Done" to save the changes
This is what your script should look like:

2. Configure Form Trigger Button

- Select any button on your page where you want the Surface form to appear
- In the sidebar, scroll to the bottom
- Under "Element Metadata", set the class to
surface-form-button