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/

DataTables warning: table id=table1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Issue - DataTables warning: table id=table1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Solution -

This error can often occur when trying to obtain a reference to the DataTable for working with the API. For example, you might have a function which will always try to create a DataTable instance by passing in options when created. Then you make a modification which calls this function on a table which has already been initialised and you get this error.

In such a case, you will want to use the $.fn.dataTable.isDataTable() static method. This can be used to check if a table is a DataTable or not already:

Javascript


1

2

3

4

5

6

7

8


if ( $.fn.dataTable.isDataTable( '#table1' ) ) {

    table = $('#table1').DataTable();

}

else {

    table = $('#table1').DataTable( {

        paging: false

    } );

}

for more information please visit the page - https://datatables.net/manual/tech-notes/3