Для начала необходимо создать сами формы в плагине contact form 7 и скопировать шорт-код. Например, у меня получился такой шорткод: Ошибка: Контактная форма не найдена.
Следующий шаг это вставка модального окна в визуальном редакторе motopress или вставить код в текстовом редакторе.
В визуальном редакторе
К сожалению в визуальном редакторе что-то пошло не так и не получалось редактировать, поэтому я создал новую статью и создал в ней модальное окно. После в текстовом редакторе скопировал код:
Ошибка: Контактная форма не найдена.[mp_modal modal_style="dark" modal_shadow_color="#0b0b0b" modal_content_color="#ffffff" button_text="ЗАЯВКА on-line" button_full_width="false" button_align="center" button_icon="none" button_icon_position="left" mp_style_classes="motopress-btn-color-silver motopress-btn-size-middle motopress-btn-rounded motopress-btn-icon-indent-small"]
[/mp_modal]
Оказалось, что визуальный редактор предполагает редактирование в теле страницы или записи, а нужные кнопки оказались зашиты в самом шаблоне. Поэтому пришлось залезть в файлы шаблона, а именно файл llorix_one_lite_header_section.php
В нем я написал вручную модальное окно (тема оказалась сверстана на bootstrap, поэтому использовал родной для bootstrap компонент модального окна) в которое вставил шорткод contact form 7
<div id="online-form-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<script>
jQuery(document).ready(function($) {
$("#inpage_scroll_btn").click(function() {
//открыть модальное окно с id="myModal"
$("#online-form-modal").modal('show');
});
});
</script>
</code>
Кнопка-крестик, закрывающий модальное окно, растянулся на всю длину окна, поэтому пришлось подправить стили, прописал прямо в том же шаблоне:
<code>
<style>
.modal-content button.close {
width: auto;
}
</style>
Тоже самое нужно было сделать для блока «Напишите нам» на главной странице только в файле llorix_one_lite_ribbon_section.php
