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 });
Advertisement
Answer
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 123 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 123 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">×</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> '; } });