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.
We automatically prefill the email field based on the email input field.

​
3. Prefill Other Fields (Optional)

If you want to prefill fields other than the email input, you can do so by adding custom attributes to your Webflow form fields.

​
Identity Info Fields

For identity-related fields (except email), add a custom attribute to the input field in Webflow:
  1. Select the input field in Webflow
  2. Go to Settings in the right sidebar
  3. Scroll to the bottom and click Add Custom Attribute
  4. Set the attribute:
    • Key: data-field-name
    • Value: One of the supported field names below
Field Name Attribute
Field NameDescription
firstNameFirst name
lastNameLast name
emailAddressEmail address
phoneNumberPhone number
companyNameCompany name
numberOfEmployeesNumber of employees
websiteUrlWebsite URL
titleJob title
streetAddressStreet address
aptSuiteEtcApartment/Suite/etc.
cityCity
stateState
countryCountry
zipCodeZip/Postal code
companyRevenueCompany revenue

​
Other Form Fields

For all other fields (non-identity fields), you’ll need to use the question ID from your Surface form:
  1. Get the Question ID from the Surface Form Builder
Question ID Location
  1. In Webflow, select the input field
  2. Go to Settings in the right sidebar
  3. Scroll to the bottom and click Add Custom Attribute
  4. Set the attribute:
    • Key: data-question-id
    • Value: The component ID from Surface
This method works with the following Surface form components:
  • Short Input
  • Long Input
  • Dropdown
  • Multiple Choice Question

​
4. 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 -->