1. Главная
  2. Блог
  3. Wordpress
  4. Modal Window – плагин всплывающего окна для Wordpress

Modal Window – плагин всплывающего окна для Wordpress

22 августа 2021
3

Формы обратной связи, в том числе созданные с помощью плагина Contact Form 7, такие как заказ обратного звонка и задать вопрос обычно размещаются во всплывающем окне. Такое окно появляется после нажатия соответствующей кнопки Заказ звонка. С помощью плагина Modal Window https://ru.wordpress.org/plugins/modal-window/ можно разместить во всплывающем окне не только форму, но и любое сообщение для посетителей, баннер с полезной информацией о скидках.

modal1.JPG

Установка плагина производится стандартным способом в менеджере плагинов. Настройки доступны во вкладке Wow plugins/Modal Window

modal2.jpg

На вкладе List находится список созданных модальных окон.

При создании нового окна или редактировании ранее созданного мы можем управлять содержимым окна на вкладке Popup content. Например, разместим там шорткод формы, созданной с помощью плагина Contact Form 7.

modal3.jpg

На вкладке Style мы можем управлять внешним видом окна. Например, можем указать его ширину, бекграунд, границу, поменять внешний вид кнопки Закрыть.

modal4.jpg

На вкладке Settings указываем триггер по которому окно всплывает, например по клику. И далее копируем код, для вставки в код кнопки или ссылку.

modal5.jpg

В коде кнопки размещаем скопированный код запуска модального окна.

modal7.JPG

Форма по умолчанию имеет совершенно не презентабельный вид.

modal6.JPG

После размещения в файле 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;
}

Мы получим внешний вид окна с формой как на первом скриншоте этой статьи.

Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!