Skip to main content

​
1. Add Form Block component

Form Block Component
  1. In Webflow, click on Add Element to add a new element.
  2. Select Form Block from the list of elements.

​
2. Configure Form Block component

Form Block Component
  1. In the form block component, Select Form from the list of elements.
  2. On the right side, under Style Selector, add the surface-form-handler class to the form.

​
3. Surface Form Constructor

Go to the Webflow dashboard > Project Section > Select Custom Code and add the following custom code into the footer code section. Add the data-question-id attribute to your Surface form script.
You must replace the <question_id> within data-question-id attribute below with the question ID from the Surface Form Builder.
Question ID Location
<!-- Start Surface Form Embed -->

<script data-question-id="<question_id>">
  (function () {
     const surface_src = "surface_form_url";
     const surface_embed_type = "slideover"; // works on all embedding types!
     const target_element_class = "surface-form-button";
     const c = new SurfaceEmbed(
       surface_src,
       surface_embed_type,
       target_element_class,
     );
   })();
</script>

<!-- End Surface Form Embed -->