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


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:

    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.

  • 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;
    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("");
            const STYLE = acf.querySelector("#nf-insert-form-modal + style");
            const MODAL = acf.querySelector("#nf-insert-form-modal");
            if (FORM) {
            if (STYLE) {
            if (MODAL) {
  • 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)

The topic ‘ACF + Ninja Forms conflict?’ is closed to new replies.