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/

Contact Form 7 reCAPTCHA not showing

Contact Form 7 latest version not supporting the reCAPTCHA, So, We need to downgrade the Recaptcha plugin,

Steps to Rollback the Contact Form 7 :

1. Install the Plugin "wp rollback".
2. After Installing go to the plugins, you will find an option below all the plugins for rollback.
3. So, rollback the Contact Form 7  from 5.1 to 5.0.5
4. After this go to integration on the contact form and paste your keys again like you did in the beginning.
5. Open your contact form on the backend and save it again. Make sure you add the recaptha again
6. Now go to your front-end and refresh your page.And your done!

Wait for next update with the fix.

No need te install any other plugins.