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

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