Webflow Integration Guide

Complete guide to integrate MyFormCapture with Webflow

Setup time: 5-10 minutes

Difficulty: Easy

Compatible versions: All Webflow plans

Add MyFormCapture 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 MyFormCapture account - Sign up here
A form created in your MyFormCapture 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 MyFormCapture form directly to any page. This method gives you full control over form styling and placement.

Copy your form UUID from MyFormCapture

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

Log in to your MyFormCapture dashboard
Open the form you want to embed
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.

Add an Embed element in Webflow

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

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

Important Note

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

Paste the form code

Click the Embed element and paste your MyFormCapture form HTML.

Click the Embed element you just added
In the Embed settings, paste the form code below
Replace YOUR_FORM_UUID with your actual form UUID
Click Save & Close

<form action="https://myformcapture.com/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://myformcapture.com/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.

Publish and test

Publish your site and verify submissions reach your MyFormCapture dashboard.

Click Publish in the top-right corner
Visit your live website (not the Designer preview)
Fill in the form and click Submit
Check your MyFormCapture 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 MyFormCapture loader.js to your entire site using Webflow's Custom Code feature. Use this if you have multiple forms across different pages.

Access Site Settings

Navigate to your Webflow site settings to add custom code.

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

Important Note

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

Add loader.js to Head Code

Insert MyFormCapture loader.js in the Head Code section.

Click in the Head Code text area
Paste the loader script below
Replace YOUR_DOMAIN_UUID with your domain UUID from MyFormCapture dashboard
Click Save Changes

<!-- MyFormCapture loader.js (site-wide) -->
<script src="https://myformcapture.com/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.

Add forms using Embed elements

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

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

<form action="https://myformcapture.com/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.

Publish and test

Publish your site and verify the integration works.

Click Publish
Visit your live website
Test the form on different pages
Check your MyFormCapture dashboard for submissions

Troubleshooting

Still having issues?

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

Contact Support

Related Integrations

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

Prerequisites

A MyFormCapture account - Sign up here
A form created in your MyFormCapture 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 MyFormCapture form directly to any page. This method gives you full control over form styling and placement.

Copy your form UUID from MyFormCapture

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

Log in to your MyFormCapture dashboard
Open the form you want to embed
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.

Add an Embed element in Webflow

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

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

Important Note

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

Paste the form code

Click the Embed element and paste your MyFormCapture form HTML.

Click the Embed element you just added
In the Embed settings, paste the form code below
Replace YOUR_FORM_UUID with your actual form UUID
Click Save & Close

<form action="https://myformcapture.com/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://myformcapture.com/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.

Publish and test

Publish your site and verify submissions reach your MyFormCapture dashboard.

Click Publish in the top-right corner
Visit your live website (not the Designer preview)
Fill in the form and click Submit
Check your MyFormCapture 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 MyFormCapture loader.js to your entire site using Webflow's Custom Code feature. Use this if you have multiple forms across different pages.

Access Site Settings

Navigate to your Webflow site settings to add custom code.

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

Important Note

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

Add loader.js to Head Code

Insert MyFormCapture loader.js in the Head Code section.

Click in the Head Code text area
Paste the loader script below
Replace YOUR_DOMAIN_UUID with your domain UUID from MyFormCapture dashboard
Click Save Changes

<!-- MyFormCapture loader.js (site-wide) -->
<script src="https://myformcapture.com/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.

Add forms using Embed elements

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

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

<form action="https://myformcapture.com/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.

Publish and test

Publish your site and verify the integration works.

Click Publish
Visit your live website
Test the form on different pages
Check your MyFormCapture dashboard for submissions

Troubleshooting

Still having issues?

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

Contact Support

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

Webflow Integration Guide

Prerequisites

Integration Methods

Embed Element (Recommended)

Copy your form UUID from MyFormCapture

Important Note

Add an Embed element in Webflow

Important Note

Paste the form code

Important Note

Publish and test

Important Note

Site-wide Custom Code

Access Site Settings

Important Note

Add loader.js to Head Code

Important Note

Add forms using Embed elements

Important Note

Publish and test

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

Webflow Integration Guide

Prerequisites

Integration Methods

Embed Element (Recommended)

Copy your form UUID from MyFormCapture

Important Note

Add an Embed element in Webflow

Important Note

Paste the form code

Important Note

Publish and test

Important Note

Site-wide Custom Code

Access Site Settings

Important Note

Add loader.js to Head Code

Important Note

Add forms using Embed elements

Important Note

Publish and test

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

MyFormCapture - Request Demo

Thank you for scheduling a demo!

MyFormCapture - Any issues?

Thank you for your request!

MyFormCapture - Tailored Solution