Сделать так, чтобы контактная форма 7 вызывала модальное окно начальной загрузки

У меня есть тема на основе Bootstrap, и я хочу, чтобы сообщение об успешном завершении Contact Form 7 запускало Modal Bootstrap (т. е. "всплывающее окно").

Я попытался разместить пример модального кода на своей странице.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

И я предположил, что это сработает, поместив следующую строку в «Дополнительные настройки» контактной формы 7:

on_sent_ok: "$('#myModal').modal(options)"

К сожалению, видимого эффекта это не дает. Просто обычное сообщение об успехе кажется подавленным (оно не отображается).

Я был бы признателен за любые идеи по теме, поскольку она нигде не представлена.


wordpress jquery twitter-bootstrap contact-form-7 twitter-bootstrap-3
person psteinweber    schedule 02.12.2013    source источник
comment
вы знаете, происходит ли ошибка javascript? проверьте консоль разработчика, нажав F12 в хроме   -  person roo2    schedule 02.12.2013

Ответы (3)


arrow_upward
2
arrow_downward

хм, в других примерах я видел людей, использующих jQuery(), также аргумент «options», вероятно, будет неопределенным. попробуй это:

 on_sent_ok: "jQuery('#myModal').modal()"
person roo2    schedule 02.12.2013
comment
Вот и все! Большое спасибо! - person psteinweber; 02.12.2013

arrow_upward
0
arrow_downward

Примечание. on_sent_ok и on_submit были официально удалены из контактной формы 7 5.0. Вместо этих настроек вы можете использовать события DOM.

person Pedro Marques    schedule 17.10.2019

arrow_upward
0
arrow_downward

Поместите этот код в 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('#myModal').modal('show'); //this is the bootstrap modal popup id
       }
        }, false );
         </script>
       <?php  } ?>
person Gabriele Fagnani    schedule 28.05.2020