This guide walks you through preparing the embed code, placing it on a website page, and checking the result.
You’ll be able to:
Find the embed code for a form
Add an HTML Embed component to a Framer page
Adjust the component’s size for your layout
Publish and test your page
Before You Start
Make sure you have:
A published Interact form
Permission to edit the Framer project
A website page where you want the embed to appear
💡 Note: In Framer, choose a page under Pages, such as Home. A standalone Design canvas is different from a website page and does not have the same publishing controls.
Step 1: Copy Your Interact Embed Code
Open Forms in your Interact dashboard.
Find a published form and click Share, or open its overview and select Share.
Under Embed on your site, click Standard.
Set Code for to JavaScript.
Review Dynamic height and Custom size under Embed Options.
Click Copy code.
💡 Note: Copy the generated embed code from Share. The browser address bar contains the dashboard or editor URL.
Step 2: Choose Your Framer Website Page
Open your Framer project.
In the left sidebar, open Pages.
Select the website page where the form should appear, such as Home.
Identify the section or container where you want to place it.
Step 3: Add an HTML Embed
Select the + Button in the top toolbar.
Search for Embed and choose the Embed component, or go to Utility and select Embed.
Drag and place the component on your selected website page.
Select the Embed component on the canvas and go to the right-hand Style panel.
Find the Embed Component.
Under Type, select HTML.
Paste the complete Interact embed code into the HTML field.
💡 Note: The component also offers a URL type. Use HTML when pasting the generated JavaScript embed snippet.
Step 4: Adjust the Embed Size
With the Embed selected, scroll up and find Position & Size in the right-hand panel.
Adjust Width to fit the page or its parent container.
If Fill is available and suits your layout, use it to fill the parent container’s available width.
Set a starting Height that gives the content enough room or select Fit content
Check each breakpoint your page uses and adjust the layout as needed.
If Fill is unavailable
The available sizing modes depend on the component’s parent and layout. Use the available width controls, or place the Embed in an appropriate layout container before choosing Fill.
Check height as visitors move through the form
Interact’s dynamic-height setting and Framer’s outer Embed dimensions are separate controls. Test the longest questions, validation messages, and ending screen. Increase the outer Embed height if content is clipped or an unwanted scrollbar appears.
💡 Note: Choose dimensions that suit your page layout, then check the full form at each screen size.
Step 5: Publish and Test
Use Framer’s Preview to check the page layout.
Click Publish and follow the publishing prompts when the page is ready.
Open the published page and check that the form loads.
Complete it on desktop and mobile, checking every screen for clipping or extra scrolling.
If submissions or follow-up emails are part of your workflow, send a clearly identified test using an email address you control and check the result.
💡 Note: A blank editor canvas alone does not establish whether the published embed works. Check the published page before troubleshooting the live result.
When you change the form content, publish the update in Interact and check the Framer page again. If you change the embed settings or snippet, copy the updated code into Framer and republish the site.
Troubleshooting
Problem | What to check |
No Publish button | Select a website page under Pages rather than a standalone Design canvas. |
Embed asks for a URL | Select HTML under Embed Component → Type. |
Fill width is disabled | Review the parent layout or use the available width controls. |
Content is clipped | Increase the outer Embed height and test the longest content at each breakpoint. |
Embed is blank on the published page | Check the full snippet, HTML type, and publication status in both products. |
Updates are missing | Publish the Interact update; replace the snippet and republish Framer if the embed code changed. |
Setup Checklist
Form published in Interact
Standard form embed selected
Complete JavaScript embed code copied
Framer website page selected
Embed type set to HTML
Width and height reviewed at each breakpoint
Published page tested through completion
Test submission checked, if applicable