Skip to main content

​
1. Create Surface Constructor

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>
    // Replace this with your Surface Form URL
    const surface_src = "REPLACE ME WITH FORM URL"

    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 -->
This is what your script should look like:
Webflow Footer Code Section

​
2. Configure Form Trigger Button

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.
Webflow Design Studio
Finally, add surface-form-button in Style Selector:
Webflow Button Class Configuration
Finally, save and publish your changes. Your Surface Form should now be embedded on your Webflow website!