<
  • Главная
Статьи

Всплывающее окно с формой обратной связи

Опубликовано: 01.09.2018

видео Всплывающее окно с формой обратной связи

Всплывающая форма обратной связи для сайта WordPress

Этот урок можно назвать продолжением предыдущего мини-обзора где мы создавали круглые кнопки , одна из которых – заказ звонка, а вторая – обратная связь. Они являются лишь началом работы полной функции. Для завершения не хватает еще одной части, а именно модального окна .



По идее, оно должно появляться при нажатии на кнопку, чтобы создался эффект всплывающего окна с формой обратной связи. Форму будем создавать с помощью всем известного плагина « Contact Forms 7 ». Добавим свои стили к форме , оформим красиво. В общем, сделаем как надо.


Аdobe Muse Уроки | 06.Всплывающая форма обратной связи

Демо

В работе над модальным окном я воспользуюсь свободным плагином «Modal Window Effects» (). Вы же можете использовать любой другой (даже специальный) плагин окна для WordPress. Надо лишь привязать вызов к нашей кнопке, и все будет в ажуре. Поехали!

Кнопка со сплывающим окном обратной связи

Первым делом займемся установкой на сайт кнопки с окном, и уже потом перейдем к форме связи. Сложного в этом ничего нет. Из архива, скаченного выше по ссылке, нужно подключить три файла: два файла из папки «modal — JS» и один из папки «modal — CSS». Все они относятся к модальному окну, это для ясности.

Открываем файл functions.php и в конце перед знаком ?> (или там, где вам удобнее) подключаем файлы таким образом:

function my_scripts_method() { // модельное окно wp_enqueue_script( 'mod-scripts', get_template_directory_uri() . '/modal/js/classie.js', array(), null, true); wp_enqueue_script( 'modef-scripts', get_template_directory_uri() . '/modal/js/modalEffects.js', array(), null, true); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); /* стили модального окна */ function wpdocs_theme_name_scripts() { wp_enqueue_style( 'style-mod', get_template_directory_uri() . '/modal/css/component.css'); } add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Теперь открываем файл style.css и добавляем еще такой код (это стили кнопки):

/*кнопка обратной связи*/ .email-bt { background:#F95C18; border:2px solid #F95C18; border-radius:50%; box-shadow:0 8px 10px rgba(249,92,24,0.3); cursor:pointer; height:68px; text-align:center; width:68px; position: fixed; left: 8%; bottom: 18%; z-index:999; transition:.3s; -webkit-animation:email-an linear 1s infinite; animation:email-an linear 1s infinite; } .email-bt .text-call{ height:68px; width:68px; border-radius:50%; position:relative; overflow:hidden; } .email-bt .text-call span { text-align: center; color:#F95C18; opacity: 0; font-size: 0; position:absolute; right: 4px; top: 22px; line-height: 14px; font-weight: 600; text-transform: uppercase; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif; } .email-bt .text-call:hover span { opacity: 1; font-size: 11px; } .email-bt:hover i { display:none; } .email-bt:hover { z-index:1; background:#fff; transition:.3s; } .email-bt:hover i { color:#38a3fd; font-size:40px; transition:.3s; } .email-bt i { color:#fff; font-size:29px; transition:.3s; line-height: 66px; } .email-bt i { -webkit-animation: opsimple 3s infinite; animation: opsimple 3s infinite; } @-webkit-keyframes email-an { 0% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2) } 40% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2) } 80% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067) } 100% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0) } }@keyframes email-an { 0% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2) } 40% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2) } 80% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067) } 100% { box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0) } } @keyframes opsimple { 0% { opacity: 0; } 40% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes opsimple { 0% { opacity: 0; } 40% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

Осталось вывести разметку.

Открываем файл footer.php и перед функцией <?php wp_footer(); ?> вставляем HTML-разметку. На этом этапе у вас должна получиться плавающая кнопка на странице, по нажатию которой появляется всплывающее окно (пока что пустое).

<div type="button" data-modal="modal-9" class="email-bt md-trigger"> <div class="text-call"> <i class="fa fa-envelope" aria-hidden="true"></i> <span>Обратная<br>связь</span> </div> </div> <div class="md-modal md-effect-9" id="modal-9"> <div class="md-content"> <h3>Обратная связь</h3> <div> <!-- сюда вставить функцию вызова формы связи (шорткод) --> </div> </div> </div> <div class="md-overlay"></div>

Форма связи

Ну вот, дошли до последней части «урока».

Думаю, плагином «Contact Forms 7» все умеют пользоваться. После того, как в нем создадите новую форму, вместо стандартного кода, что образовывается по умолчанию, добавьте этот:

<label>[text* your-name placeholder "Как к Вам обращаться *"]</label> <label>[email* your-email placeholder "Ваш e-mail *"]</label> <label>[textarea your-message placeholder "Сообщение..."]</label> [submit "Отправить"]

Теперь выводим форму в разметке выше в указанном там месте:

<?php echo do_shortcode( '[contact-form-7 id="2400" title="proba"]' ); ?>

Стили оформления, по идее, должны подхватиться из вашей текущей WordPress темы, но можно прописать свои. В файл style.css прописываем такой код:

/*форма связи в модальном окне */ #wpcf7-f2400-o1 form { margin-left:auto; margin-right:auto; } #wpcf7-f2400-o1 input, #wpcf7-f2400-o1 textarea { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } #wpcf7-f2400-o1 textarea{ background: rgba(0, 0, 0, 0.1); width: 100%; height: 110px; border: 1px solid rgba(255,255,255,.6); border-radius: 2px; display:block; font-family: 'Source Sans Pro', sans-serif; font-size:15px; color:#444; padding:20px; margin-bottom:20px; } #wpcf7-f2400-o1 input { background: rgba(0, 0, 0, 0.1); width: 100%; height: 48px; border: none; border-radius: 4px; display:block; font-family: 'Source Sans Pro', sans-serif; font-size:15px; color:#444; padding-left:20px; padding-right:20px; margin-bottom:20px; } #wpcf7-f2400-o1 input[type=submit] { cursor:pointer; } ::-webkit-input-placeholder { color: #999; } :-moz-placeholder{ color: #999; } ::-moz-placeholder { color: #999; } :-ms-input-placeholder { color: #999; } #wpcf7-f2400-o1 input:focus, #wpcf7-f2400-o1 textarea:focus { background-color: rgba(0, 0, 0, 0.15); } #wpcf7-f2400-o1 .wpcf7-submit { margin:0 auto; background: #F95C18; padding: 10.5px 21px; border-radius: 4px; color: #fff; font-size:18px; transition:all 0.3s; } #wpcf7-f2400-o1 .wpcf7-submit:hover { background: #E34602; }

Обратите внимание на идентификатор перед тегами формы в стилях. У вас, естественно, он будет другой. Следовательно, его нужно поменять на свой, чтобы стили заработали. Узнать его можно в исходном коде.



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью

rss