Skip to main content
Figma Sites lets you design and publish websites directly from Figma. However, Figma doesn’t currently have native support for forms. If you want a working contact form or lead-capture form on your Figma website, you can easily embed forms built externally, such as those created with Weavely.ai. Here’s how to seamlessly embed a form into your Figma site using a Weavely form as an example.
1

Create your Form

Figma doesn’t have a built-in form builder (yet), so you’ll need to build your form in an external tool in order to add it to your Figma Site. We might be biased here, but we think Weavely is a great tool to build forms 😉 For this tutorial we’ll keep things simple. We built this contact form:Screenshot showing an example contact form in Weavely AIWhich we’ll embed in one of Figma’s template websites:Screenshot showing an example Figma Site in which we'll embed a Weavely AI contact form
2

Add an Embed Layer in Figma

Select whichever page you want to add your form to, and drag an “Embed” layer from the toolbar into the page as shown below.Animated screenshot showing how to add an embed layer in Figma SitesYou’ll want to make sure that the embed renders correctly on the various viewports. In our case we modified the embed’s Layout settings to:
  • fill the width of the parent frame
  • fill the height of the parent frame
  • have a minimum height of 700 to make sure that it completely renders the form to be embedded Animated screenshot showing how to style an embed layer in Figma Sites
3

Set the Embed Source

Once you’ve added the embed layer and set its layout you can add the source data. Or in other words, add the form data to the embed layer. You can do this in two ways.First, by setting the embed’s URL to contain the form’s URL (see this tutorial to get your Weavely forms’ URL).Screenshot showing how to set the embed source of an element in Figma SitesThe downside of this approach is that by default this will make the form scrollable inside your website. Especially on mobile this negatively impacts user experience.A second method is to insert the HTML code below in the embed’s HTML field.
<iframe
  src="https://forms.weavely.ai/fa735bfb-e1b8-4404-8126-323bbe3f6f60"
  style="width: 100%; height: 100%; border: none; overflow: hidden;"
  scrolling="no"
  allowfullscreen
  loading="lazy">
</iframe>
This ensures that the form isn’t scrollable. You will need to make sure that the minimum height is sufficient for the form to completely render inside the iframe though.Screenshot showing how to set the embed code of an element in Figma Sites