Петербургская 420000 Россия, Казань +79600398864
bpics 7347

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

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

Здравствуйте дорогие читатели блога!

Сегодня рассмотрим такие вопросы, как:

  • Создание формы обратной связи с помощью плагина Contact Form 7

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

  • Передача url, заголовка страницы в форме Contact Form 7

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

  • Научим Contact Form 7 отправлять SMS сообщения

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

Пример формы обратной связи на странице «Контакты»


Форма обратной связи с помощью плагина Contact Form 7

Устанавливаем плагин Contact Form 7:

  1. Переходим в административную панель
  2. Далее жмем — » Плагины » Добавить новый
  3. Вводим в поиск «Contact Form 7»
  4. Устанавливаем и активируем плагин

Как видите — ничего сложного, обычная процедура установки плагина.

Настраиваем форму обратной связи на wordpress

После установки плагина, слева (в панели управления) появится вкладка «Contact Form 7». Нажимаем на неё, тут добавляем новую форму (старую можно удалить или изменить)

 

  1. Добавляем новую форму
  2. Вводим название формы
  3. На вкладке «Шаблон формы» оставляем только нужные нам поля для ввода данных.
    Своим клиентам (на коммерческих сайтах) я обычно оставляю всего два поля — «Имя» и «Телефон», чем меньше клиенту вводить данных, тем больше шансов, что он вообще будет их вводить.
  4. Переходим во вкладку «Письмо» и настраиваем сообщение, которое придет на почту
  5. Сохраняем форму, копируем и вставляем шорткод, например на страницу обратной связи или контактов.
Поздравляю, форма обратной связи создана! Теперь можете проверять работоспособность формы и задавать свои вопросы.

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

  1. Для создания всплывающей формы необходимо установить плагины Contact Form 7 (если он еще не установлен) и Easy FancyBox
  2. Активируем плагины и настраиваем Contact Form 7 (смотрите выше). Плагин Easy FancyBox настраивать не нужно.
  3. Устанавливаем код в всплывающей формы в нужном месте
    1. Код всплывающей формы обратной связи при клике по тексту:
      <a class="fancybox" href="#contact_form_pop">Написать письмо</a>
      <div class="fancybox-hidden" style="display: none;">
      <div id="contact_form_pop">ШОРТКОД</div>
      </div>
    2. Код всплывающей формы обратной связи при клике на картинку:
      <a class="fancybox" href="#contact_form_pop"><img src="/wp-content/uploads/2016/11/call.png" alt="" /></a>
      <div class="fancybox-hidden" style="display: none;">
      <div id="contact_form_pop">ШОРТКОД</div>
      </div>

      В некоторых случаях, если при клике на ссылку возникают проблемы и форма отсутствует (The requested content cannot be loaded.), тогда нужно заменить класс «fancybox» на «fancybox-inline».
      Также не забываем вставить свой шорткод формы обратной связи

    Поздравляю! Всплывающая форма обратной связи в связке двух плагинов Contact Form 7 + Easy FancyBox готова.

Как вставить url и заголовок товара (страницы) в форму обратной связи на wordpress

Больше не придется просить клиентов заполнять поле «Название товара»

Есть очень простое решение Contact Form 7 + Dynamic Text Extension

От слов к делу:

  1. Скачиваем и устанавливаем плагин Contact Form 7 и Contact Form 7 — Dynamic Text Extension
  2. Переходим в настроки контактой формы во вкладку «Шаблон формы»
  3. Генерируем тег «Dynamic hidden»
  4. Добавляем к тегам дополнительные параметры для передачи сведений о странице, в итоге у Вас должно получиться примерно так:
    [dynamichidden dynamichidden-860 "CF7_URL"]
    [dynamichidden dynamichidden-423 "CF7_get_post_var key=’title'"]

    Можете скопировать код и поменять в нем идентификаторы на свои

  5. Переходим во вкладку «Письмо». Указываем свои теги
    [dynamichidden-860]
    [dynamichidden-423]

Вот и всё! Передача url и заголовка в письме обратной формы настроена, можно наслаждаться результатом!

Знаю человека, который сделал сотню однообразных форм для товаров, лишь бы узнать с какой именно страницы пришел заказ.

Это решение непременно понравится новичкам в сфере создания сайтов. Кроме того, все проведенные манипуляции не заметны для пользователя. А то, что мы знаем больше информации о заявках, облегчит жизнь как покупателям так и менеджерам. Информация о заказе даст нам возможность конструктивно провести диалог или переписку и не даст нам потратить зря драгоценное время.

А теперь переходим к тестированию и отписываемся в комментариях…


Меняем стили CSS Contact form 7 и всплывающего окна (Fancybox) формы обратной связи

