Documentation is available in English.

Bubble Integration Guide

Complete guide to integrate MyFormConnect with Bubble

Setup time: 5-10 minutes
Difficulty: Easy
Compatible versions: Bubble apps (HTML element)

Add a MyFormConnect form to your Bubble app using the HTML element. Works for contact forms and lead capture without building a custom Bubble backend workflow for storage.

Prerequisites

  • A MyFormConnect account - Sign up here
  • A form created in your MyFormConnect dashboard with its UUID copied
  • Bubble editor access to the page where you want the form

Integration Methods

HTML Element (Recommended)

5 minutes Easy

Drop Bubble's HTML element on the page and paste a MyFormConnect form. Submissions are stored in MyFormConnect.

1

Copy your form UUID

Get your form UUID from the MyFormConnect dashboard.
  1. Log in to your MyFormConnect dashboard
  2. Open the form you want to use
  3. Copy the form UUID (e.g. 550e8400-e29b-41d4-a716-446655440000)
2

Add an HTML element

Place Bubble's HTML element on your page.
  1. Open your app in the Bubble editor
  2. Go to the page where the form should appear
  3. Drag an HTML element onto the page
  4. Resize it so the form has enough height (about 400–500px)
3

Paste the form HTML

Put your MyFormConnect form inside the HTML element.
  1. Open the HTML element settings
  2. Paste the code and replace YOUR_FORM_UUID with your form UUID
  3. Preview or deploy your Bubble app
<div style="max-width: 480px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true">
    <div style="margin-bottom: 12px;">
      <label for="name" style="display: block; margin-bottom: 4px; font-weight: 500;">Name *</label>
      <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
    </div>
    <div style="margin-bottom: 12px;">
      <label for="email" style="display: block; margin-bottom: 4px; font-weight: 500;">Email *</label>
      <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
    </div>
    <div style="margin-bottom: 12px;">
      <label for="message" style="display: block; margin-bottom: 4px; font-weight: 500;">Message</label>
      <textarea id="message" name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"></textarea>
    </div>
    <button type="submit" style="width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; font-weight: 500; cursor: pointer;">Send Message</button>
  </form>
  <script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
</div>
Important Note
You do not need a Bubble workflow to save these submissions — MyFormConnect stores them for you.
4

Test

Confirm submissions reach MyFormConnect.
  1. Open the live or preview page
  2. Submit a test entry
  3. Check MyFormConnect dashboard under Leads

Related Integrations

Wix
Integration Guide →
Webflow
Integration Guide →
Static Sites
Integration Guide →

References & Official Documentation

Next Steps

Configure MyFormConnect

  • Set up your timezone
  • Configure lead notifications
  • Set up advanced spam detection
  • Add team members to your account

Advanced Features

  • Use our custom form templates
  • Try AI Insights for Leads
  • Integrate with your CRM
  • Set up automated workflows

Need Help?

Our support team is here to help you with your integration.

Contact Support