Webflow Integration Guide

Complete guide to integrate MyFormCapture with Webflow

Setup time: 5-10 minutes

Difficulty: Easy

Compatible versions: All Webflow plans

Integrate MyFormCapture with your Webflow website to capture leads from contact forms and custom interactions. Webflow powers over 3.5 million websites with its visual development platform.

Prerequisites

A MyFormCapture account - Sign up here
Your MyFormCapture integration code from your dashboard
Webflow site admin access
Published Webflow site (any plan)
Basic understanding of Webflow's interface

Integration Methods

Site-wide Custom Code

5 minutes Easy

Use Webflow's Custom Code feature to add MyFormCapture across your entire site. This is the recommended method for most users.

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 MyFormCapture to Head Code

Insert your MyFormCapture integration code in the Head Code section.

Click in the Head Code text area
Paste your MyFormCapture integration code
Click Save Changes
Publish your site for changes to take effect

<!-- MyFormCapture Integration for Webflow -->
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-webflow', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

The data-webflow attribute helps optimize the widget for Webflow-specific features and responsive design.

Publish and Test

Publish your site and verify the MyFormCapture integration works correctly.

Click Publish (top-right corner)
Visit your live website
Look for the MyFormCapture widget
Test the callback form functionality
Check your MyFormCapture dashboard for submissions

Important Note

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

Page-Specific Integration

8 minutes Easy

Add MyFormCapture to specific pages using Webflow's page-level custom code settings.

Select Target Page

Choose the specific page where you want to add MyFormCapture.

In the Webflow designer, select your target page
Click the Settings gear icon
Go to SEO tab
Scroll down to find custom code sections

Add Page-Level Code

Insert MyFormCapture code in the page's custom code section.

Paste your code in Inside <head> tag
Click Save Changes
Repeat for other pages as needed
Publish your site

<script>
(function() {
  // Only load if not already loaded
  if (!window.myformcaptureWebflowLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    document.head.appendChild(script);
    window.myformcaptureWebflowLoaded = true;
  }
})();
</script>

Important Note

This method gives you control over which pages show the MyFormCapture widget.

HTML Embed Element

10 minutes Intermediate

Use Webflow's HTML Embed element for advanced placement control within page layouts.

Add HTML Embed Element

Insert an HTML Embed element in your Webflow layout.

Drag an HTML Embed element from the Add panel
Position it where you want MyFormCapture to initialize
Click the element to open the code editor

Configure Embed Code

Add MyFormCapture initialization code to the embed element.

<script>
(function() {
  // Initialize MyFormCapture with advanced options
  if (!window.myformcaptureEmbedLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    script.setAttribute('data-trigger-element', 'embed');
    document.head.appendChild(script);
    window.myformcaptureEmbedLoaded = true;
  }
})();
</script>

<div style="height: 1px; visibility: hidden;"><!-- MyFormCapture Embed --></div>

Important Note

The invisible div ensures the embed has content while MyFormCapture creates its own UI.

Style and Position

Configure the embed element's styling and position.

Set the embed width to 100% and height to auto
Position the element appropriately in your layout
The embed itself will be invisible
Save and publish your site

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 business hours and timezone
Configure callback phone numbers
Set up email notifications
Add team members to your account

Advanced Features

Set up custom form templates
Configure lead scoring rules
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
Your MyFormCapture integration code from your dashboard
Webflow site admin access
Published Webflow site (any plan)
Basic understanding of Webflow's interface

Integration Methods

Site-wide Custom Code

5 minutes Easy

Use Webflow's Custom Code feature to add MyFormCapture across your entire site. This is the recommended method for most users.

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 MyFormCapture to Head Code

Insert your MyFormCapture integration code in the Head Code section.

Click in the Head Code text area
Paste your MyFormCapture integration code
Click Save Changes
Publish your site for changes to take effect

<!-- MyFormCapture Integration for Webflow -->
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-webflow', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

The data-webflow attribute helps optimize the widget for Webflow-specific features and responsive design.

Publish and Test

Publish your site and verify the MyFormCapture integration works correctly.

Click Publish (top-right corner)
Visit your live website
Look for the MyFormCapture widget
Test the callback form functionality
Check your MyFormCapture dashboard for submissions

Important Note

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

Page-Specific Integration

8 minutes Easy

Add MyFormCapture to specific pages using Webflow's page-level custom code settings.

Select Target Page

Choose the specific page where you want to add MyFormCapture.

In the Webflow designer, select your target page
Click the Settings gear icon
Go to SEO tab
Scroll down to find custom code sections

Add Page-Level Code

Insert MyFormCapture code in the page's custom code section.

Paste your code in Inside <head> tag
Click Save Changes
Repeat for other pages as needed
Publish your site

<script>
(function() {
  // Only load if not already loaded
  if (!window.myformcaptureWebflowLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    document.head.appendChild(script);
    window.myformcaptureWebflowLoaded = true;
  }
})();
</script>

Important Note

This method gives you control over which pages show the MyFormCapture widget.

HTML Embed Element

10 minutes Intermediate

Use Webflow's HTML Embed element for advanced placement control within page layouts.

Add HTML Embed Element

Insert an HTML Embed element in your Webflow layout.

Drag an HTML Embed element from the Add panel
Position it where you want MyFormCapture to initialize
Click the element to open the code editor

Configure Embed Code

Add MyFormCapture initialization code to the embed element.

<script>
(function() {
  // Initialize MyFormCapture with advanced options
  if (!window.myformcaptureEmbedLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-webflow', 'true');
    script.setAttribute('data-trigger-element', 'embed');
    document.head.appendChild(script);
    window.myformcaptureEmbedLoaded = true;
  }
})();
</script>

<div style="height: 1px; visibility: hidden;"><!-- MyFormCapture Embed --></div>

Important Note

The invisible div ensures the embed has content while MyFormCapture creates its own UI.

Style and Position

Configure the embed element's styling and position.

Set the embed width to 100% and height to auto
Position the element appropriately in your layout
The embed itself will be invisible
Save and publish your site

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 business hours and timezone
Configure callback phone numbers
Set up email notifications
Add team members to your account

Advanced Features

Set up custom form templates
Configure lead scoring rules
Integrate with your CRM
Set up automated workflows

Webflow Integration Guide

Prerequisites

Integration Methods

Site-wide Custom Code

Access Site Settings

Important Note

Add MyFormCapture to Head Code

Important Note

Publish and Test

Important Note

Page-Specific Integration

Select Target Page

Add Page-Level Code

Important Note

HTML Embed Element

Add HTML Embed Element

Configure Embed Code

Important Note

Style and Position

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

Webflow Integration Guide

Prerequisites

Integration Methods

Site-wide Custom Code

Access Site Settings

Important Note

Add MyFormCapture to Head Code

Important Note

Publish and Test

Important Note

Page-Specific Integration

Select Target Page

Add Page-Level Code

Important Note

HTML Embed Element

Add HTML Embed Element

Configure Embed Code

Important Note

Style and Position

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

Setup a Demo

Thank you for scheduling a demo!

Request a Call Back

Thank you for your request!

Join Our Waitlist

Welcome to the waitlist!