Add a Surface Form to your Webflow Site

This feature requires being on a paid Webflow site plan.

Before proceeding, make sure you have installed the Surface Tag on your website. Follow these steps to install the Surface Tag first:

Go to the webflow dashboard.

Go to Project Section > Custom Code.

Add the following code in the Start of <head> tag section.

<!-- Start Surface Tag -->
<script src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"></script>
<!-- End Surface Tag -->

The head section containing the Surface Tag should now look like this:

Embedding a Surface Form in your Webflow Site

There are three different ways to embed a Surface Form.

To embed an inline form, first go to the Webflow dashboard > Project Section > Select Custom Code and add the following custom code into the footer code section.

<!-- Start Surface Form Embed -->
<script>
    window.onload = function() {
        // Replace this with your Surface Form URL
        const surface_src = "<form url here>"
        
        const surface_embed_type = "inline"
        const target_element_class = "surface-form-target"
        const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)

        c.embedSurfaceForm();
    }
</script>
<!-- End Surface Form Embed -->

Here’s what the Webflow footer code section should look like:

Next, navigate to your Webflow Design Studio and select the section where the form will be added. After selecting the section, you should see the Style tab in the right panel.

Now add surface-form-target in the Style Selector:

To embed an inline form, first go to the Webflow dashboard > Project Section > Select Custom Code and add the following custom code into the footer code section.

<!-- Start Surface Form Embed -->
<script>
    window.onload = function() {
        // Replace this with your Surface Form URL
        const surface_src = "<form url here>"
        
        const surface_embed_type = "inline"
        const target_element_class = "surface-form-target"
        const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)

        c.embedSurfaceForm();
    }
</script>
<!-- End Surface Form Embed -->

Here’s what the Webflow footer code section should look like:

Next, navigate to your Webflow Design Studio and select the section where the form will be added. After selecting the section, you should see the Style tab in the right panel.

Now add surface-form-target in the Style Selector:

To configure a popup form, first go to the Webflow dashboard > Project Section > Select Custom Code and add the following custom code into the footer code section.

<!-- Start Surface Form Embed -->
<script>
    window.onload = function() {
        // Replace this with your Surface Form URL
        const surface_src = "<form url here>"

        const surface_embed_type = "popup"
        const target_element_class = "surface-form-button"
        const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)
    
        // Optional: Set the popup size ("small", "medium", or "large")
        c.popupSize = "medium"
    }
</script>
<!-- End Surface Form Embed -->

Here’s what the Webflow footer code section should look like:

Next, navigate to your Webflow Design Studio and select the button that triggers the form. After Selecting the button, you should see Style tab on your right panel.

Finally, add surface-form-button in Style Selector:

To configure a slideover form, first go to the Webflow dashboard > Project Section > Select Custom Code and add the following custom code into the footer code section.

<!-- Start Surface Form Embed -->
<script>
    window.onload = function() {
        // Replace this with your Surface Form URL
        const surface_src = "<form url here>"

        const surface_embed_type = "slideover"
        const target_element_class = "surface-form-button"
        const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)
    }
</script>
<!-- End Surface Form Embed -->

Here’s what the Webflow footer code section should look like:

Next, navigate to your Webflow Design Studio and select the button that triggers the form. After Selecting the button, you should see Style tab on your right panel.

Finally add surface-form-button in Style Selector:

Finally, save and publish your changes. Your Surface Form should now be embedded on your Webflow website!

Developers

​Embedding a Surface Form in your Webflow Site

Embedding a Surface Form in your Webflow Site