# Webflow Integration Guide

Complete guide to integrate MyFormConnect with Webflow

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **All Webflow plans**

Add MyFormConnect forms to your Webflow website using the Embed element or Custom Code. Perfect for contact forms, lead capture, and custom form handling without Webflow's form limitations.

## ** Prerequisites

- ** A MyFormConnect account - [Sign up here](/users/sign_up)
- ** A form created in your MyFormConnect dashboard with its UUID copied
- ** Webflow site with Designer access
- ** Published Webflow site (any plan)
- ** Basic understanding of Webflow's interface

## ** Integration Methods

### Embed Element (Recommended)

                5 minutes

                Easy

Use Webflow's Embed element to add a MyFormConnect form directly to any page. This method gives you full control over form styling and placement.

                  1

#### Copy your form UUID from MyFormConnect

                    You will need the unique UUID that MyFormConnect assigned to your form.

1. Log in to your MyFormConnect dashboard
2. Open the form you want to embed
3. Copy the form UUID from the form URL or settings page (e.g. `550e8400-e29b-41d4-a716-446655440000`)

##### Important Note

                            Each form has a unique UUID. Make sure you use the correct one.

                  2

#### Add an Embed element in Webflow

                    Insert an Embed element where you want the form to appear.

1. Open your Webflow project in the Designer
2. Navigate to the page where you want the form
3. Drag an **Embed** element from the Add panel (+) to your page
4. Position it where you want the form to appear

##### Important Note

                            The Embed element is available under 'Components' in the Add panel.

                  3

#### Paste the form code

                    Click the Embed element and paste your MyFormConnect form HTML.

1. Click the Embed element you just added
2. In the Embed settings, paste the form code below
3. Replace `YOUR_FORM_UUID` with your actual form UUID
4. Click **Save & Close**

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true" style="max-width: 500px; margin: 0 auto;">
  <div style="margin-bottom: 15px;">
    <label for="name" style="display: block; margin-bottom: 5px; 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;">
  </div>
  <div style="margin-bottom: 15px;">
    <label for="email" style="display: block; margin-bottom: 5px; 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;">
  </div>
  <div style="margin-bottom: 15px;">
    <label for="message" style="display: block; margin-bottom: 5px; font-weight: 500;">Message</label>
    <textarea id="message" name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
  </div>
  <button type="submit" style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;">Send Message</button>
</form>

<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_FORM_UUID"></script>
```

##### Important Note

                            The inline styles ensure the form looks good by default. You can customize these or use Webflow's styling after the form is added.

                  4

#### Publish and test

                    Publish your site and verify submissions reach your MyFormConnect dashboard.

1. Click **Publish** in the top-right corner
2. Visit your live website (not the Designer preview)
3. Fill in the form and click Submit
4. Check your MyFormConnect dashboard under **Leads** to confirm the submission arrived

##### Important Note

                            Changes only appear on the published site, not in the Webflow Designer preview.

### Site-wide Custom Code

                8 minutes

                Easy

Add MyFormConnect loader.js to your entire site using Webflow's Custom Code feature. Use this if you have multiple forms across different pages.

                  1

#### Access Site Settings

                    Navigate to your Webflow site settings to add custom code.

1. Open your Webflow project
2. Click the **Settings** gear icon (top-left)
3. Go to **Custom Code** tab
4. You'll see Head Code and Footer Code sections

##### Important Note

                            Custom Code is available on all Webflow plans, including the free plan.

                  2

#### Add loader.js to Head Code

                    Insert MyFormConnect loader.js in the Head Code section.

1. Click in the **Head Code** text area
2. Paste the loader script below
3. Replace `YOUR_DOMAIN_UUID` with your domain UUID from MyFormConnect dashboard
4. Click **Save Changes**

```
<!-- MyFormConnect loader.js (site-wide) -->
<script src="https://myformconnect.io/loader.js" data-client-id="YOUR_DOMAIN_UUID"></script>
```

##### Important Note

                            When loading loader.js globally, use your **domain UUID** (not a form UUID) as the data-client-id.

                  3

#### Add forms using Embed elements

                    Now add forms to any page without including the script tag each time.

1. Add an **Embed** element to any page
2. Paste the form HTML (without the script tag)
3. Use the correct form-specific UUID in the `action` attribute
4. Make sure the form has `data-mfc="true"`

```
<form action="https://myformconnect.io/f/YOUR_FORM_UUID" method="POST" data-mfc="true" style="max-width: 500px; margin: 0 auto;">
  <div style="margin-bottom: 15px;">
    <label for="name" style="display: block; margin-bottom: 5px; 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;">
  </div>
  <div style="margin-bottom: 15px;">
    <label for="email" style="display: block; margin-bottom: 5px; 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;">
  </div>
  <div style="margin-bottom: 15px;">
    <label for="message" style="display: block; margin-bottom: 5px; font-weight: 500;">Message</label>
    <textarea id="message" name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
  </div>
  <button type="submit" style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;">Send Message</button>
</form>
```

##### Important Note

                            Do not include the `<script>` tag when using the site-wide loader approach.

                  4

#### Publish and test

                    Publish your site and verify the integration works.

1. Click **Publish**
2. Visit your live website
3. Test the form on different pages
4. Check your MyFormConnect dashboard for submissions

## ** Troubleshooting

              Check: 1) The Embed element is properly placed and visible, 2) There are no HTML syntax errors in the embed code, 3) The form code is complete (opening and closing tags), 4) View the published site (not Designer preview), 5) Clear browser cache.

              Verify: 1) The form UUID in the action URL is correct, 2) You're checking the correct form in your MyFormConnect dashboard, 3) Check browser console (F12 → Console) for errors, 4) Your site URL is added to MyFormConnect dashboard under Domains (optional).

              Ensure: 1) The form has `data-mfc="true"` on the form element, 2) The script `data-client-id` contains a valid UUID, 3) Check browser console for script loading errors, 4) The script loads before the form (if using per-form script).

              Customize: 1) Remove inline styles from the form code and use Webflow's style panel, 2) Wrap the embed in a div and style that div in Webflow, 3) Use CSS classes instead of inline styles, 4) Test responsive behavior at different breakpoints.

              Debug: 1) Ensure you clicked Publish after making changes, 2) Clear Webflow's cache (republish), 3) Clear browser cache and try incognito mode, 4) Check if Webflow's hosting is propagated (can take a few minutes), 5) View browser console on published site for errors.

              Fix: 1) Use unique `id` attributes for each form's inputs, 2) Ensure each form has the correct form UUID in the action, 3) Each form needs `data-mfc="true"`, 4) If using site-wide loader, don't add per-form script tags.

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

      [Squarespace Integration Guide →](/docs/platforms/builders/squarespace)      [Wix Integration Guide →](/docs/platforms/builders/wix)      [Framer Integration Guide →](/integrations/framer-forms)

## ** References & Official Documentation

- ** [Webflow Documentation](https://developers.webflow.com/home) **
- ** [Webflow Custom Code](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags) **
- ** [Webflow CMS API](https://developers.webflow.com/) **
- ** [Webflow University](https://university.webflow.com/) **

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