Формы обратной связи, в том числе созданные с помощью плагина Contact Form 7, такие как заказ обратного звонка и задать вопрос обычно размещаются во всплывающем окне. Такое окно появляется после нажатия соответствующей кнопки Заказ звонка. С помощью плагина Modal Window https://ru.wordpress.org/plugins/modal-window/ можно разместить во всплывающем окне не только форму, но и любое сообщение для посетителей, баннер с полезной информацией о скидках.
Установка плагина производится стандартным способом в менеджере плагинов. Настройки доступны во вкладке Wow plugins/Modal Window
На вкладе List находится список созданных модальных окон.
При создании нового окна или редактировании ранее созданного мы можем управлять содержимым окна на вкладке Popup content. Например, разместим там шорткод формы, созданной с помощью плагина Contact Form 7.
На вкладке Style мы можем управлять внешним видом окна. Например, можем указать его ширину, бекграунд, границу, поменять внешний вид кнопки Закрыть.
На вкладке Settings указываем триггер по которому окно всплывает, например по клику. И далее копируем код, для вставки в код кнопки или ссылку.
В коде кнопки размещаем скопированный код запуска модального окна.
Форма по умолчанию имеет совершенно не презентабельный вид.
После размещения в файле style.css следующего кода:
.wpcf7-form-control:not(.wpcf7-checkbox):not(.wpcf7-radio) {
box-shadow: none;
border: none;
width: 100%;}
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
border: 1px solid #000;
}
input.wpcf7-form-control.wpcf7-submit {
background-color: #cd2122;
color: #fff;
}
textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required {
border: 1px solid #000;
}
div#wow-modal-window-2 {
padding: 0px 30px 0px 30px !important;
}
Мы получим внешний вид окна с формой как на первом скриншоте этой статьи.