# 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](/users/sign_up)
- ** 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**

## ** Troubleshooting

              Increase the HTML element's height in the Bubble editor, or reduce spacing in the form markup.

              Check: 1) Form UUID in the action URL is correct, 2) Browser console for errors, 3) You're checking the right form under **Leads**.

              Ensure `data-mfc="true"` is on the form and the script `data-client-id` matches your form UUID. Test on a deployed version if preview blocks scripts.

              Edit the inline styles in the HTML to match your app colors, fonts, and button styles.

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [Wix Integration Guide →](/docs/platforms/builders/wix)      [Webflow Integration Guide →](/docs/platforms/builders/webflow)      [Static Sites Integration Guide →](/docs/deployment/static-sites)

## ** References & Official Documentation

- ** [Getting Started Guide](/docs/getting-started)
- ** [Custom Webhooks](/docs/tools/code/custom-webhooks)

## ** 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