Как открыть всплывающее окно после того, как контактная форма 7 успешно отправлена - PullRequest
Новая
       10

Как открыть всплывающее окно после того, как контактная форма 7 успешно отправлена

0 голосов
/ 18 мая 2018

Я использую Wordpress и контактную форму 7. Мне нужно показать всплывающее окно с помощью magnificPopup js, которое появится после успешной отправки контактной формы.Я добавил хук для wpcf7_mail_sent, но как я могу вызвать всплывающее окно для отображения с использованием javascript.

Пример:

В 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 
}

в файле Custom.js 

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

1 Ответ

0 голосов
/ 18 мая 2018

Попробуйте

создать модальное всплывающее окно начальной загрузки и добавьте эту функцию в 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  } ?>

ИЛИ 

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">&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>
';
    }
});
...