Support

Account

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

  • 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
    });