Drupal Integration Guide

Complete guide to integrate MyFormCapture with Drupal

Setup time: 10-15 minutes

Difficulty: Intermediate

Compatible versions: Drupal 8.x, 9.x, 10.x

Integrate MyFormCapture with your Drupal website to capture leads from contact forms, webforms, and custom forms. Drupal powers over 1 million websites worldwide and offers powerful content management capabilities.

Prerequisites

A MyFormCapture account - Sign up here
Your MyFormCapture integration code from your dashboard
Drupal admin access (Administrator role)
Drupal 8.x, 9.x, or 10.x installation
Basic understanding of Drupal modules (for custom module method)

Integration Methods

Custom Module

15 minutes Intermediate

Create a custom Drupal module for MyFormCapture integration. This is the most maintainable and Drupal-friendly approach.

Create Module Directory

Set up the basic module structure in your Drupal installation.

Navigate to /modules/custom in your Drupal root directory
Create a new directory called myformcapture_integration
Create the module info file myformcapture_integration.info.yml

name: 'MyFormCapture Integration'
type: module
description: 'Integrates MyFormCapture lead capture widget with Drupal'
package: Custom
core_version_requirement: ^8 || ^9 || ^10
version: '1.0.0'
dependencies:
  - drupal:system

Important Note

The info.yml file defines your module and its dependencies. Make sure indentation is correct as YAML is sensitive to spacing.

Create Module Files

Add the main module files to handle MyFormCapture integration.

Create myformcapture_integration.module file
Create myformcapture_integration.libraries.yml file
Create js/myformcapture.js file in your module directory

<?php

/**
 * @file
 * MyFormCapture Integration module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function myformcapture_integration_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.myformcapture_integration':
      return '<p>' . t('MyFormCapture integration for capturing leads.') . '</p>';
  }
}

/**
 * Implements hook_page_attachments().
 */
function myformcapture_integration_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'myformcapture_integration/myformcapture';
}

Important Note

The hook_page_attachments() function ensures the MyFormCapture script loads on every page.

Create Library Definition

Define the JavaScript library that will load MyFormCapture on your site.

myformcapture:
  js:
    js/myformcapture.js: {}
  dependencies:
    - core/drupal
    - core/jquery

Important Note

Libraries in Drupal handle JavaScript and CSS loading efficiently. This ensures proper loading order and caching.

Add JavaScript File

