Auto copy email from one field to multiple fields in Ninja Forms WordPress plugin. jQuery solution for business email duplication across billing, support, marketing fields. Copy email address automatically with checkbox control and editable overrides.

ninja-forms-auto-email-copy-jquery.md

Ninja Forms Auto Email Copy - jQuery Solution

This jQuery script automatically copies an email address from one field to multiple other fields when a checkbox is checked. Perfect for forms where users want to use their business email for multiple purposes (billing, support, marketing, etc.).

Features

• ✅ Copy email from main field to multiple target fields
• ✅ Real-time updates when main email changes
• ✅ Fields remain editable for user overrides
• ✅ Clears target fields when checkbox is unchecked
• ✅ Waits for DOM elements to load properly
• ✅ Works with any number of target email fields

Required CSS Classes

You need to add these custom CSS classes to your Ninja Forms fields:

1. Main Email Field

• CSS Class: .main-email
• Field Type: Email
• Location: Email → Display → Element CSS Classes
• Purpose: This is your primary email field (e.g., "Business Email")

2. Checkbox Field

• CSS Class: .confirm-copy-email
• Field Type: Single Checkbox
• Location: Single Checkbox → Display → Element CSS Classes
• Purpose: The checkbox that controls whether to copy the email
• Label Example: "Use Business Email for all other email fields"

3. Target Email Fields

• CSS Class: .copy-email
• Field Type: Email
• Location: Email → Display → Element CSS Classes
• Purpose: All email fields that should receive the copied email
• Examples: Billing Email, Support Email, Marketing Email, etc.

How to Add CSS Classes in Ninja Forms

1. Edit your form in Ninja Forms
2. Click on the field you want to modify
3. Go to Display tab
4. Find "Element" field
5. Add the appropriate CSS class (without the dot):
   • For main email: main-email
   • For checkbox: confirm-copy-email
   • For target emails: copy-email
6. Save the field
7. Repeat for all relevant fields

jQuery Code

Add this code to your theme's functions.php file or use a plugin like "Insert Headers and Footers":

jQuery(document).ready(function($) {
    // Function to check if all required elements are available in DOM
    function checkElementsAvailable() {
        return $('.main-email').length > 0 && 
               $('.confirm-copy-email').length > 0 && 
               $('.copy-email').length > 0;
    }
    
    // Function to copy email from main field to copy fields
    function copyEmailToFields() {
        var mainEmail = $('.main-email').val();
        var isChecked = $('.confirm-copy-email').is(':checked');
        
        if (isChecked && mainEmail) {
            $('.copy-email').val(mainEmail);
        } else if (!isChecked) {
            $('.copy-email').val('');
        }
    }
    
    // Function to initialize the email copy functionality
    function initializeEmailCopy() {
        if (!checkElementsAvailable()) {
            // If elements are not ready, wait a bit and try again
            setTimeout(initializeEmailCopy, 100);
            return;
        }
        
        // Elements are available, set up event listeners
        
        // Listen for checkbox change
        $('.confirm-copy-email').on('change', function() {
            copyEmailToFields();
        });
        
        // Listen for main email field changes
        $('.main-email').on('input keyup change', function() {
            copyEmailToFields();
        });
        
        // Initial copy if checkbox is already checked
        copyEmailToFields();
    }
    
    // Start the initialization process
    initializeEmailCopy();
});

Implementation Methods

Method 1: Theme's functions.php (Recommended)

function add_ninja_forms_email_copy_script() {
    if (function_exists('ninja_forms')) {
        ?>
        <script>
        jQuery(document).ready(function($) {
            function checkElementsAvailable() {
                return $('.main-email').length > 0 && 
                       $('.confirm-copy-email').length > 0 && 
                       $('.copy-email').length > 0;
            }
            
            function copyEmailToFields() {
                var mainEmail = $('.main-email').val();
                var isChecked = $('.confirm-copy-email').is(':checked');
                
                if (isChecked && mainEmail) {
                    $('.copy-email').val(mainEmail);
                } else if (!isChecked) {
                    $('.copy-email').val('');
                }
            }
            
            function initializeEmailCopy() {
                if (!checkElementsAvailable()) {
                    setTimeout(initializeEmailCopy, 100);
                    return;
                }
                
                $('.confirm-copy-email').on('change', function() {
                    copyEmailToFields();
                });
                
                $('.main-email').on('input keyup change', function() {
                    copyEmailToFields();
                });
                
                copyEmailToFields();
            }
            
            initializeEmailCopy();
        });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_ninja_forms_email_copy_script');

Method 2: Insert Headers and Footers Plugin

1. Install Insert Headers and Footers plugin
2. Go to Settings → Insert Headers and Footers
3. Add the jQuery code wrapped in <script> tags to the Footer section

Screenshot