Webflow Integration Guide

Complete guide to integrate MyFormConnect with Webflow

Setup time: 5-10 minutes

Difficulty: Easy

Compatible versions: All Webflow plans

Integrate MyFormConnect 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 MyFormConnect account - Sign up here
Your MyFormConnect 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 MyFormConnect 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 MyFormConnect to Head Code

Insert your MyFormConnect integration code in the Head Code section.

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

<!-- MyFormConnect 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 MyFormConnect integration works correctly.

Click Publish (top-right corner)
Visit your live website
Look for the MyFormConnect widget
Test the callback form functionality
Check your MyFormConnect 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 MyFormConnect to specific pages using Webflow's page-level custom code settings.

Select Target Page

Choose the specific page where you want to add MyFormConnect.

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 MyFormConnect 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 MyFormConnect 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 MyFormConnect to initialize
Click the element to open the code editor

Configure Embed Code

Add MyFormConnect initialization code to the embed element.

<script>
(function() {
  // Initialize MyFormConnect 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;"><!-- MyFormConnect Embed --></div>

Important Note

The invisible div ensures the embed has content while MyFormConnect 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 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

Need Help?

Our support team is here to help you with your integration.

Contact Support

Prerequisites

A MyFormConnect account - Sign up here
Your MyFormConnect 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 MyFormConnect 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 MyFormConnect to Head Code

Insert your MyFormConnect integration code in the Head Code section.

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

<!-- MyFormConnect 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 MyFormConnect integration works correctly.

Click Publish (top-right corner)
Visit your live website
Look for the MyFormConnect widget
Test the callback form functionality
Check your MyFormConnect 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 MyFormConnect to specific pages using Webflow's page-level custom code settings.

Select Target Page

Choose the specific page where you want to add MyFormConnect.

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 MyFormConnect 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 MyFormConnect 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 MyFormConnect to initialize
Click the element to open the code editor

Configure Embed Code

Add MyFormConnect initialization code to the embed element.

<script>
(function() {
  // Initialize MyFormConnect 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;"><!-- MyFormConnect Embed --></div>

Important Note

The invisible div ensures the embed has content while MyFormConnect 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 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

Webflow Integration Guide

Prerequisites

Integration Methods

Site-wide Custom Code

Access Site Settings

Important Note

Add MyFormConnect 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 MyFormConnect

Advanced Features

Need Help?

Webflow Integration Guide

Prerequisites

Integration Methods

Site-wide Custom Code

Access Site Settings

Important Note

Add MyFormConnect 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 MyFormConnect

Advanced Features

Need Help?

MyFormConnect - Request Demo

Thank you for scheduling a demo!

MyFormConnect - Schedule a Callback

Thank you for your request!

MyFormConnect - Tailored Solution