Static Sites Integration Guide

Complete guide to integrate MyFormCapture with Static Sites

Setup time: 5 minutes

Difficulty: Easy

Compatible versions: All HTML/CSS/JS sites

Integrate MyFormCapture with any static website built with HTML, CSS, and JavaScript. Perfect for custom-built sites, GitHub Pages, Netlify, Vercel, and other static hosting platforms.

Prerequisites

A MyFormCapture account - Sign up here
Your MyFormCapture integration code from your dashboard
Access to your website's HTML files
Basic understanding of HTML structure
FTP access or file manager (for hosted sites)

Integration Methods

HTML Head Integration

3 minutes Easy

Add MyFormCapture directly to your HTML head section for site-wide integration.

Locate HTML Head Section

Find the head section in your main HTML template or index file.

Open your main HTML file (usually index.html)
Locate the <head> section
Find the closing </head> tag

Important Note

For multi-page sites, you may need to add this to multiple HTML files or a shared template.

Add MyFormCapture Code

Insert the MyFormCapture integration code just before the closing head tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  
  <!-- Your existing head content -->
  
  <!-- MyFormCapture Integration -->
  <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-static', 'true');
    document.head.appendChild(script);
  })();
  </script>
</head>

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual MyFormCapture account ID from your dashboard.

Upload and Test

Upload your updated files and verify the integration works.

Save your HTML file
Upload to your web server via FTP or file manager
Clear browser cache and visit your site
Look for the MyFormCapture widget
Test the callback form functionality

JavaScript Module

8 minutes Intermediate

Load MyFormCapture as a JavaScript module for modern JavaScript applications.

Create MyFormCapture Module

Create a dedicated JavaScript module for MyFormCapture integration.

Create a new file called myformcapture.js
Add the MyFormCapture initialization code
Export the module for use in your application

Import and Initialize

Import the module in your main JavaScript file and initialize it.

// main.js
import MyFormCaptureIntegration from './myformcapture.js';

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', async () => {
  const myformcapture = new MyFormCaptureIntegration('YOUR_ACCOUNT_ID');
  
  try {
    await myformcapture.init();
    console.log('MyFormCapture widget loaded successfully');
  } catch (error) {
    console.error('Failed to load MyFormCapture:', error);
  }
});

Important Note

This approach provides better error handling and integration with modern JavaScript applications.

Asynchronous Loading

5 minutes Easy

Load MyFormCapture asynchronously to improve page performance.

Add Async Script

Implement asynchronous loading to prevent blocking page render.

<!-- Place this anywhere in your HTML body -->
<script>
(function() {
  // Create script element
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-static', 'true');
  script.async = true;
  
  // Add error handling
  script.onerror = function() {
    console.warn('MyFormCapture widget failed to load');
  };
  
  // Load when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      document.head.appendChild(script);
    });
  } else {
    document.head.appendChild(script);
  }
})();
</script>

Important Note

Asynchronous loading prevents the MyFormCapture script from blocking page rendering, improving user experience.

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
Access to your website's HTML files
Basic understanding of HTML structure
FTP access or file manager (for hosted sites)

Integration Methods

HTML Head Integration

3 minutes Easy

Add MyFormCapture directly to your HTML head section for site-wide integration.

Locate HTML Head Section

Find the head section in your main HTML template or index file.

Open your main HTML file (usually index.html)
Locate the <head> section
Find the closing </head> tag

Important Note

For multi-page sites, you may need to add this to multiple HTML files or a shared template.

Add MyFormCapture Code

Insert the MyFormCapture integration code just before the closing head tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  
  <!-- Your existing head content -->
  
  <!-- MyFormCapture Integration -->
  <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-static', 'true');
    document.head.appendChild(script);
  })();
  </script>
</head>

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual MyFormCapture account ID from your dashboard.

Upload and Test

Upload your updated files and verify the integration works.

Save your HTML file
Upload to your web server via FTP or file manager
Clear browser cache and visit your site
Look for the MyFormCapture widget
Test the callback form functionality

JavaScript Module

8 minutes Intermediate

Load MyFormCapture as a JavaScript module for modern JavaScript applications.

Create MyFormCapture Module

Create a dedicated JavaScript module for MyFormCapture integration.

Create a new file called myformcapture.js
Add the MyFormCapture initialization code
Export the module for use in your application

Import and Initialize

Import the module in your main JavaScript file and initialize it.

// main.js
import MyFormCaptureIntegration from './myformcapture.js';

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', async () => {
  const myformcapture = new MyFormCaptureIntegration('YOUR_ACCOUNT_ID');
  
  try {
    await myformcapture.init();
    console.log('MyFormCapture widget loaded successfully');
  } catch (error) {
    console.error('Failed to load MyFormCapture:', error);
  }
});

Important Note

This approach provides better error handling and integration with modern JavaScript applications.

Asynchronous Loading

5 minutes Easy

Load MyFormCapture asynchronously to improve page performance.

Add Async Script

Implement asynchronous loading to prevent blocking page render.

<!-- Place this anywhere in your HTML body -->
<script>
(function() {
  // Create script element
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-static', 'true');
  script.async = true;
  
  // Add error handling
  script.onerror = function() {
    console.warn('MyFormCapture widget failed to load');
  };
  
  // Load when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      document.head.appendChild(script);
    });
  } else {
    document.head.appendChild(script);
  }
})();
</script>

Important Note

Asynchronous loading prevents the MyFormCapture script from blocking page rendering, improving user experience.

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

Static Sites Integration Guide

Prerequisites

Integration Methods

HTML Head Integration

Locate HTML Head Section

Important Note

Add MyFormCapture Code

Important Note

Upload and Test

JavaScript Module

Create MyFormCapture Module

Import and Initialize

Important Note

Asynchronous Loading

Add Async Script

Important Note

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

Static Sites Integration Guide

Prerequisites

Integration Methods

HTML Head Integration

Locate HTML Head Section

Important Note

Add MyFormCapture Code

Important Note

Upload and Test

JavaScript Module

Create MyFormCapture Module

Import and Initialize

Important Note

Asynchronous Loading

Add Async Script

Important Note

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

My Form Capture - Setup a Demo

Thank you for scheduling a demo!

Request a Call Back

Thank you for your request!

Connect With Us

Welcome to the waitlist!