Wordpress - Contact Form 7 notification open in popup - Bootstrap modal popup

How to add open Contact form 7 Notification / Messages in Modal popup

We can use the Bootstrap modal popup and Contact form 7 Doom Events to create the popup.

Paste the below code in the functions.php, it will work for you (please change the messages as per the requirements):

add_action('wp_footer', 'munesh_Footertext');
function munesh_Footertext() {
echo '<div class="modal fade in formids" id="myModal2" role="dialog" tabindex="-1">
    <div class="modal-dialog">


      <!-- Modal content-->
      <div class="modal-content no_pad text-center">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-header heading">
          <h3 class="modal-title" id="MSTitle">Message Sent!</b></h3>
        </div>
        <div class="modal-body">
            <div class="thanku_outer define_float text-center" id="MSBody">Thank you for getting in touch!
            </div>
        </div>
        <div class="modal-footer">
        </div>
      </div>


    </div>
    </div>';
?>
     <script type="text/javascript">
         document.addEventListener( 'wpcf7invalid', function( event ) {
            jQuery('#MSTitle').html('Alert!');
            jQuery('#MSBody').html('One or more fields have an error. Please check and try again.');
             jQuery('#myModal2').modal('show'); }, false );
         </script>
<script type="text/javascript">
         document.addEventListener( 'wpcf7mailfailed', function( event ) {
            jQuery('#MSTitle').html('Alert!');
            jQuery('#MSBody').html('There was an error trying to send your message. Please try again later.');
             jQuery('#myModal2').modal('show'); }, false );
         </script>
<script type="text/javascript">
         document.addEventListener( 'wpcf7mailsent', function( event ) {
            jQuery('#MSTitle').html('Message Sent!');
            jQuery('#MSBody').html('Thank you for getting in touch. We will get back to you ASAP.');
             jQuery('#myModal2').modal('show'); }, false );
         </script>
<style>div.wpcf7-validation-errors, div.wpcf7-acceptance-missing, div.wpcf7-response-output {display:none!important;} .modal{top:25%!important;}</style>
       <?php
}

Link to contact form domain events  - https://contactform7.com/dom-events/