Documentation is available in English.

Bubble Integration Guide

Complete guide to integrate MyFormCapture with Bubble

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

Add a MyFormCapture 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 MyFormCapture account - Sign up here
  • A form created in your MyFormCapture 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 MyFormCapture form. Submissions are stored in MyFormCapture.

1

Copy your form UUID

Get your form UUID from the MyFormCapture dashboard.
  1. Log in to your MyFormCapture 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 MyFormCapture 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://myformcapture.com/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://myformcapture.com/loader.js" data-client-id="YOUR_FORM_UUID"></script>
</div>
Important Note
You do not need a Bubble workflow to save these submissions — MyFormCapture stores them for you.
4

Test

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

Related Integrations

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

References & Official Documentation

Next Steps

Configure MyFormCapture

  • 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