Для начала, отключим стили плагина Fancybox

    • Переходим в файл функции темы (functions.php) и вставим в конец файла следующий код:
      add_action ('wp_print_styles','seoved_fancy',100);
      function seoved_fancy () {
       // add handles for styles you wish to remove
       wp_deregister_style ('fancybox');
      }

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

    • Скопируем стили плагина в файл Вашей темы style.css.
    • Можете скопировать мои стили и редактировать их по своему желанию, пример оформления всплывающей формы обратной связи на странице контакты
      .wpcf7-form input[type=submit]{background:#2196F3;float:center;margin-top:20px;border:0;font-weight:700;width:100%;color:#fff;height:40px;border-radius:8px}
      .wpcf7-form textarea{display:block;margin-top:5px;background:#fff;border:1px solid #777;width:100%;height:90px;color:#222;border-radius:8px;padding:5px}
      .wpcf7-form input[type=email],.wpcf7-form input[type=text],.wpcf7-form input[type=tel]{background:#fff;border:1px solid #777;width:100%;color:#222;height:30px;border-radius:8px;padding:0 5px}
      .wpcf7 input.wpcf7-submit:hover{cursor:pointer;text-decoration:none;background-color:#00b9eb;border-radius:8px}
      #fancybox-loading{position:fixed;top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;cursor:pointer;overflow:hidden;z-index:11104;display:none;box-sizing:content-box;-moz-box-sizing:content-box}
      #fancybox-loading div{position:absolute;top:0;left:0;width:40px;height:480px;background-image:url(fancybox.png);box-sizing:content-box;-moz-box-sizing:content-box}
      #fancybox-overlay{position:absolute;top:0;left:0;width:100%;z-index:11100;display:none;box-sizing:content-box;-moz-box-sizing:content-box}
      #fancybox-tmp{border:0;overflow:auto;display:none;margin:0;padding:0}
      #fancybox-wrap{position:absolute;top:0;left:0;z-index:11101;outline:none;display:none;box-sizing:content-box;-moz-box-sizing:content-box;padding:0}
      #fancybox-wrap div{box-sizing:content-box;-moz-box-sizing:content-box;margin:10px 10px 0}
      #fancybox-outer{position:relative;width:100%;height:100%}
      #fancybox-content{width:0;height:0;outline:0;position:relative;overflow:hidden;z-index:11102;border:2px solid #54a1d9;background:#eee;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:20px}
      #fancybox-hide-sel-frame{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:11101}
      #fancybox-close{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background:transparent url(https://seovedenie.ru/wp-content/uploads/2016/11/x.png) 0 0;cursor:pointer;z-index:11103}
      #fancybox-error{color:#444;font:normal 12px/20px Arial;margin:0;padding:14px}
      #fancybox-img{width:100%;height:100%;border:none;outline:none;line-height:0;vertical-align:top;max-width:none!important;max-height:none!important;margin:0;padding:0}
      #fancybox-frame{width:100%;height:100%;border:none;display:block;-webkit-overflow-scrolling:touch;z-index:0}
      #fancybox-left,#fancybox-right{position:absolute;bottom:0;height:100%;width:35%;cursor:pointer;outline:none;background:transparent url(blank.gif);z-index:11102;display:none}
      #fancybox-left{left:0}
      .rtl #fancybox-left{left:auto;right:0}
      #fancybox-right{right:0}
      .rtl #fancybox-right{left:0;right:auto}
      #fancybox-left-ico,#fancybox-right-ico{position:absolute;top:50%;left:-9999px;width:30px;height:30px;margin-top:-15px;cursor:pointer;z-index:11102;display:block}
      #fancybox-left-ico{background-image:url(fancybox.png);background-position:-40px -30px}
      .rtl #fancybox-left-ico{background-position:-40px -60px;right:-9999px}
      #fancybox-right-ico{background-image:url(fancybox.png);background-position:-40px -60px}
      .rtl #fancybox-right-ico{background-position:-40px -30px;right:-9999px}
      #fancybox-left:hover,#fancybox-right:hover{visibility:visible}
      #fancybox-left:hover span{left:20px}
      .rtl #fancybox-left:hover span{right:20px}
      #fancybox-right:hover span{left:auto;right:20px}
      .rtl #fancybox-right:hover span{right:auto;left:20px}
      .fancybox-bg{position:absolute;border:0;width:20px;height:20px;z-index:11001;margin:0;padding:0}
      #fancybox-bg-n{top:-20px;left:0;width:100%;background-image:url(fancybox-x.png)}
      #fancybox-bg-ne{top:-20px;right:-20px;background-image:url(fancybox.png);background-position:-40px -162px}
      #fancybox-bg-e{top:0;right:-20px;height:100%;background-image:url(fancybox-y.png);background-position:-20px 0}
      #fancybox-bg-se{bottom:-20px;right:-20px;background-image:url(fancybox.png);background-position:-40px -182px}
      #fancybox-bg-s{bottom:-20px;left:0;width:100%;background-image:url(fancybox-x.png);background-position:0 -20px}
      #fancybox-bg-sw{bottom:-20px;left:-20px;background-image:url(fancybox.png);background-position:-40px -142px}
      #fancybox-bg-w{top:0;left:-20px;height:100%;background-image:url(fancybox-y.png)}
      #fancybox-bg-nw{top:-20px;left:-20px;background-image:url(fancybox.png);background-position:-40px -122px}
      #fancybox-title{font-family:Helvetica;font-size:12px;z-index:11102}
      .fancybox-title-inside{padding-bottom:10px;text-align:center;color:#333;position:relative}
      .fancybox-title-outside{padding-top:10px;color:#fff}
      .fancybox-title-over{position:absolute;bottom:0;left:0;color:#FFF;text-align:left}
      .rtl .fancybox-title-over{text-align:right}
      #fancybox-title-over{background-image:url(fancy_title_over.png);display:block;padding:10px}
      .fancybox-title-float{position:absolute;left:0;bottom:-20px;height:32px}
      #fancybox-title-float-wrap{border:none;border-collapse:collapse;width:auto}
      #fancybox-title-float-wrap td{border:none;white-space:nowrap}
      #fancybox-title-float-left{background:url(fancybox.png) -40px -90px no-repeat;padding:0 0 0 15px}
      #fancybox-title-float-main{color:#FFF;line-height:29px;font-weight:700;background:url(fancybox-x.png) 0 -40px;padding:0 0 3px}
      #fancybox-title-float-right{background:url(fancybox.png) -55px -90px no-repeat;padding:0 0 0 15px}
      .screen-reader-response,.fancybox-hidden{display:none}
      #fancybox-wrap div .wpcf7-validation-errors,#fancybox-wrap div .wpcf7-mail-sent-ok{margin-top:-20px;text-align:center;color:#a0a0a0}

Форма обратной связи Contact form 7 на WordPress во всплывающем окне

Как видите — всё просто и бесплатно! Надеюсь данная реализация придется Вам по вкусу. Отписывайтесь в комментариях, подписывайтесь на соц сети, добавляйте в закладки.


Contact Form 7 и отправка SMS сообщений с сайта wordpress

В связи с тем, что данное внедрение стало платным (0.50-1.25 за сообщение), решил пока не писать, но если кому будет интересно, обязательно напишу. Кстати, 5 SMS в день сервис sms.ru все же оставил своим пользователям.

Пишите в комментариях, а может кто знает бесплатный способ реализации отправки SMS с сайта на wordpress? Напишите, дайте ссылку!

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

Или, если не хотите тратить время, можете заказать форму обратной связи для сайта на WordPress прямо сейчас:

Сделать заказ


Вам будет интересно:

Обновлено: 2017-05-31 — 19:03
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (19, среднее: 5,00 из 5)

Поделиться

8 комментариев

Добавить комментарий
  1. Спасибо за стили формы — везде искал. Супер!
    Напишите пожалуйста как добиться скорости 100 в гугл тесте не нашел статьи а очень хочу или хоть как у вас это получилось????

    Ответить
    1. Спасибо за Ваш комментарий!
      Вопрос про скорость сайта не по теме, вот здесь об этом https://seovedenie.ru/optimizatsiya-zagruzki-sajta

      Ответить
  2. Спасибо за такое подробное описание, как создать форму обратной связи! Очень нужно, а с чего начать и не знала — руки не из того места выросли))
    Скажите, а почему именно плагин Contact Form 7? Их же много всяких… Чем хорош именно этот?

    Ответить
    1. Их много, но посмотрите на плюсы плагина Contact form 7:
      — Более миллиона скачиваний (уже о чем-то говорит)
      — Установка нескольких форм на сайт.
      — Легко расширить функционал
      — Интеграция с Akismet и не только.
      — Оформление.
      — Широкая область применения: обратная связь, опрос, анкета, техподдержка, заказ товара и т.п.
      — Настройка полей, прикрепление файла и т.д.
      Гибкость настроек contact form 7 позволяет получить инструмент не хуже платных аналогов.

      Ответить
  3. Я себе тоже эту форму на сайт ставлю, только делаю ее обычной отдельной страничкой, хотя способ со всплывающим меню тоже интересен, не знал про него раньше, хотя выглядит оригинально!

    Ответить
  4. Только всему учусь, поэтому информация как никогда очень для меня нужная. Очень порадовали столько разновидностей стилей. И по всплывающее меню даже не знала, понравилось, скорее всего буду его сейчас чаще использовать.

    Ответить
  5. Дмитрий

    У самого сайт сделан на WordPress. Считаю этот движок самым подходящим для новичков , которые делают первые шаги в создании своего сайта. Сайт делаю и наполняю информацией сам по тихоньку. Сайт делаю первый раз, поэтому приходится долго и муторно изучать некоторые моменты.С дизайном и наполнением уже давно определился и сделал, а вот как организовать на сайте обратную связь до данного момента ломал голову. Теперь я считаю, что это уже решенный вопрос. Спасибо за подробную информацию! Все разжёвано проще некуда, да еще с пошаговыми фотографиями — это просто находка для меня. Хотелось бы видеть побольше статей по WordPress.

    Ответить
  6. Мне тоже нравится контакт форм,по моему от самый удобный и быстрый в настройке!

    Плюс еще очень много мануала по настройкам 🙂

    Рекомендую !

    Ответить

Добавить комментарий

Seo оптимизация и продвижение - seovedenie.ru © 2017. Все права защищены