Popup Form Embed

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

If your site uses a cookie banner, also configure cookie consent on the tag.

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.