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

Navigate to the Framer site settings.
2

Scroll down to Custom Code section.
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 -->

​
Embed a Surface Form in Framer

Make sure that you have added the Surface Tag to your Framer site before proceeding.

​
1. Embedding Surface Form

  1. In framer, click on insert to add new component inside the website.
  2. Select Embed from the list of components. Hero Light
  3. Insert the component in the desired location. Now go to properties of the component and scroll down to the Embed section.
  4. Set the Type to URL and paste your form URL in the URL field. Hero Light
  5. That should look something like this: Hero Light

​
2. Publish the site

Publish the site and that’s it! You have successfully embedded a Surface Form in your Framer project.

​
Send Framer Form Data to Surface Leads using Webhooks

You can also send form submissions from Framer to Surface Leads using a webhook. This allows you to collect lead data directly in your Surface Leads Hub.

​
1. Add Form Component in Framer

  1. In your Framer project, click on “Insert” to add a new component
  2. Search for “Form” in the components list and add it to your page
  3. Configure the form fields according to your needs (name, email, etc.)
Adding Form Component

​
2. Get Surface Webhook URL

  1. Log in to your Surface account
  2. Navigate to Leads Hub from the sidebar
  3. Click on the “Configure” tab
  4. Locate the “Lead Submission Endpoint” section
  5. Copy the webhook URL from the cURL command provided
Surface Leads Hub Configuration

​
3. Match Field Names

Ensure that the input field names in your Framer form match the field names expected by Surface Leads Hub:
Surface Lead FieldDescription
emailRequired field for the lead’s email address
firstNameLead’s first name
lastNameLead’s last name
companyLead’s company name
numberOfEmployeesCompany size
titleLead’s job title
phoneLead’s phone number
bookedMeetingMeeting status
linkedinLinkedIn profile URL
companyRevenueCompany’s revenue information
To set field names in Framer:
  1. Select each form input field
  2. In the properties panel, find the “Name” property
  3. Set the name to match the corresponding Surface lead field (e.g., “email”, “firstName”)
Matching Field Names

​
4. Configure Form to Send Data to Webhook

  1. Select your form component in Framer
  2. In the properties panel, scroll down to the “Form” section
  3. Find the “Send to” dropdown and select “Webhook”
  4. Paste the Surface webhook URL you copied earlier in the provided field
Configuring Webhook

​
5. Test the Integration

  1. Publish your Framer site or preview it
  2. Fill out and submit the form with test data
  3. Go to your Surface Leads Hub and check the leads table to verify that the submission was received correctly

​
Troubleshooting

If your form submissions are not appearing in Surface Leads Hub:
  1. Verify that the webhook URL is correct
  2. Check that the form field names match the expected Surface lead field names
  3. Ensure your form is properly configured to send data to the webhook
  4. Try submitting the form again and refresh your Surface Leads Hub