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
});
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.