Hello,
Thanks for the feedback!
It looks like you’re trying to display an ACFE Form inside a modal, but the Elementor modal doesn’t works correctly. Before going further, and determine where the problem come from, please setup the following environment:
Enable Elementor, enable ACF Pro & enable ACF Extended. Do not display any ACFE Form on the front-end, simply display the Elementor modal with a simple “test” text. Does the modal works that way?
If the modal works, then it means ACF Extended doesn’t break Elementor or the modal on its own, but ACFE Form is probably not compatible with your modal solution. Please note that ACFE Form heavily rely on the native ACF Form feature which include all core ACF logic and its Javascript (for WYSIWYG, Datepicker, Phone Number etc…) which are quite complex and might require some tweaks in order to make it work with complex modal solutions.
In fact, ACFE Form can be displayed inside a classic HTML/CSS modal, however, it needs to be rendered on page during the page load. Here is a working example of a classic modal with ACFE Form.
Here is the code I used in my example above:
Front-end PHP page:
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<button class="acf-button my-modal-open">Open Modal</button>
<div class="my-modal">
<div class="my-modal-content">
<button class="my-modal-close">?</button>
<?php
acfe_form(array(
'name' => 'my-form'
));
?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
CSS:
.my-modal{
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
padding:25px 0;
background-color:rgba(0,0,0,0.5);
z-index: 1000;
overflow-y:auto;
}
.my-modal .my-modal-content{
background-color:#fff;
border-radius:2px;
padding: 25px;
width: 800px;
margin:0 auto;
position:relative;
}
.my-modal .my-modal-close{
position:absolute;
right:25px;
z-index:1;
}
.my-modal.active{
display: block;
}
body.my-modal-opened{
overflow:hidden;
}
Javascript:
(function($){
$(function(){
$('.my-modal-open, .my-modal-close').click(function(){
$('.my-modal').toggleClass('active');
$('body').toggleClass('my-modal-opened');
});
});
})(jQuery);
If your modal solution does not render the form on page load (like the classic example above), but rather inject it in the page using Javascript or Ajax, you will have enqueue the ACF styles & Javascript on the PHP page, like that:
<?php get_header(); ?>
<?php acf_enqueue_scripts(); ?>
And then initialize the ACFE Form JS using the following javascript code when your modal is opened by user:
// your modal "open function"
$('.my-modal-open').click(function(){
// initialize ACFE Form
acf.doAction('append', $('.my-modal'));
});
Hope it helps!
Have a nice day!
Regards.
