Framer · Free · No signup · No plugin

Embed a form in Framer

Framer's Embed component accepts raw HTML. Generate the snippet, drop it onto the canvas, publish.

Steps to embed in Framer

  1. Generate the embed code

    Paste your form URL into the generator and pick Responsive for fluid resizing.

  2. Open the Framer project

    Edit the page where you want the form.

  3. Insert an Embed component

    From Insert → Embed, drag the component onto the canvas.

  4. Paste the snippet

    Open the Embed properties panel and paste the HTML.

  5. Publish

    Click Publish to push the change live.

Framer embed code generator

Paste your form URL — works with LemForms, Typeform, Tally, Jotform, Google Forms, Paperform, or any embeddable form. The Framer Embed component accepts the snippet below.

Aspect-ratio wrapper, scales to width

<div style="position:relative;padding-top:62.5%;width:100%;">
  <iframe
    src="https://lemforms.com/f/your-form-id"
    style="position:absolute;inset:0;width:100%;height:100%;border:0;"
    loading="lazy"
    title="Embedded form"
  ></iframe>
</div>
Paste the snippet into the HTML of any platform — WordPress (Custom HTML block), Webflow (Embed), Framer (Embed), Wix (HTML iframe), Squarespace (Code block), Shopify (Custom Liquid), Notion (Embed), Ghost (HTML card), Carrd (Embed), or plain HTML.

Live preview

This is the exact iframe your visitors will see. If it looks wrong here, it will look wrong on your site.

Where to paste it, per platform

WordPress

Block editor → add a Custom HTML block, paste, then Preview.

Gotcha: Classic editor strips iframes in Visual mode — switch to the Text tab first.

Full WordPress embed guide →
Webflow

Add an Embed element (Add panel → Components → Embed) and paste.

Gotcha: Embeds don't render in the Designer canvas — use Preview or publish to see the form.

Full Webflow embed guide →
Framer

Insert → Utility → Embed, choose HTML, paste the snippet.

Gotcha: Set the frame to Fixed height, or the iframe collapses to 0px.

Full Framer embed guide →
Wix

Add → Embed Code → Embed HTML → Code, paste, then resize the box.

Gotcha: Wix wraps embeds in a fixed box — drag it taller than the form or it scrolls internally.

Full Wix embed guide →
Squarespace

Add a Code block, set it to HTML, paste, and untick 'Display Source'.

Gotcha: Code blocks are unavailable on the Personal plan — use an embed block instead.

Full Squarespace embed guide →
Shopify

Theme editor → add a Custom Liquid section and paste the snippet.

Gotcha: Escape any Liquid-looking braces; Shopify tries to parse `{{ }}` inside Custom Liquid.

Full Shopify embed guide →
Notion

Type /embed, paste the form URL directly (Notion builds the iframe).

Gotcha: Notion ignores raw HTML — use the plain form URL, not the snippet.

Full Notion embed guide →
Carrd

Add → Embed → Code, paste, set Style to Inline.

Gotcha: Carrd doesn't auto-size iframes — set an explicit height or the form gets clipped.

Full Carrd embed guide →

Frequently asked questions

Can I turn the Framer embed into a reusable component?

Yes. Place the Embed component inside a Framer component and expose the form URL as a property so each instance can load a different form.

Can I embed a Typeform or Google Form in Framer?

Yes — the Embed component takes any public form URL, not just LemForms.

Why is the form blank in the editor?

Framer renders embeds only in the live preview — open the published URL to test.

Can I resize the embed?

Yes — the Responsive variant uses an aspect-ratio wrapper that fills the Embed component's bounding box.

Does it work in components and CMS items?

Yes. Drop the Embed inside any reusable component or CMS template.

Build the form you'll embed in Framer

LemForms gives you the embed URL — plus conditional logic, calculations, file uploads, webhooks, and a real submissions dashboard. Free to start.

Try LemForms free

Embed in other platforms