JetFormBuilder Success Message Popup: Custom Popup for Form Messages

<!-- BoostMyCroco: JetFormBuilder success and error message popup. Load in the site footer. -->
<style>
  /* Hide the inline success message only while the popup script is running.
     Error messages stay inline too, so visitors still see what to fix after closing the popup. */
  .bmc-popup-on .jet-form-builder-message--success {
    display: none;
  }

  #bmc-msg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 24, 39, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  #bmc-msg-popup {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 480px;
    max-width: 90%;
    padding: 32px 28px 24px;
    background: #ffffff;
    border-top: 6px solid #6b7280;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    text-align: center;
    z-index: 100001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, top 0.3s ease, visibility 0.3s ease;
  }

  #bmc-msg-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  #bmc-msg-popup.is-open {
    opacity: 1;
    visibility: visible;
    top: 50%;
  }

  #bmc-msg-popup.is-success {
    border-top-color: #16a34a;
  }

  #bmc-msg-popup.is-error {
    border-top-color: #dc2626;
  }

  #bmc-msg-content {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.5;
    color: #1f2937;
  }

  #bmc-msg-close {
    padding: 10px 28px;
    border: 0;
    border-radius: 6px;
    background: #0f766e;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
  }

  #bmc-msg-close:hover,
  #bmc-msg-close:focus-visible {
    background: #115e59;
    outline: 2px solid #115e59;
    outline-offset: 2px;
  }
</style>

<div id="bmc-msg-overlay"></div>
<div id="bmc-msg-popup" role="dialog" aria-modal="true" aria-label="Form message" aria-describedby="bmc-msg-content">
  <p id="bmc-msg-content" aria-live="polite"></p>
  <button type="button" id="bmc-msg-close">Close</button>
</div>

<script>
(function () {
  function bmcMessagePopup($) {
    // Leave empty to use the popup for every JetFormBuilder form.
    // To limit it, enter a CSS class (without the dot) added to a wrapper around the form.
    var TARGET_CLASS = '';
    var DEFAULT_SUCCESS = 'Form successfully submitted';
    var DEFAULT_ERROR = 'Something went wrong. Please check the form and try again.';

    var $overlay = $('#bmc-msg-overlay');
    var $popup = $('#bmc-msg-popup');
    var $content = $('#bmc-msg-content');
    var $close = $('#bmc-msg-close');
    var lastFocus = null;

    if (!$popup.length) {
      return;
    }

    // Inline success messages are hidden only when this class is present (see CSS).
    $('html').addClass('bmc-popup-on');

    function isTarget($el) {
      if (!TARGET_CLASS) {
        return true;
      }
      return $el.length > 0 && $el.closest('.' + TARGET_CLASS).length > 0;
    }

    // Turns a message that may contain HTML into plain text without running any of it.
    function toText(value) {
      if (typeof value !== 'string' || value === '') {
        return '';
      }
      var doc = new DOMParser().parseFromString(value, 'text/html');
      return $.trim(doc.body.textContent || '');
    }

    function openPopup(message, type) {
      if (!$popup.hasClass('is-open')) {
        lastFocus = document.activeElement;
      }
      $content.text(message);
      $popup.removeClass('is-success is-error').addClass('is-' + type);
      $overlay.addClass('is-open');
      $popup.addClass('is-open');
      setTimeout(function () {
        $close.trigger('focus');
      }, 50);
    }

    function closePopup() {
      if (!$popup.hasClass('is-open')) {
        return;
      }
      $popup.removeClass('is-open');
      $overlay.removeClass('is-open');
      if (lastFocus && typeof lastFocus.focus === 'function') {
        lastFocus.focus();
      }
      lastFocus = null;
    }

    $close.on('click', closePopup);
    $overlay.on('click', closePopup);

    $(document).on('keydown', function (e) {
      if (!$popup.hasClass('is-open')) {
        return;
      }
      if (e.key === 'Escape' || e.key === 'Esc') {
        closePopup();
      } else if (e.key === 'Tab') {
        // The Close button is the only control, so keep focus inside the popup.
        e.preventDefault();
        $close.trigger('focus');
      }
    });

    // AJAX submit: success. Arguments are (event, response, $form).
    $(document).on('jet-form-builder/ajax/on-success', function (event, response, form) {
      var $form = $(form);
      if (!isTarget($form)) {
        return;
      }
      var message = toText(response && response.message);
      if (message) {
        openPopup(message, 'success');
        return;
      }
      // JetFormBuilder inserts the inline message right after this event fires.
      setTimeout(function () {
        var text = $.trim($form.find('.jet-form-builder-message--success').last().text());
        openPopup(text || DEFAULT_SUCCESS, 'success');
      }, 150);
    });

    // AJAX submit: failure. on-fail needs JetFormBuilder 3.4.7+, processing-error needs 3.5.1+.
    // Their arguments are not documented, so the form and message are detected defensively.
    $(document).on('jet-form-builder/ajax/on-fail jet-form-builder/ajax/processing-error', function () {
      var $form = $();
      var message = '';

      for (var i = 1; i < arguments.length; i++) {
        var arg = arguments[i];
        if (!arg || arg instanceof Error) {
          continue;
        }
        if (arg.jquery || arg.nodeType === 1) {
          $form = $(arg).first();
        } else if (typeof arg === 'object' && typeof arg.message === 'string') {
          message = toText(arg.message);
        } else if (typeof arg === 'object' && arg.responseJSON && typeof arg.responseJSON.message === 'string') {
          message = toText(arg.responseJSON.message);
        }
      }

      if (!isTarget($form)) {
        return;
      }

      if (message) {
        openPopup(message, 'error');
        return;
      }

      // No message in the arguments: read the error JetFormBuilder printed.
      setTimeout(function () {
        var $scope = $form.length ? $form : $(document);
        var text = $.trim($scope.find('.jet-form-builder-message--error').last().text());
        openPopup(text || DEFAULT_ERROR, 'error');
      }, 150);
    });

    // Page-reload submit: show the message JetFormBuilder printed after the reload.
    var $printed = $('.jet-form-builder-message--success, .jet-form-builder-message--error').filter(function () {
      return $.trim($(this).text()) !== '' && isTarget($(this));
    }).first();

    if ($printed.length) {
      openPopup(
        $.trim($printed.text()),
        $printed.hasClass('jet-form-builder-message--error') ? 'error' : 'success'
      );
    }
  }

  if (window.jQuery) {
    jQuery(bmcMessagePopup);
  } else {
    document.addEventListener('DOMContentLoaded', function () {
      if (window.jQuery) {
        jQuery(bmcMessagePopup);
      }
    });
  }
})();
</script>