Create the JavaScript file that initializes MyFormCapture.

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.myformcaptureIntegration = {
    attach: function (context, settings) {
      // Use once() to ensure the script only runs once per element
      $(context).find('body').once('myformcapture').each(function() {
        // Load MyFormCapture script dynamically
        var script = document.createElement('script');
        script.src = 'https://widget.callmebackbutton.com/widget.js';
        script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
        script.setAttribute('data-drupal', 'true');
        document.head.appendChild(script);
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual MyFormCapture account ID. The data-drupal attribute helps optimize for Drupal-specific features.

Enable and Test Module

Activate the module and verify the integration works.

Go to Extend in your Drupal admin
Find 'MyFormCapture Integration' and check the checkbox
Click Install
Clear cache via Configuration → Performance → Clear all caches
Visit your site to verify the widget appears

Important Note

Always clear cache after enabling new modules. Check browser console for any JavaScript errors.

Theme Integration

10 minutes Easy

Add MyFormCapture directly to your theme template. Quick setup but less maintainable.

Access Theme Files

Navigate to your active theme's template files.

Go to /themes/custom/your-theme or your theme directory
Create or edit templates/html.html.twig
If the file doesn't exist, copy it from core templates

Important Note

Always work with a custom theme or create a sub-theme to prevent losing changes during theme updates.

Add MyFormCapture Code

Insert the MyFormCapture integration code into your theme template.

{# templates/html.html.twig #}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
    
    {# 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-drupal', 'true');
      document.head.appendChild(script);
    })();
    </script>
  </head>
  <body{{ attributes }}>
    <a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual account ID. This method requires re-adding code after theme updates.

Clear Cache and Test

Clear Drupal cache and verify the integration.

Go to Configuration → Performance
Click Clear all caches
Visit your website to test the integration
Check browser console for any errors

Custom Block

12 minutes Intermediate

Create a custom block with MyFormCapture code for flexible placement.

Create Custom Block

Use Drupal's block system to add MyFormCapture.

Go to Structure → Block layout
Click Custom block library
Click Add custom block
Choose Basic block

Add Block Content

Configure the block with MyFormCapture integration code.

Set block description: 'MyFormCapture Integration'
In the body field, switch to 'Full HTML' text format
Add the MyFormCapture script in the body
Save the block

<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-drupal', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

This method allows you to place MyFormCapture on specific pages or regions.

Place Block

Position the block in your site layout.

Return to Structure → Block layout
Find your 'MyFormCapture Integration' block
Place it in a region (e.g., Header, Footer)
Configure visibility settings as needed
Save the layout

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
Drupal admin access (Administrator role)
Drupal 8.x, 9.x, or 10.x installation
Basic understanding of Drupal modules (for custom module method)

Integration Methods

Custom Module

15 minutes Intermediate

Create a custom Drupal module for MyFormCapture integration. This is the most maintainable and Drupal-friendly approach.

Create Module Directory

Set up the basic module structure in your Drupal installation.

Navigate to /modules/custom in your Drupal root directory
Create a new directory called myformcapture_integration
Create the module info file myformcapture_integration.info.yml

name: 'MyFormCapture Integration'
type: module
description: 'Integrates MyFormCapture lead capture widget with Drupal'
package: Custom
core_version_requirement: ^8 || ^9 || ^10
version: '1.0.0'
dependencies:
  - drupal:system

Important Note

The info.yml file defines your module and its dependencies. Make sure indentation is correct as YAML is sensitive to spacing.

Create Module Files

Add the main module files to handle MyFormCapture integration.

Create myformcapture_integration.module file
Create myformcapture_integration.libraries.yml file
Create js/myformcapture.js file in your module directory

<?php

/**
 * @file
 * MyFormCapture Integration module.
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function myformcapture_integration_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    case 'help.page.myformcapture_integration':
      return '<p>' . t('MyFormCapture integration for capturing leads.') . '</p>';
  }
}

/**
 * Implements hook_page_attachments().
 */
function myformcapture_integration_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'myformcapture_integration/myformcapture';
}

Important Note

The hook_page_attachments() function ensures the MyFormCapture script loads on every page.

Create Library Definition

Define the JavaScript library that will load MyFormCapture on your site.

myformcapture:
  js:
    js/myformcapture.js: {}
  dependencies:
    - core/drupal
    - core/jquery

Important Note

Libraries in Drupal handle JavaScript and CSS loading efficiently. This ensures proper loading order and caching.

Add JavaScript File

Create the JavaScript file that initializes MyFormCapture.

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.myformcaptureIntegration = {
    attach: function (context, settings) {
      // Use once() to ensure the script only runs once per element
      $(context).find('body').once('myformcapture').each(function() {
        // Load MyFormCapture script dynamically
        var script = document.createElement('script');
        script.src = 'https://widget.callmebackbutton.com/widget.js';
        script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
        script.setAttribute('data-drupal', 'true');
        document.head.appendChild(script);
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

Important Note

Replace 'YOUR_ACCOUNT_ID' with your actual MyFormCapture account ID. The data-drupal attribute helps optimize for Drupal-specific features.

Enable and Test Module

Activate the module and verify the integration works.

Go to Extend in your Drupal admin
Find 'MyFormCapture Integration' and check the checkbox
Click Install
Clear cache via Configuration → Performance → Clear all caches
Visit your site to verify the widget appears

Important Note

Always clear cache after enabling new modules. Check browser console for any JavaScript errors.

Custom Block

12 minutes Intermediate

Create a custom block with MyFormCapture code for flexible placement.

Create Custom Block

Use Drupal's block system to add MyFormCapture.

Go to Structure → Block layout
Click Custom block library
Click Add custom block
Choose Basic block

Add Block Content

Configure the block with MyFormCapture integration code.

Set block description: 'MyFormCapture Integration'
In the body field, switch to 'Full HTML' text format
Add the MyFormCapture script in the body
Save the block

<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-drupal', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

This method allows you to place MyFormCapture on specific pages or regions.

Place Block

Position the block in your site layout.

Return to Structure → Block layout
Find your 'MyFormCapture Integration' block
Place it in a region (e.g., Header, Footer)
Configure visibility settings as needed
Save the layout

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

Drupal Integration Guide

Prerequisites

Integration Methods

Custom Module

Create Module Directory

Important Note

Create Module Files

Important Note

Create Library Definition

Important Note

Add JavaScript File

Important Note

Enable and Test Module

Important Note

Theme Integration

Access Theme Files

Important Note

Add MyFormCapture Code

Important Note

Clear Cache and Test

Custom Block

Create Custom Block

Add Block Content

Important Note

Place Block

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure MyFormCapture

Advanced Features

Need Help?

Drupal Integration Guide

Prerequisites

Integration Methods

Custom Module

Create Module Directory

Important Note

Create Module Files

Important Note

Create Library Definition

Important Note

Add JavaScript File

Important Note

Enable and Test Module

Important Note

Theme Integration

Access Theme Files

Important Note

Add MyFormCapture Code

Important Note

Clear Cache and Test

Custom Block

Create Custom Block

Add Block Content

Important Note

Place Block

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!