BDM Mailer Integration Guide

Connect any form to BDM Mailer with automatic tagging and subscriber management. From simple newsletter forms to complex e-commerce integrations.

Quick Setup

Get your newsletter form connected to BDM Mailer in under 10 minutes with automatic "Newsletter Subscribed" tagging.

Enhanced Newsletter Form

Replace your existing newsletter form with our enhanced version that includes validation, error handling, and automatic BDM Mailer integration.

  • Real-time email validation
  • Automatic "Newsletter Subscribed" tagging
  • Success & error messaging
View Form Code →

PHP Backend Setup

Server-side integration that handles API calls, subscriber management, and automatic tagging for your BDM Mailer account.

  • Direct API integration
  • Source tracking & analytics
  • Error handling & logging
View PHP Code →

Configuration Steps

1

Update API Credentials

Replace placeholder values with your actual BDM Mailer API key and endpoints

2

Deploy Backend Code

Upload PHP integration code to your server and configure the API endpoint

3

Test Integration

Submit test emails and verify subscribers appear in BDM Mailer with correct tags

Universal Form Connector

Connect any existing form to BDM Mailer without changing your current design or functionality.

JavaScript Embed

Add one script tag to connect any form instantly

Learn More →

Direct API

RESTful API integration for custom applications

View API Docs →

Webhook Setup

Real-time data synchronization via webhooks

Setup Guide →

⚠️ Important: Targeting Specific Forms

If you have multiple forms on your page, you need to ensure the integration only affects your newsletter form to avoid conflicts.

Option 1: Unique ID (Recommended)

Give your newsletter form a unique ID:

<form id="bdmhub-newsletter">
  <input id="newsletter-email">
  <button id="newsletter-submit">
</form>

Then target specific elements by ID in your JavaScript.

Option 2: CSS Classes

Use specific classes for BDM forms:

<form class="bdm-mailer-form"
  data-bdm-tags="Newsletter">
  <input class="bdm-email-input">
</form>

Automatically finds all BDM forms on the page.

Option 3: Function Call

Connect forms programmatically:

connectFormToBDMMailer(
  '#newsletter-form', {
    tags: ['Newsletter']
  }
);

Most flexible for complex implementations.

Method 1: Unique ID Targeting (Recommended)

Most reliable method for single newsletter forms:

HTML with Unique ID:

<form id="bdmhub-newsletter" class="flex flex-col sm:flex-row gap-3 w-full">
  <input
    type="email"
    id="newsletter-email"
    name="email"
    placeholder="Enter your email"
    required
    class="flex-1 px-4 py-2...">
  <button
    type="submit"
    id="newsletter-submit"
    class="bg-blue-600...">
    Subscribe
  </button>
</form>

JavaScript targeting specific IDs:

document.getElementById('bdmhub-newsletter').addEventListener('submit', async function(e) {
  e.preventDefault();
  
  const email = document.getElementById('newsletter-email').value;
  const submitBtn = document.getElementById('newsletter-submit');
  
  // Your BDM Mailer integration code here...
});

Method 2: CSS Class Targeting

Automatically connects all BDM Mailer forms on the page:

HTML with BDM classes:

<form class="bdm-mailer-form"
      data-bdm-tags="Newsletter Subscribed,Website Form"
      data-bdm-source="bdmhub.com">
  <input type="email" class="bdm-email-input" name="email" placeholder="Enter your email" required>
  <button type="submit" class="bdm-submit-btn">Subscribe</button>
</form>

JavaScript that finds all BDM forms:

document.querySelectorAll('.bdm-mailer-form').forEach(form => {
  const emailInput = form.querySelector('.bdm-email-input');
  const submitBtn = form.querySelector('.bdm-submit-btn');
  const tags = form.dataset.bdmTags ? form.dataset.bdmTags.split(',') : ['Newsletter Subscribed'];
  const source = form.dataset.bdmSource || 'website';
  
  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    // Handle submission with custom tags and source
  });
});

Method 3: Universal Connector Function

Most flexible approach for complex implementations:

