Embedding Bloom Forms in a Framer Website
You can embed Bloom forms into your Framer website to capture leads, bookings, or other client information. However, there are some important limitations in how Framer handles custom code.
Option 1: Use an Embed Block
Framer does not allow you to insert arbitrary custom HTML code anywhere on a page. Instead, custom code can only be added in predefined locations (such as the beginning or end of the document).
Because of this, the only way to integrate Bloom Forms directly into the page is through an Embed Block.
Steps:
In your Framer editor, drag and drop an Embed Block onto your page.
Copy the Bloom form embed code from your Bloom account.
Paste the embed code into the Embed Block in Framer.
Stretch the Embed Block to fill the frame size in the Framer editor.
Note: Framer places embedded forms inside an iframe. To ensure the form displays properly (especially fullscreen), you’ll need to expand the block to the correct size in the editor.
Option 2: Add a Button That Links to the Form
If you don’t want to use an Embed Block, you can simply add a button in Framer that links to your form’s URL.
Steps:
In Bloom, copy the form URL (e.g.
https://yourbrand.bloom.io/form/...).In Framer, add a Button element to your page.
Set the button’s action to open link in a new tab.
Paste your Bloom form URL as the link.
This option won’t display the form directly on your site but will open it in a separate tab, keeping the form design fully intact.
Summary
✅ Embed Block: Displays the form inside your Framer site, but you’ll need to resize the block for proper display.
✅ Button Link: Opens the Bloom form in a new tab — simpler, and ensures the form looks exactly as designed.