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:

Which we’ll embed in one of Figma’s template websites:

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.

You’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

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).

The 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.