Как ни крути любой сайт должен иметь форму обратной связи. Кто-то её делает на странице контакты или о компании, кто-то как я ставит форму обратной связи сбоку по всем страницам.
Недавно мы с вами рассматривали форму обратной связи от сервиса Redhelper. Лично мне это вариант очень нравится, но порой клиенту нужно что-то большее по функционалу, дополнительные поля или возможность прикрепить файл.
Со всем этим хорошо справляется наверное самый популярный плагин обратной связи для вордпресс contact form 7. Настраивается он очень легко, без проблем добавляются дополнительные поля в него, а саму форму в статью можно вставить при помощи шорткода.
Но хочется сделать всё красивее, чем просто поля на странице, хочется сделать всплывающую форму обратной связи для вордпресс. И с этим нам поможет плагин easyfancybox в связке с contact forms 7.
В итоге мы получим ссылку а-ля «написать нам» при клике на которую появляется попап.
Ну давайте всё рассмотрим вкратце, но по шагам.
- Скачиваем плагин contact forms 7 здесь, устанавливаем и активируем его
- Делаем нашу форму с необходимыми полями
- Скачиваем плагин easyfancybox здесь, устанавливаем и активируем.
Пол дела уже сделано.
Теперь идём в виджеты или встатью или страницу (всё зависит от того, где будет наша ссылка) и редактируем. Отключаем визуальный редактор нажатием вкладки «текст» в окне редактирвоания записи и в нужное место вставляем следующий код:
<a class="fancybox" href="#contact_form_pop">Написать нам</a>
<div style="display:none">
<div id="contact_form_pop">
[contact-form 1 "Contact form 1"]
</div>
</div>
Естественно шорткод [contact-form 1 «Contact form 1»] от формы обратной связи для вордпресс может быть у вас другим и тогда меняем его просто на нужный. И сохраняем всё это дело.
Таким образом при помощи этих нехитрых манипуляций мы получили всплывающую форму обратной связи для вордпресс.
Ну и небольшой прикол о жизни программиста)
С уважением, фрилансер-вебмастер Александр Шульгинов
15 комментариев. Оставить новый
Используем бесплатную форму от http://consultant-web.ru/callme/
Думаю установка данного скрипта у новичка вызовет затруднения.Или это не так?
То, что предлагает Николай — это форма заказа обратного звонка. Не совсем то. Все-же форма обратной связи — это немного другое. Ваш вариант решения прост и эффективен. Хороший вариант.
А я делал у себя на блоге такую форму вообще без плагинов. http://blog.ddw.kz/uluchshennaya-forma-obratnoj-svyazi-bez-plagina/
Тоже вроде ничего так получилось… 🙂
Сделал, как сказано в статье. Итог: пользователь не видит, отправлено сообщение или нет. Если он не заполнил какое-то обязательное поле, Contact Form 7 ругнётся, но посетитель сайта этого не увидит: div же скрыт. Нужно ещё раз нажать ссылку «Написать нам», чтобы увидеть результат. Понятно, никто этого делать не будет. В общем, ищу подходящий плагин дальше.
У меня установлен SBModal для всплывающих окон. В связке с ним, Contact Form 7 нормально показывает незаполненные поля, а так-же ошибки при отправке или сообщение об успешной отправке.
Но с некоторых пор, Contact Form 7 сама по себе стала очень часто выдавать сообщения об ошибке. Из трёх-четырёх попыток отправки с изменением email может уйти только одно. Вот думаю, то-ли вернуться к своей форме, которая без плагина, то-ли поменять Contact Form 7 на что-то ещё…
действительно contact form 7 подглючивает в последнее время. будем надеяться что с обновлениями это поправят
Спасибо за ответы! Долго рылся в базе плагинов — наконец нашёл! Отличный плагин «NEX-Forms Express». Умеет всё то же, что и точнее Contact Form 7 (точнее Formidable, я юзаю его), только без проблем позволяет вызывать окно на AJAX (Либо обычным способом. Для каждой веб-формы можно выбирать разные типы шорт-кодов). И никаких ошибок. Очень понравился!
спасибо, попробую и возможно напишу обзор на него)
[contact-form-7 id=»34″ title=»Контактная форма 1″] — у меня не превращается в форму
Код формы несколько странный или это при сохранении так преобразовалось?
У меня вот так выглядит
[contact-form-7 id="2727" title="Контактная форма 1"]кавычки какие-то странные тут в коде
Установили Все работает!! Но появилась ошибка в фотогалерее. Раньше для фотогалереи стоял плагин Lightbox галерея, После установки easyfancybox в фотогалерее выводятся 2 фото одно поверх другого. То есть оба плагина открывают фото из галереи и их приходится закрывать по очереди. Как это исправить?
ну так удалите второй плагин)
Поставил все работает. Контактная форма класс можно добавить поля какие надо.
А у меня FancyBox конфликтует c Autoptimize — если включить сжатие javascript — то кнопка перестает работать. А без сжатия сайт грузится долго. Может подскажете, что делать?