Итак, если вы хотите, чтобы форма обратной связи, форма «заказать звонок» и т. д. появлялась во всплывающем окне, вам нужно на WordPress установить два плагина: Easy FancyBox и Contact Form 7.
Возможно, у вас на блоге уже стоит плагин Contact Form 7 для формы обратной связи, так как он – один из самых популярных плагинов, на мой взгляд. Если на сайте нет этого плагина, тогда я вас направляю почитать статью, в которой как раз говориться о том, как установить плагин Contact Form 7.
Далее, установите плагин Easy FancyBox.
Если у вас возникли затруднения по установке плагина на WordPress, тогда рекомендую почитать маленькое руководство.
Итак, мы установили два плагина: Easy FancyBox и Contact Form 7. Что дальше?!
А дальше мы создаем форму через плагин Contact Form 7. Для этого справа в меню выберите «Contact Form 7» => «Добавить новую».
Далее жмите на кнопку «Добавить новую»:
Теперь нужно дать имя для новой формы. Нажмите один раз мышкой по ссылке «Заголовок» и впишите в поле любое имя, например, «forma-bloggood-ru». После того как вы дали имя форме, не забудьте нажать на кнопку «Сохранить»:
После того как вы нажали кнопку «Сохранить», плагин Contact Form 7 сгенерирует короткий код (шорткод) для вывода формы. Вот этот короткий код нам и нужен. Скопируйте его:
Что дальше? А дальше создайте или откройте существующую запись или страницу с названием «Контакты». Переключаем в текстовом редакторе режим «Текст»:
и вставляем там вот такой код:
<a href="#contact_form_pop" class="fancybox">Написать письмо</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> ...здесь вставляем короткий код (шорткод) формы… </div> </div>
Вместо текста «...здесь вставляем короткий код (шорткод) формы…» вам нужно вставить тот самый сгенерированный плагином Contact Form 7 короткий код. В моем случае это будет выглядеть вот так:
<a href="#contact_form_pop" class="fancybox">Написать письмо</a <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form-7 404 "Не найдено"] </div> </div>
Пример:
В результате вы увидите на странице «Контакты» ссылку с текстом «Написать письмо». Если нажать на ссылку, экран потемнеет и всплывет окно с формой обратной связи:
Можно вместо ссылки вставить кнопку. Для этого закачайте изображение кнопки на сайт и вставьте вот такой код:
<a href="#contact_form_pop" class="fancybox"> <img src="https://адрес сайта/wp/wp-content/uploads/2014/10/knopka-bloggood-ru.png" alt="" /> </a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop"> [contact-form-7 404 "Не найдено"] </div> </div>
В строке №2 укажите путь к картинке
<img src=" путь к изображению кнопки " alt="" />
В результате вы увидите на странице вот такую кнопку, при нажатии на которую откроется всплывающее окно формы обратной связи:
Если вы хотите вставить ссылку в меню, тогда воспользуйтесь вот таким кодом:
<li><a href="#contact_form_pop" class="fancybox">Написать письмо</a></li>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
<?php echo do_shortcode('[contact-form-7 404 "Не найдено"]'); ?>
</div>
</div>
Куда надо вставить этот код?
Ищите код меню.
И между тегами <ul>...</ul> вставляете этот код. Обращаю ваше внимание, что код должен стоять после строки вывода меню:
<?php wp_list_pages('title_li='); ?>
Для более точного понимания даю подсказку:
<ul class="menu">
<?php wp_list_pages('title_li='); ?>
«---здесь код---»
</ul>
Пример:
В результате вы увидите как ссылка «Написать письмо» станет одним целым с меню.
Вот и все! Надеюсь, что статья была для вас полезной. Удачи!!!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как установить минимальную сумму для заказа – WooCommerce?
URL ссылка миниатюры для картинки – WordPress
Как добавить визуальный редактор для «Цитат (Отрывок)» – WordPress ?
Как добавить «Цитату (Отрывок)» для страниц?Похожие статьи
Как включить автоматическое обновление WordPress, плагинов, тем и переводов
Как создать мультиязычный сайт на WordPress. Плагин Multilanguage
Как убрать скобки в записи количества постов на WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222534 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187742 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
80 Ответов на комментарий - Как создать всплывающую форму обратной связи на WordPress
Добавить комментарий
Метки: wordpress, форма обратной связи
Здравствуйте почему не входит кнопка закрывающий во всплывающем окне
Спасибо за простую и доступную инструкцию! Очень выручили!
Пожалуйста, Мария!
Кстати, Мария, у Вас интересный блог!
Спасибо, Степан!) Я пока только осваиваю новую для себя сферу. Развлекаюсь на досуге)
Здравствуйте! Проверьте вашу wordpress тему.
В Теме обязательно должны быть вызовы
и
без wp_head и wp_footer не будут работать многие плагины (в том числе и плагин Easy FancyBox).
Добрый день.
Спасибо за плагин, все сделал как указано в статье, заработало сразу.
Сделал одну форму контактов – привязал к пункту меню, сделал другую, хотел вывести на другой странице как ссылку, заработало, но в всплывающем окне открывается первая форма, шорт-код указан от другой формы.
Как это можно исправить?
Здравствуйте, Владимир! Попробуйте вот так:
Форма №1
Форма №2
Степан, добрый день.
Спасибо за совет, к сожалению не помогло, по прежнему вызывается первая форма.
Владимир, установите на сайт всплывающую форму, я посмотрю.
Степан,
Спасибо за помощь, на странице обработки ошибки 404,
первая форма верхнее меню – Заказать звонок
вторая форма – последняя ссылка, задайте нам вопрос!
Владимир, расскажите, как вы установили вторую форму “Задайте свой вопрос нам”? Вы поставили шорткод прямо в код? Почему у меня такой вопрос, просто у Вас в исходном коде высвечивается шордкод, а такого не должно быть. Почитайте, как использовать в темах WordPress шорткоды (shortcode) здесь
Степан,
Спасибо за помощь. Заработало при такой вставке:
<a href="#contact_form_pop1" class="fancybox">задайте свой вопрос нам</a></p> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop1"> <?php echo do_shortcode('[contact-form-7 id="12" title="Контакты"]'); ?> </div> </div>Пожалуйста, Владимир!
Спасибо, у Вас нашел то что нужно!!! Даже получилось вставить в шорткод кнопки от темы сайта)))
Удачи Вам!
Пожалуйста, Дима! Заходите чаше!
И Вам удачи!
вставил все как написано одно с формой всплывает, но когда я нажимаю исправить на каких проверок не идет и письмо не уходит
и идет перевод на страницы site.ru/#FSContact1
код вставил вот такой
Ух, спасибо. Оказалось это так просто)))
Пожалуйста!
Добрый день подскажите, где я ошибся, вместо формы вот такая ошибка, пытался вставить в код кнопку, но что-то не работает.
The requested content cannot be loaded.
Please try again later.
код:
Здравствуйте, Роман! Вы код в файл вставляете или в редактор?
я вставляю в редактор, в теме Betheme
В редакторе есть, “визуально” и “текст”. Код нужно вставлять в “текст”.
Здравствуйте. Подскажите пожалуйста, в теме есть форма в которой есть кнопка заказать. Но у нее в коде просто ссылка со словом link и при попытке вставить так как написано у вас ничего не работает( Не подскажете как это можно сделать?
Здравствуйте. Странный шорткод!
Здравствуйте! При нажатии на кнопку вместо формы предупреждение The requested content cannot be loaded.
Please try again later.
С чем это может быть связано?
Заранее благодарю.
Об этом я написал здесь
Здравствуйте. Подскажите пожалуйста, я сам код вставляю:
При этом ссылка есть, но по ее нажатию ничего не происходит, куда копать? -)
Здравствуйте.
Еще раз, внимательно почитайте статью и все сделайте так, как там написано. Все заработает на 100%
не работает кнопка “перезвоните мне” на странице [ссылка удалена]
делал по инструкции, вызов head и footer есть, когда выглядит так:
помогите разобраться!
“вызов head и footer есть” Здесь я не понял. Вы этот код в файл вставляете?
В общем, нужно открывать вашу админку и смотреть. Так что-то сказать, что вы сделали не так тяжело.
Здравствуйте Степан, хотел поставить форму с кнопкой, все сделал по схеме. Картинка не показывается, один квадрат маленький, пробовал разные размеры, ничего не меняется. Подскажите что нужно сделать?
Здравствуйте, Василий! На правильно указанный путь к картинке. Посмотрите здесь
Здравствуйте, Степан. Попытался вместо ссылки вставить кнопку. Но дело в том что мне нужно закрепить кнопку в определенном месте (справа). В CSS я это прописал так:
a.fancybox { display:block; width:50px; height:185px; position:fixed; right:0; top:300px; z-index: 99999; }. Кнопка отображается в нужном месте, на главной странице все как надо. Но появилась следующая проблема: картинки с открываемой страницы отображаются в кнопке. Чтобы закрепить кнопку в нужном месте нужно её стиль назвать fancybox, после этого начинают “лезть” картинки в нее. Если переименовать стили и соответственно в коде тоже изменить значение class=”fancybox” – все на странице отображается как надо, но перестает работать плагин easy fancybox…. Подскажите, пожалуйста, как решить эту проблему?
Здравствуйте, Владимир! Попробуйте вот так:
a.fancybox.image { z-index: 99; }Проверил на Вашем сайте, должно заработать
Не получилось. Кнопка “убежала” в левый верхний угол.
Да не, все хорошо.
CSS принял такой вид:
а.fancybox.image { display:block; width:50px; height:185px; position:fixed; right:0; top:300px; z-index: 99; }, а визуально
упс, как вставить скрин в сообщение)?
на Вашу почту скинул свой email
А у меня FancyBox конфликтует c Autoptimize – если включить сжатие javascript – то кнопка перестает работать. А без сжатия сайт грузится долго. Может подскажете, что делать?
Попробуйте создать всплывающую форму самому (читайте тут) либо заменит плагин FancyBox на другой
Спасибо за статью. Такой вопрос — как заставить работать связку Contact Form 7 + Easy Fancy Box + Contact Form 7 Dynamic Text Extension ?
Нужно, чтобы по клику форма открывалась в попапе и в нее передавались GET параметры из ссылки.
С плагином “Contact Form 7 Dynamic Text Extension” я не работал.
Почему-то всплывающее окошко уходит далеко вниз за границу сайта, в чем может быть проблема? какой-то конфликт скриптов?
либо конфликт плагина, либо самой темы. Где-то совпались CSS-классы.
Степан, задача просто передать в форму GET параметры.
Например, у нас есть ссылка:
Как ее вставить в эту конструкцию?
<a href="#contact_form_pop" rel="nofollow">заказать звонок</a> [ contact-form-7 id="420" title="Заказать звонок" ]Как понимаете, надо, чтобы в форму передались следующие параметры:
Попробуйте установить модуль Getparam или же поискать ответ по запросу “как шорткоду передать параметры GET”
Добрый вечер, подскажите, пожалуйста, форма открывается, но под полями присутствует прокрутка. Не очень понятно, откуда тянется css этой прокрутки. Пытаюсь поставить значение 300px по ширине для #fancybox-content – не реагирует.
Здравствуйте, Антон!
Попробуйте вот так:
#fancybox-content
{
width: 300px !important;
}
Не работает. Фон формы становится шире, но полоса никуда не девается.
Антон, дайте адрес сайта и где можно посмотреть на Вашу форму?
[ссылка удалена]
В конце полосы “о компании” – кнопка задать вопрос
Пробуйте вот так:
div#fancybox-content div { overflow: hidden !important; }Сработало. Огромное спасибо. Очень помог ваш блог и советы.
Пожалуйста, Антон! Будут вопросы, пишите, помогу чем смогу!
Здравствуйте. Установил на сайт udsgame.online форму без проблем и все работает. На [ссылка скрыта] при нажатии на картинку(кнопку) форма не открывается хоть убей. Темы одинаковые, возможно какой то плагин мешает но не могу понять какой. Заранее спасибо. Просьба ответить на почту
Здравствуйте, Максим! Рекомендую попробовать по отключать плагины. Например, отключили один плагин, проверили форму. Если заработает форма, значит виновник был этот плагин и его нужно заменить другим. Только для проверки отключайте плагин а не удаляйте его, так как потом можно будет плагин вернуть со всеми его настройками. Пишите о результате!
Степан, огромное вам спасибо!!
Я просто счастлива, благодаря вашим подсказкам!
Поставила одну форму, все получилось!
Добавила вторую на эту же страницу – отображалась та же самая первая форма, и я нашла ваш совет, что делать и в этом случае – в комментарии выше. Но тоже не получилось, как и у того человека сначала. Однако я заменила в первой строке тоже pop на pop1, и все заработало!!
Может, мой совет кому-то тоже будет полезен!
Пожалуйста, Елена! Странно, что все заработало, так как нужно было еще заменить.
на
Степан, добрый день! А это я сделала сразу, как вы рекомендовали в ответе Владимиру от 10.05.2015 в 12:28
Просто там не указано было в первой строке тоже цифра 1 (<a href="#contact_form_pop1"), как раз о чем я и написала. Вы в той рекомендации Владимиру тоже исправьте этот код, чтобы люди пользовались сразу без проблем)))
Спасибо за ваш коммент на моем сайте) очень приятно!)))
Здравствуйте, Елена! Вам огромное спасибо за поправку.
И спасибо, что Вы на Вашем блоге пишите такие полезные и жизненно важные вещи.
Спасибо!! Буду еще к вам заглядывать! А вы приходите к нам на фотосессию!)))
Спасибо за приглашения!
Здравствуйте, Степан.
У меня такая же проблема, как была у Антона – при открытии окна появляются полосы прокрутки. Никак не могу понять, как можно их убрать. Это не работает:
#fancybox-content
{
overflow: hidden !important;
}
Здравствуйте, Максим!
В вашем случае сделайте так:
#fancybox-wrap div { overflow: hidden !important; }Само луче, если вы на сайте найдете вот этот код и удалите его:
#fancybox-wrap “съедает” кнопку закрытия. А про код то этот я знаю, только никак не могу нигде его найти
попробуйте через total commander найти этот код. В total commander есть поиск, который может искать во всех файлах.
Спасибо, уже разобрался. Надо внимательнее читать мануалы ). Всего то надо было в настройках fancybox включить inline-content и класс, соответственно, тоже ставить class=”fancybox-inline”
Добрый день, вставляю всплывающее окно в меню хэдера, само окно работает. А ссылка на русском не отображается, вместо букв вопросы, с английским текстов все ок. Я корректирую шаблон вордпресс, так вот остальные пункты меню на русском отображаются корректно.Не понимаю где нужно прописать кодировку, в плагине? в шаблоне? и как правильно это сделать.
Здравствуйте, Дарья! Мне бы посмотреть на проблему. Дайте ссылку на сайт и скажите куда нажать. Посмотрю чем смогу помочь.
Степан, спасибо, что отозвались! В хэдере кнопка “Заказать звонок”.Я временно разместила png файл вместо кнопки, чтоб как-то выйти из ситуации
Попробуйте проверить кодировку в хедере. У Вас на всех файлах шаблона должна быть кодировка “UTF-8”.
Почитайте вот эту статью, в какой кодировке сохранять веб страницу
Добрый день! Есть встроенная в тему кнопка roll-button border, внешний вид ее очень нравится. Как привязать всплывающее окошко fancybox к данной кнопке? Спасибо!
Код кнопки на любую ссылку выглядит так:
Здравствуйте, Антон!
А так, что, не работает?
Степан, большое спасибо за статью! Несколько раз ставил эти плагины на сайты, но вылетело уже и головы, как правильно прописать)
Спасибо огромное. Разобралась за 5 минут. Все работает отлично!
Пожалуйста, Саша!
Это все не очень, плагины. Даже казалось бы известный ContactForm уже не тот и крайне не удобный. Использую под формы нормальный плагин https://ru.wordpress.org/plugins/ucalc/ побыстрей и попроще многих других будет.
Спасибо за комментарий!
Когда-то давно тоже через Contact Form 7 такие всплывашки прикручивал. Только модалку от Bootstrap привязывал. Было где-то дополнение для CF7 для этого, но название не помню, может уже и нет его. Сейчас времени нет ручками все делать, через stepform.io/ru всякие всплывашки делаю, в окошке чтоб само всплывало и при клике на кнопку или ссылку. Но когда само всплывает это не очень пользователями воспринимается, так что надо аккуратно с этими окнами.