Embed guide
Embed a YeetForm in Framer
Framer's Embed component runs raw HTML and JavaScript inside a page, which is all the YeetForm SDK needs to render a live form. Paste the auto-resizing snippet, resize the component to fill its container, and publish — the form loads with its own layout and grows or shrinks to fit its content automatically, no fixed height guesswork required.
Steps
Insert an Embed component
In the Framer canvas, open Insert (the + icon), go to Code, and choose Embed. Drop it onto the page where the form should sit.
Paste the HTML
Open the Embed component's settings and paste the snippet below into the HTML field. It loads the SDK and renders the form with auto-resizing.
<script src="https://yeetform.io/sdk.js"></script>
<div id="my-form"></div>
<script>
YeetForm.embed("your-form-slug", "#my-form");
</script>Set sizing and publish
Set the component's width to Fill or a fixed value and its height to Auto or Fit content, then publish the site — embeds render live only after publishing, not always in canvas preview.
Tips
- •Auto-resize comes from YeetForm.embed(), which listens for a height message from the form iframe — set the component height to Auto so it doesn't clip.
- •The embedded form drops YeetForm's own header and background, so it reads as part of your Framer page rather than a separate widget.
- •Add a hidden field to the form and prefill it from the URL (?utm_source=... or ?field_id=value) to track which Framer page or campaign a response came from.
Build your form with AI in seconds
Free plan includes AI generation, logic and embedding.
Build your form with AI in seconds