feat: port AJAX form submission from premium to core (#835)

- Migrates AJAX form submission from premium to core via REST API.
- Replaces static 'Loading button text' with animated dots.
- Merges AJAX JS logic directly into core forms.js bundle.
- Includes backwards compatibility checks to prevent conflicts with older premium versions.

Author: faisalahammad

CHANGELOG.md

@@ -1,21 +1,6 @@
 Changelog
 =========
 
-#### 4.12.2 - Apr 20, 2026
-
-- Add Mailchimp Campaign Archive block and [mc4wp_campaigns] shortcode to show an archive Mailchimp email campaigns. Thanks to [Faisal Ahammad](https://faisalahammad.com/)!
-- WooCommerce: Allow "after email" position for sign-up checkbox when using Checkout Block.
-- WooCommerce: Detect use of Checkout Block and only show available positions.
-- Show warning when cron is behind schedule. Thanks to [Faisal Ahammad](https://faisalahammad.com/)!
-- Add preliminary support for [Mailchimp Site Tracking Pixel](https://mailchimp.com/help/about-mailchimp-site-tracking-pixel/). Thanks to [Faisal Ahammad](https://faisalahammad.com/)!
-
-
-#### 4.12.1 - Mar 26, 2026
-
-- Supply a custom capability type to `register_post_type` for the `mc4wp-form` post type.
-- Limit allowed HTML in the various form messages to a safe subset on load (versus only on update).
-
-
 #### 4.12.0 - Mar 9, 2026
 
 - Remove the ability to unsubscribe through a form. You should migrate to the Mailchimp hosted form for this, which does email verification.
@@ -32,6 +17,7 @@ The following fixes and improvements were contributed by [Faisal Ahammad](https:
 - Enable live updates in Gravity Forms editor.
 
 
+
 #### 4.11.0 - Jan 20, 2026
 
 - Add form setting to remove tags from existing subscribers.

assets/src/js/campaigns-block.js

@@ -85,3 +85,123 @@ mc4wp.forms = forms
 
 // expose mc4wp object globally
 window.mc4wp = mc4wp
+
+// Initialize AJAX form submission if configured
+// The mc4wp_ajax_vars global is localized by PHP only when AJAX is enabled
+// and the premium AJAX module is not active.
+const ajaxConfig = window.mc4wp_ajax_vars
+if (typeof ajaxConfig !== 'undefined' && !ajaxConfig.inited) {
+  const Loader = require('./forms/ajax-form-loader.js')
+  let busy = false
+
+  /**
+   * Handle AJAX response data and update the form accordingly.
+   *
+   * @param {object} form  The mc4wp Form object
+   * @param {object} response  Parsed JSON response from REST API
+   */
+  function handleResponseData (form, response) {
+    forms.trigger('submitted', [form, null])
+
+    if (response.error) {
+      form.setResponse(response.error.message)
+      forms.trigger('error', [form, response.error.errors])
+    } else if (response.code && response.message) {
+      form.setResponse(`<div class="mc4wp-alert mc4wp-error"><p>${response.message}</p></div>`)
+      forms.trigger('error', [form, [response.code]])
+    } else {
+      const data = form.getData()
+
+      forms.trigger('success', [form, data])
+      forms.trigger(response.data.event, [form, data])
+
+      // for BC: always trigger "subscribed" event when firing "updated_subscriber" event
+      if (response.data.event === 'updated_subscriber') {
+        forms.trigger('subscribed', [form, data, true])
+      }
+
+      if (response.data.hide_fields) {
+        form.element.querySelector('.mc4wp-form-fields').style.display = 'none'
+      }
+
+      form.setResponse(response.data.message)
+      form.element.reset()
+
+      if (response.data.redirect_to) {
+        window.location.href = response.data.redirect_to
+      }
+    }
+  }
+
+  /**
+   * Submits the given form over AJAX using the REST API endpoint.
+   *
+   * @param {object} form  The mc4wp Form object
+   */
+  function ajaxSubmit (form) {
+    if (busy) {
+      return
+    }
+
+    const loader = new Loader(form.element, ajaxConfig.loading_character)
+    loader.start()
+
+    form.setResponse('')
+    busy = true
+
+    const request = new XMLHttpRequest()
+    request.onreadystatechange = function () {
+      if (request.readyState >= XMLHttpRequest.DONE) {
+        loader.stop()
+        busy = false
+
+        if (request.status >= 200 && request.status < 500) {
+          try {
+            const data = JSON.parse(request.responseText)
+            handleResponseData(form, data)
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(`Mailchimp for WordPress: failed to parse response: "${e}"`)
+            form.setResponse(`<div class="mc4wp-alert mc4wp-error"><p>${ajaxConfig.error_text}</p></div>`)
+          }
+        } else {
+          // eslint-disable-next-line no-console
+          console.error(`Mailchimp for WordPress: request error: "${request.responseText}"`)
+        }
+      }
+    }
+    request.open('POST', ajaxConfig.ajax_url, true)
+    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+    request.setRequestHeader('Accept', 'application/json')
+    request.send(form.getSerializedData())
+  }
+
+  /**
+   * Intercepts form submissions for AJAX-enabled forms.
+   *
+   * @param {object} form  The mc4wp Form object
+   * @param {Event} evt    The original submit event
+   */
+  function maybeSubmitOverAjax (form, evt) {
+    if (form.element.getAttribute('class').indexOf('mc4wp-ajax') < 0) {
+      return
+    }
+
+    if (document.activeElement && document.activeElement.tagName === 'INPUT') {
+      document.activeElement.blur()
+    }
+
+    try {
+      ajaxSubmit(form)
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e)
+      return
+    }
+
+    evt.preventDefault()
+  }
+
+  forms.on('submit', maybeSubmitOverAjax)
+  ajaxConfig.inited = true
+}

assets/src/js/forms.js

@@ -0,0 +1,84 @@
+/**
+ * @param {HTMLInputElement} button
+ * @returns {string}
+ */
+function getButtonText (button) {
+  return button.innerHTML ? button.innerHTML : button.value
+}
+
+/**
+ * @param {HTMLInputElement} button
+ * @param {string} text
+ */
+function setButtonText (button, text) {
+  if (button.innerHTML) {
+    button.innerHTML = text
+  } else {
+    button.value = text
+  }
+}
+
+/**
+ * Constructs a new loader, which manipulates the form's button to show a loading indicator.
+ *
+ * @param {HTMLFormElement} formEl
+ * @param {string} char
+ * @constructor
+ */
+function Loader (formEl, char) {
+  this.formEl = formEl
+  this.button = formEl.querySelector('input[type="submit"], button[type="submit"]')
+  this.char = char ?? '\u00B7'
+  if (this.button) {
+    this.originalButton = this.button.cloneNode(true)
+  }
+}
+
+/**
+ * Starts the loading indicator
+ */
+Loader.prototype.start = function () {
+  const { button, formEl, char } = this
+  if (button) {
+    const loadingText = this.button.getAttribute('data-loading-text')
+    if (loadingText) {
+      setButtonText(button, loadingText)
+    } else {
+      button.style.width = window.getComputedStyle(this.button).width
+      setButtonText(button, char)
+      this.loadingInterval = window.setInterval(this.tick.bind(this), 500)
+    }
+  } else {
+    formEl.style.opacity = '0.5'
+  }
+
+  formEl.className += ' mc4wp-loading'
+}
+
+/**
+ * Stops the loading indicator
+ */
+Loader.prototype.stop = function () {
+  const { button, originalButton, formEl, loadingInterval } = this
+  if (this.button) {
+    button.style.width = originalButton.style.width
+    const text = getButtonText(originalButton)
+    setButtonText(button, text)
+    window.clearInterval(loadingInterval)
+  } else {
+    formEl.style.opacity = ''
+  }
+
+  formEl.className = formEl.className.replace('mc4wp-loading', '')
+}
+
+/**
+ * Represents a single step in the loading indicator
+ */
+Loader.prototype.tick = function () {
+  const { button, char } = this
+  const text = getButtonText(button)
+  setButtonText(button, text.length >= 5 ? char : `${text} ${char}`)
+}
+
+module.exports = Loader

assets/src/js/forms/ajax-form-loader.js

@@ -16,7 +16,6 @@
         'MC4WP_Admin' => '/includes/admin/class-admin.php',
         'MC4WP_Admin_Ads' => '/includes/admin/class-ads.php',
         'MC4WP_Admin_Ajax' => '/includes/admin/class-admin-ajax.php',
-        'MC4WP_Admin_Cron_Notice' => '/includes/admin/class-cron-notice.php',
         'MC4WP_Admin_Messages' => '/includes/admin/class-admin-messages.php',
         'MC4WP_Admin_Review_Notice' => '/includes/admin/class-review-notice.php',
         'MC4WP_Admin_Texts' => '/includes/admin/class-admin-texts.php',
@@ -25,7 +24,6 @@
         'MC4WP_BuddyPress_Integration' => '/integrations/buddypress/class-buddypress.php',
         'MC4WP_Comment_Form_Integration' => '/integrations/wp-comment-form/class-comment-form.php',
         'MC4WP_Contact_Form_7_Integration' => '/integrations/contact-form-7/class-contact-form-7.php',
-        'MC4WP_Campaign_Archive' => '/includes/campaigns/class-archive.php',
         'MC4WP_Container' => '/includes/class-container.php',
         'MC4WP_Custom_Integration' => '/integrations/custom/class-custom.php',
         'MC4WP_Debug_Log' => '/includes/class-debug-log.php',
@@ -73,7 +71,6 @@
         'MC4WP_Registration_Form_Integration' => '/integrations/wp-registration-form/class-registration-form.php',
         'MC4WP_Simple_Basic_Contact_Form_Integration' => '/integrations/simple-basic-contact-form/class-simple-basic-contact-form.php',
         'MC4WP_Tools' => '/includes/class-tools.php',
-        'MC4WP_Tracking_Pixel' => '/includes/class-tracking-pixel.php',
         'MC4WP_Upgrade_Routines' => '/includes/admin/class-upgrade-routines.php',
         'MC4WP_User_Integration' => '/includes/integrations/class-user-integration.php',
         'MC4WP_WPForms_Field' => '/integrations/wpforms/class-field.php',

autoload.php

@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'ajax'               => 1,
     'css'                => 0,
     'double_optin'       => 1,
     'hide_after_success' => 0,

config/default-form-settings.php

@@ -3,6 +3,5 @@
 return [
     'api_key'              => '',
     'debug_log_level'      => 'warning',
-    'email_on_error'       => '',
-    'tracking_pixel_id'    => '',
+    'email_on_error' => '',
 ];

config/default-settings.php

@@ -33,11 +33,6 @@ class MC4WP_Admin
      */
     protected $review_notice;
 
-    /**
-     * @var MC4WP_Admin_Cron_Notice
-     */
-    protected $cron_notice;
-
     /**
      * Constructor
      *
@@ -51,7 +46,6 @@ public function __construct(MC4WP_Admin_Tools $tools, MC4WP_Admin_Messages $mess
         $this->plugin_file   = plugin_basename(MC4WP_PLUGIN_FILE);
         $this->ads           = new MC4WP_Admin_Ads();
         $this->review_notice = new MC4WP_Admin_Review_Notice($tools);
-        $this->cron_notice   = new MC4WP_Admin_Cron_Notice($tools);
     }
 
     /**
@@ -76,7 +70,6 @@ public function add_hooks()
         $this->ads->add_hooks();
         $this->messages->add_hooks();
         $this->review_notice->add_hooks();
-        $this->cron_notice->add_hooks();
     }
 
     /**
@@ -251,11 +244,6 @@ public function save_general_settings(array $settings)
         // Sanitize API key
         $settings['api_key'] = sanitize_text_field($settings['api_key']);
 
-        // Sanitize tracking pixel ID (alphanumeric and hyphens only)
-        if (isset($settings['tracking_pixel_id'])) {
-            $settings['tracking_pixel_id'] = preg_replace('/[^a-zA-Z0-9\-]/', '', $settings['tracking_pixel_id']);
-        }
-
         // if API key changed, empty Mailchimp cache
         if ($settings['api_key'] !== $current['api_key']) {
             delete_transient('mc4wp_mailchimp_lists');