Popup Form Embed

WAIT... Make sure that you have added the Surface Tag to your site before proceeding.

Edit Head Tag

Add this code to your site's head tag to enable the popup form.

<!-- Start Surface Form Embed -->

<script>
  (function () {
    const surface_src = "REPLACE ME WITH FORM URL"
    const surface_embed_type = "popup"
    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 -->

Replace REPLACE ME WITH FORM URL with your form URL. Click the share button in the Surface app to find it.

Choose Trigger Buttons

Add the class surface-form-button to any element that should open the form.

<button class="... surface-form-button"> </button>

Set popupSize to control how large the popup is:

<!-- Start Surface Form Embed -->

<script>
  (function () {
    const surface_src = "REPLACE ME WITH FORM URL";
    const surface_embed_type = "popup";
    const target_element_class = "surface-form-button";
    const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class);

    c.popupSize = "medium"; // This value can be "small", "medium", or "large"
  })();
</script>

<!-- End of Surface Form Embed -->

Direct Link

Append showSurfaceForm=true to the url of your website.

For example:

https://YOUR_WEBSITE.com/?showSurfaceForm=true

Replace YOUR_WEBSITE.com with your actual website URL.

The popup opens on page load, with no trigger button to click.

Optimize Speed

Add the following <link> tags inside the <head> of your site:

<!-- Speed up connections to forms.withsurface.com by performing early DNS resolution and TCP handshake -->
<link rel="dns-prefetch" href="https://forms.withsurface.com">
<link rel="preconnect" href="https://forms.withsurface.com" crossorigin>

<!--  Fetch the form in advance, so it's ready when a user opens it. -->
<link rel="prefetch" href="REPLACE ME WITH FORM URL" as="document">

Replace REPLACE ME WITH FORM URL with a Surface Form URL.

If the form uses a custom domain, replace forms.withsurface.com in the connection hints with your verified domain. See Use the Surface Tag with a Custom Domain.

Explanation

dns-prefetch → Resolves the domain early to skip DNS lookup delays.
preconnect → Prepares the TCP + TLS handshake so the browser is ready to request assets immediately.
prefetch → Fetches the form in advance, so it's ready when a user opens it.

Where to Paste It

The script is the same on every platform. What changes is where it goes, and how the trigger element gets the surface-form-button class.

Webflow dashboard → Project Settings → Custom Code, and paste it into the Footer Code section. Publish the site for it to take effect.

Then give the trigger element the class: select the button in Designer, open the Style panel, and add surface-form-button to the Style Selector.