Embedding in Bubble

Add FavForm to your Bubble app using the HTML element or iframe.

Using the HTML element

Add an HTML element

In the Bubble editor, drag an "HTML" element from the Visual Elements panel onto your page.

Enter the embed code

Double-click the HTML element and paste:

HTML

<fav-form data-embedId="your-form-id" style="width: 100%; min-height: 600px;"></fav-form>
<script src="https://favform.com/embed/v1.js" async></script>

Size the element

Resize the HTML element to fit your form. Set width to your desired size and height to at least 600px.

Using iframe (recommended)

The iframe method is often more reliable in Bubble:

Add an HTML element

Drag an HTML element onto your page.

Add the iframe code

Paste this iframe code:

HTML

<iframe 
  src="https://favform.com/f/your-form-id" 
  width="100%" 
  height="100%" 
  frameborder="0" 
  style="border: none; min-height: 600px;">
</iframe>

Configure sizing

Set the HTML element to your desired dimensions. The iframe will fill the container.

Dynamic form IDs

To dynamically change the form based on data:

Store form IDs in your Bubble database
Use dynamic data in the HTML element

HTML

<iframe 
  src="https://favform.com/f/[Dynamic form ID from database]" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border: none;">
</iframe>

In Bubble, click "Insert dynamic data" and select your form ID field to make the URL dynamic.

Site-wide widgets

Add a feedback widget to every page:

Go to Settings → SEO / metatags
Scroll to "Script/meta tags in body"
Paste the widget code

HTML

<fav-form data-embedId="your-widget-id"></fav-form>
<script src="https://favform.com/embed/v1.js" async></script>

Popup forms

Create a popup form using Bubble's popup element:

Add a Popup element to your page
Place an HTML element inside the popup
Add your FavForm embed code
Create a workflow to show the popup on button click

For floating feedback buttons, use our Widget type instead — it handles the popup behavior automatically.

Embedding polls

HTML

<iframe 
  src="https://favform.com/p/your-poll-id" 
  width="100%" 
  height="400" 
  frameborder="0" 
  style="border: none;">
</iframe>

Troubleshooting

Form not loading

Try the iframe method instead of the web component. Bubble's HTML element can sometimes have issues with custom elements.

Form appears too small

Set explicit height on both the HTML element and the iframe/form. Use min-height: 600px or more.

Script not executing

Bubble may block some scripts. The iframe method doesn't require JavaScript and is more reliable.

Responsive issues

Use percentage widths (100%) and set the parent container to be responsive. Test on different screen sizes.

← Webflow Shopify →