javascriptwordpresscontact-form-7magnific-popup

How to open a popup after the contact form 7 succesfully submitted


I am using Wordpress and Contact form 7. I need to show a popup using magnificPopup js which will come after the successfully submission of the contact form. Have added an hook for the wpcf7_mail_sent, but how can I call popup to show using javascript.

Example :

In functions.php

add_action( 'wpcf7_mail_sent', 'after_send_mail_from_contact_form' );
function after_send_mail_from_contact_form($contact_form){
  // what to do here 
}

in Custom.js file

$('.pay_for_course').magnificPopup({
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
});

Solution

  • Try this #create a bootstrap modal popup then add this function in function.php

     <?php add_action( 'wp_footer', 'mycustom_wp_footer' );
    function mycustom_wp_footer() {
    ?>
         <script type="text/javascript">
             document.addEventListener( 'wpcf7mailsent', function( event ) {
             if ( '34' == event.detail.contactFormId ) { // Change 34 to the ID of the form 
             jQuery('#myModal2').modal('show'); //this is the bootstrap modal popup id
           }
            }, false );
             </script>
           <?php  } ?>
    

    #OR

    add_action('wpcf7_mail_sent', function ($cf7) {
        // Run code after the email has been sent
     $wpcf = WPCF7_ContactForm::get_current();
    $wpccfid=$wpcf->id;
        // if you wanna check the ID of the Form $wpcf->id
         if ( '34' == $wpccfid ) { // Change 34 to the ID of the form 
    echo '
     <div class="modal fade in formids" id="myModal2" role="dialog" style="display:block;" 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">Message Sent!</b></h3>
            </div>
            <div class="modal-body">
                 
                <div class="thanku_outer define_float text-center">
                    <h3>Thank you for getting in touch!</h3>
                </div>
            </div>
            <div class="modal-footer">
            </div>
          </div>
          
        </div>
        </div>
    ';
        }
    });