Embedding in Framer

Add FavForm to your Framer site using the Embed component or custom code.

Using the Embed component

The easiest way to add FavForm to Framer:

Add an Embed component

In the Framer editor, press E or search for "Embed" in the Insert menu.

Enter the embed code

In the Embed settings panel, paste:

HTML

<fav-form data-embedId="your-form-id"></fav-form>
<script src="https://favform.com/embed/v1.js" async></script>

Resize and position

Drag the embed to resize it. Set a minimum height of 500-700px for forms.

Using iframe URL

Alternatively, use the URL embed option:

Add an Embed component
Select "URL" as the embed type
Enter your form URL

Text

https://favform.com/f/your-form-id

Site-wide widgets

Add a feedback widget to every page using Custom Code:

Go to Site Settings → General → Custom Code
In the "End of <body> tag" section, paste the widget code
Publish your site

HTML

<fav-form data-embedId="your-widget-id"></fav-form>
<script src="https://favform.com/embed/v1.js" async></script>

Creating a reusable component

For multiple forms, create a Code Component:

Go to Assets → Code → New Code Component
Create a component with a form ID prop

TSX

import { useEffect } from "react"

export function FavForm({ formId }) {
  useEffect(() => {
    // Load SDK if not already loaded
    if (!document.querySelector('script[src*="favform.com"]')) {
      const script = document.createElement("script")
      script.src = "https://favform.com/embed/v1.js"
      script.async = true
      document.body.appendChild(script)
    }
  }, [])

  return (
    <fav-form data-embedId={formId} />
  )
}

// Add property controls
FavForm.defaultProps = {
  formId: "your-form-id",
}

This lets you reuse the component and change the form ID from the properties panel.

Responsive sizing

To make the embed responsive:

Set width to "Fill" (100%)
Set a fixed height or use "Fit Content" if supported
Add constraints for different breakpoints

Troubleshooting

Embed not rendering

Make sure you're viewing the published site, not just the editor preview. Some embeds only work on the live site.

Form cut off

Increase the height of the Embed component. Forms typically need 500-800px depending on the number of questions.

Widget not appearing

Check that the custom code is in the "End of body" section, not the "Head" section.

← Squarespace Webflow →