Qwenvo

Framer Form: How to Embed a Form in Your Framer Site

By the Qwenvo team · · 4 min read

To add a form to Framer, publish your form, copy the Standard or Popup code from the Share tab, add an Embed element on your Framer canvas, and paste the code as HTML. Publish the site and test a submission.

What you need

  • A free Qwenvo account and a published form.
  • A Framer site where you can add an Embed element.
  • Five minutes and a phone to test on.

Add the form

  1. Build the form in Qwenvo. Start from a template if you like: the contact form, demo request form or product waitlist suit most Framer sites.
  2. Click Publish, open the Share tab and choose Standard.
  3. Turn on Transparent background and, if your section already has a heading, Hide title. Turn on Dynamic height. Copy the snippet.
  4. In Framer, add an Embed element to the section and set it to HTML.
  5. Paste the snippet. Resize the element so the form has room.
  6. Publish the Framer site, open the live page, and submit a test response.

Match your Framer design

The form sits in a frame, so style it in Customize rather than in Framer. Use the same hex colours as your site for the background, text, button and accent. Pick a font from the Customize list that is closest to yours. In the Advanced section you can set page width, input height, border and corner radius, and button size and shape. Advanced options are free.

If your Framer page has a dark section, use a custom theme with a dark background and light text, so the form blends in even without the transparent option.

Use a popup for landing pages

On a landing page, an inline form is not always the best fit. Choose Popup on the Share tab, pick a modal or a side drawer, and make a button on your Framer page the trigger. You can also open it after a delay, on scroll depth or on exit intent, and show it only once per visitor. See popup forms.

Track campaigns

Add hidden fields to the form and turn on Save website page and query parameters in the embed options. Then ad and email links with UTM tags on your Framer page appear in your submissions. See UTM tracking with hidden fields.

After someone submits

  • Show a Thank-you page inside the form with the next step.
  • Or use Redirect on completion to send people to another page of your site.
  • Send each response to Slack, Google Sheets or Notion.
  • Turn on AI triage if you receive many messages; it adds category, priority and a summary.

Mistakes to avoid

  • A fixed-height Embed element. If the form is taller than the element, it will be cut off or scroll; leave enough room and test every page of a multi-page form.
  • Testing only on the canvas. Always check the published page.
  • Unmatched fonts. A mismatch is the first thing visitors notice.
  • No mobile check. Test at phone width.

An honest limit: because the form is a separate frame, it cannot pick up your Framer fonts automatically. You choose the closest match from Customize's font list.

A design checklist for a clean embed

  • Use your site's exact hex colours for text, button and accent.
  • Set the corner radius of inputs and buttons to match your cards and buttons.
  • Check the contrast shown for button text; light text on a pale button is hard to read.
  • Set the page width so the form lines up with your text column.
  • Leave enough space above and below the embed so it does not feel crammed.
  • Read the form on a phone, with the keyboard open, to see that nothing is hidden.

A note on speed

An embed adds a frame and a script to your page. Framer sites are often built to be light, so check how the page feels after you add the form: open it on a phone, on a normal connection, and watch when the form appears. If the form sits far down the page, a popup triggered by a button keeps the first screen lighter, and the form only loads when a visitor asks for it.

Questions people ask

How do I add a form to a Framer site?

Add an Embed element and paste the form's snippet. The general guide is how to embed a form on a website.

Can I remove the Qwenvo badge?

Yes, in Settings under Qwenvo branding. It is free. On Tally it needs Pro; see remove Tally branding for free.

Can I use a popup instead?

Yes, with the Popup option and a trigger of your choice.

Does it work on mobile?

Yes. The form is responsive; test your page at phone width.

Every feature, $0, no card.

Add a form to Framer free