// Universal connector function
function connectFormToBDMMailer(formSelector, options = {}) {
  const form = document.querySelector(formSelector);
  if (!form) {
    console.warn('BDM Mailer: Form not found:', formSelector);
    return;
  }
  
  const config = {
    emailField: 'input[type="email"]',
    tags: ['Newsletter Subscribed'],
    source: 'website',
    successMessage: 'Thanks for subscribing!',
    ...options
  };
  
  // Integration code here...
}

// Connect multiple forms with different configurations
connectFormToBDMMailer('#newsletter-form', {
  tags: ['Newsletter Subscribed', 'BDM Hub'],
  source: 'bdmhub.com'
});

connectFormToBDMMailer('#contact-form', {
  tags: ['Contact Form', 'Lead'],
  source: 'contact-page'
});

Platform Integration Guides

Step-by-step guides for popular platforms and Content Management Systems.

WordPress

Shortcodes, Contact Form 7, Gravity Forms integration

• Shortcode integration
• Contact Form 7 hooks
• Gravity Forms actions
Read Guide →

Shopify

Customer registration and checkout form integration

• Theme integration
• Customer events
• Checkout hooks
Read Guide →

WooCommerce

Customer registration and order completion integration

• Customer hooks
• Order completion
• Checkout forms
Read Guide →

Webflow

Custom embed and form submission handling

• Custom embed code
• Form submissions
• Zapier integration
Read Guide →

Laravel

Package integration and event listeners

• Composer package
• Event listeners
• Queue integration
Read Guide →

Custom HTML

Static websites and custom implementations

• Vanilla JavaScript
• Direct API calls
• Static sites
Read Guide →

Advanced Features

Powerful features for complex integrations and advanced subscriber management.

Dynamic Tagging Strategies

Automatically apply tags based on traffic source, time of subscription, user behavior, and custom criteria.

  • Source-based tagging (Facebook, Google, etc.)
  • Time-based segmentation
  • Behavioral triggers
  • Geographic location

Webhook Integration

Set up real-time webhooks for instant data synchronization and event-driven automation.

  • Real-time subscriber events
  • Signature verification
  • Retry mechanisms
  • Event filtering

Error Handling & Logging

Comprehensive error handling, logging, and monitoring to ensure reliable integrations.

  • Detailed error logging
  • Retry mechanisms
  • Rate limiting protection
  • Performance monitoring

Troubleshooting

Common integration issues and their solutions to keep your forms connected to BDM Mailer.

Subscribers not appearing in BDM Mailer

If form submissions aren't creating subscribers in BDM Mailer:

  • Verify your API key and endpoint URL are correct
  • Check the browser's Network tab for failed API requests
  • Ensure the email field selector matches your form
  • Review server logs for integration errors

Tags not being applied correctly

If subscribers are created but tags aren't applied:

  • Check that tag names match exactly (case-sensitive)
  • Verify your BDM Mailer account has permission to create tags
  • Ensure the tags array is properly formatted in the API call
  • Test with a simple tag like "Test" first

Form validation errors

If your form shows validation errors:

  • Check that email validation regex is working correctly
  • Ensure required fields are properly marked
  • Test with a simple email address first
  • Check browser console for JavaScript errors

API connection timeout errors

If you're experiencing timeout issues:

  • Check your server's internet connectivity
  • Verify BDM Mailer API endpoints are accessible
  • Implement retry logic for failed requests
  • Consider using a queue for bulk operations

Duplicate subscriptions

If you're getting duplicate subscribers:

  • Enable client-side form submission protection
  • Check BDM Mailer's duplicate handling settings
  • Implement server-side duplicate checking
  • Use unique identifiers for tracking submissions

Testing Your Integration

Quick Test Steps

  1. Submit a test email through your form
  2. Check BDM Mailer for the new subscriber
  3. Verify the "Newsletter Subscribed" tag is applied
  4. Test error handling with an invalid email

API Test Command

curl -X POST /api/newsletter/subscribe \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com"}'

Need Integration Help?

Our team is here to help you connect your forms to BDM Mailer successfully.

Email us at mailer@bdmhub.com for BDM Mailer integration questions