Drupal Integration Guide

Complete guide to integrate MyFormConnect with Drupal

Setup time: 10-15 minutes

Difficulty: Intermediate

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

Integrate MyFormConnect 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 MyFormConnect account - Sign up here
Your MyFormConnect 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 MyFormConnect 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: 'MyFormConnect Integration'
type: module
description: 'Integrates MyFormConnect 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 MyFormConnect integration.

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

<?php

/**
 * @file
 * MyFormConnect 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('MyFormConnect 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 MyFormConnect script loads on every page.

Create Library Definition

Define the JavaScript library that will load MyFormConnect 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 MyFormConnect.

(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 MyFormConnect 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 MyFormConnect 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 'MyFormConnect 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 MyFormConnect 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 MyFormConnect Code

Insert the MyFormConnect 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 }}">
    
    {# MyFormConnect 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 MyFormConnect code for flexible placement.

Create Custom Block

Use Drupal's block system to add MyFormConnect.

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

Add Block Content

Configure the block with MyFormConnect integration code.

Set block description: 'MyFormConnect Integration'
In the body field, switch to 'Full HTML' text format
Add the MyFormConnect 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 MyFormConnect on specific pages or regions.

Place Block

Position the block in your site layout.

Return to Structure → Block layout
Find your 'MyFormConnect 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 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
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 MyFormConnect 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: 'MyFormConnect Integration'
type: module
description: 'Integrates MyFormConnect 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 MyFormConnect integration.

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

<?php

/**
 * @file
 * MyFormConnect 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('MyFormConnect 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 MyFormConnect script loads on every page.

Create Library Definition

Define the JavaScript library that will load MyFormConnect 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 MyFormConnect.

(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 MyFormConnect 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 MyFormConnect 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 'MyFormConnect 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 MyFormConnect code for flexible placement.

Create Custom Block

Use Drupal's block system to add MyFormConnect.

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

Add Block Content

Configure the block with MyFormConnect integration code.

Set block description: 'MyFormConnect Integration'
In the body field, switch to 'Full HTML' text format
Add the MyFormConnect 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 MyFormConnect on specific pages or regions.

Place Block

Position the block in your site layout.

Return to Structure → Block layout
Find your 'MyFormConnect 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 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

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

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

Advanced Features

Need Help?

MyFormConnect - Request Demo

Thank you for scheduling a demo!

MyFormConnect - Any issues?

Thank you for your request!

MyFormConnect - Tailored Solution