Why isn't my Surface form popup/slideover button opening?
Last updated: July 30, 2026
Context
You have embedded a Surface form on your website (e.g., in Webflow or Framer) using a popup or slideover embed type, but the button that is supposed to open the form is not responding when clicked.
Answer
This issue is most commonly caused by an incorrectly structured embed script — specifically, the JavaScript embed code is missing the immediately invoked function expression (IIFE) wrapper: (function() { ... })();. Without this wrapper, the embed may conflict with other scripts on the page, causing a race condition that prevents the button from working.
To fix this, ensure your embed script follows the correct structure below, placed at the end of the <body> tag in your site's custom code settings:
<!-- Start Surface Form Embed -->
<script>
(function() {
const surface_src = "https://forms.withsurface.com/s/YOUR_FORM_ID"
const surface_embed_type = "popup" // or "slideover"
const target_element_class = "surface-form-button"
const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)
})();
</script>
<!-- End of Surface Form Embed -->Follow these steps to verify and correct your embed:
Go to your website platform's custom code settings (e.g., in Webflow: Site Settings → Custom Code → Footer Code).
Locate your existing Surface embed script.
Confirm that the JavaScript is wrapped in
(function() { ... })();as shown above.Replace
YOUR_FORM_IDwith your actual Surface form ID, and setsurface_embed_typeto either"popup"or"slideover"as appropriate.Save and publish your changes.
If you are using Framer, you may need to recreate the embedded component, as Framer can cache the old version of the embed.
If the issue persists after correcting the script, check whether any other recently added JavaScript on the page may be conflicting with the Surface embed. Removing or reordering scripts can help resolve race conditions.
For more details, refer to the Surface embedding documentation.