Bootstrap4 + wordpress?

Question

[Tupic123]

Сделал всплывающую форум с помощью bootstrap4

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">                    <p class="request_header">Оставьте заявку</p>
            <p class="request_subheader">Для проведения расчетов</p></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form class="feed-form">
                <div class="request_2">

                    <form class="feed-form feed-form_mt25">
                        <input name="name" required placeholder="Имя" type="text"> 
                        <input name="phone" required placeholder="Телефон">  
                    </form>
                    <button class="form_btn" type="submit">Отправить</button>
                    <p class="describe">Нажимая кнопку «Отправить», вы подтверждаете свое согласие на обработку персональных данных</p>
            </div>
            </form>
        </div>

        </div>
      </div>
    </div>
  </div>

Сам код вызова окна:

<button type="button"  data-toggle="modal" data-target="#exampleModal"

При дальнейшей работе возник вопрос, как реализовать отправку этого дела на почту заказчика?
Как подружить bootstrap4 и contact form 7 или иной плагин, для того, чтобы получить всплывающую форму с затемнением фона и отправкой входящих данных на почту заказчика?

Comments

[Warlynn]

вместо попробуйте вставить шорткод CF7

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">                    <p class="request_header">Оставьте заявку</p>
            <p class="request_subheader">Для проведения расчетов</p></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
           <?php echo do_shortcode('[contact-form-7 id="" title=""]'); ?>
        </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

[Антон Литвиненко]

Контакт форм 7 вполне себе понимает разметку, не без нюансов, но все же
Также можно сделать саму форму в контакт форм 7 и шорткодом вставить в разметку модалки
<?php echo do_shortcode('тут шорткод') ?>

Comments

[Tupic123]

Просто вставить это все в форму?
А если форм несколько, то создать еще несколько в contact form 7?

[Антон Литвиненко]

Tupic123, почти все. Тег form не нужно.

[Tupic123]

Антон Литвиненко, Хорошо,благодарю,все тоже самое только без тега,верно понимаю?

[Антон Литвиненко]

Tupic123, вы когда сделаете и откроете в инспекторе увидите. Cf7 добавляет свои теги часто где переносы, одним из решений писать в cтроку.
Ещё как вариант сделать только форму в контакт форм 7, а разметку модалки оставить в шаблоне, форму вставить шорткодом