Support

Account

Home Forums Backend Issues (wp-admin) ACF + Ninja Forms conflict?

Solving

ACF + Ninja Forms conflict?

  • I’m using ACF as well as Ninja Forms, and it seems there’s a small conflict between the two in the back-end: Ninja Forms has an “Add form” button above any text editor (both native WYSIWYG and those added by ACF fields), which shows a modal for chosing which form you want to place in the text via shortcode.

    The modal doesn’t look right and the shortcode doesn’t get placed in the text correctly (it’s missing a form ID), and this only happens if ACF is enabled. It happens in the normal, native text editor as well, not just ACF fields. There are no javascript errors in the console.

    There are two topics about this on the Ninja Forms Github, and I’ve replied to both to dump them, but they’ve not picked up any traction. The issue is not that common, so maybe it’s a niche thing.

    More info:
    https://github.com/wpninjas/ninja-forms/issues/3642
    https://github.com/wpninjas/ninja-forms/issues/3407

    Is there anything on the ACF side that could cause this? I’m posting this publicly because it may help others with this issue. Any help appreciated.

    • JacobDB

    • November 8, 2019 at 6:19 am

    I’ve got a quick fix for this, but it’s not ideal. The problem is that Ninja Forms creates a unique modal that is associated specifically the main content region, and it doesn’t support multiple of that modal of one page. When ACF is installed, the modal gets duplicated to account for custom WYSIWYG fields, but that causes a bunch of issues due to the duplication.

    Simple solution is to just remove the fields from ACF fields. Obviously this means you need to manually insert Ninja Forms when using custom fields, but it’s a reasonable compromise.

    
    add_action("admin_head", function () {
    ?>
    <style type="text/css">
    #nf-insert-form-modal .ui-icon {
        display: inline-block;
        text-indent: 0;
    }
    </style>
    <?php
    });
    
    add_action("admin_footer", function () {
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", () => {
        const ACFS = document.querySelectorAll("#acf-hidden-wp-editor, .acf-field-wysiwyg");
    
        ACFS.forEach((acf) => {
            const FORM  = acf.querySelector(".button.nf-insert-form");
            const STYLE = acf.querySelector("#nf-insert-form-modal + style");
            const MODAL = acf.querySelector("#nf-insert-form-modal");
    
            if (FORM) {
                FORM.remove();
            }
    
            if (STYLE) {
                STYLE.remove();
            }
    
            if (MODAL) {
                MODAL.remove();
            }
        });
    });
    </script>
    <?php
    });
  • There are several plugins that add to the wysiwig that are not multiple editor compatible. I have not had much luck getting these plugin authors to alter them so that they are.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.