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:
1

Go to the webflow dashboard.
2

Go to Project Section > Custom Code.
3

Add the following code in the Start of <head> tag section.
Check out the How to Get Site ID page to get your site ID.
<!-- Start Surface Tag -->
<script 
  src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"
  siteId="YOUR_SITE_ID"> // Replace with your site ID
</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.
  1. 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.
<!-- 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>
  1. Add a div on the page with height 100vh and width 100% (so that it takes up the entire page)
  2. Add the Code Embed block (only on paid plans) in Webflow within the above div and add the Surface iFrame code in the block.
webflow
  1. Optional (but recommended!)
    • To make the form loading speeds as fast as possible, we can pre-fetch the Surface Form script on the website home page.
    • Add the following in the settings of the home page of your site
    <!-- Beginning of Early Access Request form-->
<link rel="prefetch" href="https://forms.withsurface.com/s/{form_id}" as="document"> <!-- Replace {form_id} with your form id -->
<!--End of Early Access Request form-->
webflow

It should look like this

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