BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2014-11-27 / Вр:21:29 / просмотров: 51845

Итак, если вы хотите, чтобы форма обратной связи, форма «заказать звонок» и т. д. появлялась во всплывающем окне, вам нужно на WordPress установить два плагина: Easy FancyBox и Contact Form 7.

Возможно, у вас на блоге уже стоит плагин Contact Form 7 для формы обратной связи, так как он – один из самых популярных плагинов, на мой взгляд. Если на сайте нет этого плагина, тогда я вас направляю почитать статью, в которой как раз говориться о том, как установить плагин Contact Form 7.

Далее, установите плагин Easy FancyBox.

wordpress.org/plugins/easy-fancybox

Если у вас возникли затруднения по установке плагина на WordPress, тогда рекомендую почитать маленькое руководство.

Итак, мы установили два плагина: Easy FancyBox и Contact Form 7. Что дальше?!

А дальше мы создаем форму через плагин Contact Form 7. Для этого справа в меню выберите «Contact Form 7» => «Добавить новую».

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

Далее жмите на кнопку «Добавить новую»:

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

Теперь нужно дать имя для новой формы. Нажмите один раз мышкой по ссылке «Заголовок» и впишите в поле любое имя, например, «forma-bloggood-ru». После того как вы дали имя форме, не забудьте нажать на кнопку «Сохранить»:

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

После того как вы нажали кнопку «Сохранить», плагин Contact Form 7 сгенерирует короткий код (шорткод) для вывода формы. Вот этот короткий код нам и нужен. Скопируйте его:

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

Что дальше? А дальше создайте или откройте существующую запись или страницу с названием «Контакты». Переключаем в текстовом редакторе режим «Текст»:

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

и вставляем там вот такой код:

<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 "Not Found"]

</div>
</div>

Пример:

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

В результате вы увидите на странице «Контакты» ссылку с текстом «Написать письмо». Если нажать на ссылку, экран потемнеет и всплывет окно с  формой обратной связи:

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

Можно вместо ссылки вставить кнопку. Для этого закачайте изображение кнопки на сайт и вставьте вот такой код:

<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 "Not Found"]

</div>
</div>

В строке №2 укажите путь к картинке

<img src=" путь к изображению кнопки " alt="" />

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

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

Если вы хотите вставить ссылку в меню, тогда воспользуйтесь вот таким кодом:

<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 "Not Found"]'); ?>

</div>
</div>

Куда надо вставить этот код?
Ищите код меню.
И между тегами <ul>...</ul> вставляете этот код. Обращаю ваше внимание, что код должен стоять после строки вывода меню:

<?php wp_list_pages('title_li='); ?>

Для более точного понимания  даю подсказку:

<ul class="menu">
<?php wp_list_pages('title_li='); ?>

«---здесь код---»
</ul>

Пример:

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

В результате вы увидите как ссылка «Написать письмо» станет одним целым с меню.

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

Вот и все! Надеюсь, что статья была для вас полезной. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. zhassulan

    Здравствуйте почему не входит кнопка закрывающий во всплывающем окне

  2. Мария

    Спасибо за простую и доступную инструкцию! Очень выручили!

  3. Степан => автор блога Степан => автор блога

    Пожалуйста, Мария!
    Кстати, Мария, у Вас интересный блог!

  4. Мария

    Спасибо, Степан!) Я пока только осваиваю новую для себя сферу. Развлекаюсь на досуге)

  5. Степан => автор блога Степан => автор блога

    Здравствуйте! Проверьте вашу wordpress тему.
    В Теме обязательно должны быть вызовы

    wp_head();

    и

    wp_footer();

    без wp_head и wp_footer не будут работать многие плагины (в том числе и плагин Easy FancyBox).

  6. Владимир

    Добрый день.

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

  7. Степан => автор блога Степан => автор блога

    Здравствуйте, Владимир! Попробуйте вот так:
    Форма №1

    <a href="#contact_form_pop" class="fancybox">Написать письмо</a>
    <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
    ...здесь вставляем короткий код (шорткод) формы… 
    </div>
    </div>
    

    Форма №2

    <a href="#contact_form_pop1" class="fancybox">Написать письмо</a>
    <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop1">
    ...здесь вставляем короткий код (шорткод) формы… 
    </div>
    </div>
    
  8. Владимир

    Степан, добрый день.

    Спасибо за совет, к сожалению не помогло, по прежнему вызывается первая форма.

  9. Степан => автор блога Степан => автор блога

    Владимир, установите на сайт всплывающую форму, я посмотрю.

  10. Владимир

    Степан,

    Спасибо за помощь, на странице обработки ошибки 404,
    первая форма верхнее меню – Заказать звонок
    вторая форма – последняя ссылка, задайте нам вопрос!

  11. Степан => автор блога Степан => автор блога

    Владимир, расскажите, как вы установили вторую форму “Задайте свой вопрос нам”? Вы поставили шорткод прямо в код? Почему у меня такой вопрос, просто у Вас в исходном коде высвечивается шордкод, а такого не должно быть. Почитайте, как использовать в темах WordPress шорткоды (shortcode) здесь

  12. Владимир

    Степан,

    Спасибо за помощь. Заработало при такой вставке:

    <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>
  13. Степан => автор блога Степан => автор блога

    Пожалуйста, Владимир!

  14. Dima

    Спасибо, у Вас нашел то что нужно!!! Даже получилось вставить в шорткод кнопки от темы сайта)))
    Удачи Вам! ;-)

  15. Степан => автор блога Степан => автор блога

    Пожалуйста, Дима! Заходите чаше!
    И Вам удачи!

  16. vitos

    вставил все как написано одно с формой всплывает, но когда я нажимаю исправить на каких проверок не идет и письмо не уходит :?:
    и идет перевод на страницы site.ru/#FSContact1
    код вставил вот такой

    <a href="#contact_form_pop" class="fancybox">Написать письмо</a>
    <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
    [si-contact-form form='1'] 
    </div>
    </div>
  17. Наталья

    Ух, спасибо. Оказалось это так просто)))

  18. Степан => автор блога Степан => автор блога

    Пожалуйста! :smile:

  19. Роман

    Добрый день подскажите, где я ошибся, вместо формы вот такая ошибка, пытался вставить в код кнопку, но что-то не работает.

    The requested content cannot be loaded.
    Please try again later.

    код:

     <a href="#contact_form_pop">
    [button title="Оставьте заявку" class="fancybox"
     color="#f6f1e9" font_color="#4b4138"]
    </a>
     <div style="display:none" class="fancybox-hidden">
     <div id="contact_form_pop">
     [contact-form-7 id="5" title="Контактная форма 1"]
     </div>
     </div>
    
  20. Степан => автор блога Степан => автор блога

    Здравствуйте, Роман! Вы код в файл вставляете или в редактор?

  21. Роман

    я вставляю в редактор, в теме Betheme

  22. Степан => автор блога Степан => автор блога

    В редакторе есть, “визуально” и “текст”. Код нужно вставлять в “текст”.

  23. Подарки

    Здравствуйте. Подскажите пожалуйста, в теме есть форма в которой есть кнопка заказать. Но у нее в коде просто ссылка со словом link и при попытке вставить так как написано у вас ничего не работает( Не подскажете как это можно сделать?

     [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/4" el_class="has-animation fade-in-from-left"][wd_ptable title="Стандартная" active="no" price="2400" currency=" " price_period="руб." link="#" button_text="Заказать" target="_self"]
  24. Степан => автор блога Степан => автор блога

    Здравствуйте. Странный шорткод!

  25. Марина

    Здравствуйте! При нажатии на кнопку вместо формы предупреждение The requested content cannot be loaded.
    Please try again later.
    С чем это может быть связано?
    Заранее благодарю.

  26. Степан => автор блога Степан => автор блога

    Об этом я написал здесь

  27. Никита

    Здравствуйте. Подскажите пожалуйста, я сам код вставляю:

    <a href="#contact_form_pop" rel="nofollow">Написать письмо</a>

    При этом ссылка есть, но по ее нажатию ничего не происходит, куда копать? -)

  28. Степан => автор блога Степан => автор блога

    Здравствуйте.
    Еще раз, внимательно почитайте статью и все сделайте так, как там написано. Все заработает на 100%

  29. дмитрий

    не работает кнопка “перезвоните мне” на странице [ссылка удалена]
    делал по инструкции, вызов head и footer есть, когда выглядит так:

    <a href="#contact_form_pop" rel="nofollow"></a>
    [contact-form-7 id="638" title="callback"]
    

    помогите разобраться!

  30. Степан => автор блога Степан => автор блога

    “вызов head и footer есть” Здесь я не понял. Вы этот код в файл вставляете?
    В общем, нужно открывать вашу админку и смотреть. Так что-то сказать, что вы сделали не так тяжело.

  31. Василий

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

  32. Степан => автор блога Степан => автор блога

    Здравствуйте, Василий! На правильно указанный путь к картинке. Посмотрите здесь

  33. Вадимир

    Здравствуйте, Степан. Попытался вместо ссылки вставить кнопку. Но дело в том что мне нужно закрепить кнопку в определенном месте (справа). В CSS я это прописал так:

     a.fancybox {
      display:block;
      width:50px;
      height:185px;
      position:fixed;
      right:0;
      top:300px;
      z-index: 99999;
      } 

    . Кнопка отображается в нужном месте, на главной странице все как надо. Но появилась следующая проблема: картинки с открываемой страницы отображаются в кнопке. Чтобы закрепить кнопку в нужном месте нужно её стиль назвать fancybox, после этого начинают “лезть” картинки в нее. Если переименовать стили и соответственно в коде тоже изменить значение class=”fancybox” – все на странице отображается как надо, но перестает работать плагин easy fancybox…. Подскажите, пожалуйста, как решить эту проблему?

  34. Степан => автор блога Степан => автор блога

    Здравствуйте, Владимир! Попробуйте вот так:

    a.fancybox.image {
        z-index: 99;
    }
    

    Проверил на Вашем сайте, должно заработать

  35. Вадимир

    Не получилось. Кнопка “убежала” в левый верхний угол. :sad:

  36. Степан => автор блога Степан => автор блога

    Да не, все хорошо.

  37. Вадимир

    CSS принял такой вид:

     а.fancybox.image {
      display:block;
      width:50px;
      height:185px;
      position:fixed;
      right:0;
      top:300px;
      z-index: 99;
      } 

    , а визуально

     кнопка.png 
  38. Вадимир

    упс, как вставить скрин в сообщение)?

  39. Степан => автор блога Степан => автор блога

    на Вашу почту скинул свой email

  40. Евгений

    А у меня FancyBox конфликтует c Autoptimize – если включить сжатие javascript – то кнопка перестает работать. А без сжатия сайт грузится долго. Может подскажете, что делать?

  41. Степан => автор блога Степан => автор блога

    Попробуйте создать всплывающую форму самому (читайте тут) либо заменит плагин FancyBox на другой

  42. Олег

    Спасибо за статью. Такой вопрос — как заставить работать связку Contact Form 7 + Easy Fancy Box + Contact Form 7 Dynamic Text Extension ?
    Нужно, чтобы по клику форма открывалась в попапе и в нее передавались GET параметры из ссылки.

  43. Степан => автор блога Степан => автор блога

    С плагином “Contact Form 7 Dynamic Text Extension” я не работал.

  44. Дэн

    Почему-то всплывающее окошко уходит далеко вниз за границу сайта, в чем может быть проблема? какой-то конфликт скриптов?

  45. Степан => автор блога Степан => автор блога

    либо конфликт плагина, либо самой темы. Где-то совпались CSS-классы.

  46. Олег

    Степан, задача просто передать в форму GET параметры.
    Например, у нас есть ссылка:

    https://site.ru/contact-form?param1=value1&amp;param2=value2

    Как ее вставить в эту конструкцию?

    <a href="#contact_form_pop" rel="nofollow">заказать звонок</a>
    
        
            [ contact-form-7 id="420" title="Заказать звонок" ]
        
    

    Как понимаете, надо, чтобы в форму передались следующие параметры:

    ?param1=value1&amp;param2=value2
  47. Степан => автор блога Степан => автор блога

    Попробуйте установить модуль Getparam или же поискать ответ по запросу “как шорткоду передать параметры GET”

  48. Антон

    Добрый вечер, подскажите, пожалуйста, форма открывается, но под полями присутствует прокрутка. Не очень понятно, откуда тянется css этой прокрутки. Пытаюсь поставить значение 300px по ширине для #fancybox-content – не реагирует.

  49. Степан => автор блога Степан => автор блога

    Здравствуйте, Антон!
    Попробуйте вот так:

    #fancybox-content
    {
    width: 300px !important;
    }

  50. Антон

    Не работает. Фон формы становится шире, но полоса никуда не девается.

  51. Степан => автор блога Степан => автор блога

    Антон, дайте адрес сайта и где можно посмотреть на Вашу форму?

  52. Антон

    [ссылка удалена]

    В конце полосы “о компании” – кнопка задать вопрос

  53. Степан => автор блога Степан => автор блога

    Пробуйте вот так:

    div#fancybox-content div 
    {
        overflow: hidden !important;
    }
    
  54. Антон

    Сработало. Огромное спасибо. Очень помог ваш блог и советы.

  55. Степан => автор блога Степан => автор блога

    Пожалуйста, Антон! Будут вопросы, пишите, помогу чем смогу!

  56. Максим

    Здравствуйте. Установил на сайт udsgame.online форму без проблем и все работает. На [ссылка скрыта] при нажатии на картинку(кнопку) форма не открывается хоть убей. Темы одинаковые, возможно какой то плагин мешает но не могу понять какой. Заранее спасибо. Просьба ответить на почту

  57. Степан => автор блога Степан => автор блога

    Здравствуйте, Максим! Рекомендую попробовать по отключать плагины. Например, отключили один плагин, проверили форму. Если заработает форма, значит виновник был этот плагин и его нужно заменить другим. Только для проверки отключайте плагин а не удаляйте его, так как потом можно будет плагин вернуть со всеми его настройками. Пишите о результате!

  58. Елена

    Степан, огромное вам спасибо!!
    Я просто счастлива, благодаря вашим подсказкам!
    Поставила одну форму, все получилось!
    Добавила вторую на эту же страницу – отображалась та же самая первая форма, и я нашла ваш совет, что делать и в этом случае – в комментарии выше. Но тоже не получилось, как и у того человека сначала. Однако я заменила в первой строке тоже pop на pop1, и все заработало!!

    <a href="#contact_form_pop1" rel="nofollow"></a>

    Может, мой совет кому-то тоже будет полезен!

  59. Степан => автор блога Степан => автор блога

    Пожалуйста, Елена! Странно, что все заработало, так как нужно было еще заменить.

    <div id="contact_form_pop">

    на

    <div id="contact_form_pop1">
  60. Елена

    Степан, добрый день! А это я сделала сразу, как вы рекомендовали в ответе Владимиру от 10.05.2015 в 12:28

    Просто там не указано было в первой строке тоже цифра 1 (<a href="#contact_form_pop1"), как раз о чем я и написала. Вы в той рекомендации Владимиру тоже исправьте этот код, чтобы люди пользовались сразу без проблем)))

    Спасибо за ваш коммент на моем сайте) очень приятно!)))

  61. Степан => автор блога Степан => автор блога

    Здравствуйте, Елена! Вам огромное спасибо за поправку.
    И спасибо, что Вы на Вашем блоге пишите такие полезные и жизненно важные вещи.

  62. Елена

    Спасибо!! Буду еще к вам заглядывать! А вы приходите к нам на фотосессию!)))

  63. Степан => автор блога Степан => автор блога

    Спасибо за приглашения!

  64. Максим

    Здравствуйте, Степан.
    У меня такая же проблема, как была у Антона – при открытии окна появляются полосы прокрутки. Никак не могу понять, как можно их убрать. Это не работает:
    #fancybox-content
    {
    overflow: hidden !important;
    }

  65. Степан => автор блога Степан => автор блога

    Здравствуйте, Максим!
    В вашем случае сделайте так:

    #fancybox-wrap div {
        overflow: hidden !important;
    }
    

    Само луче, если вы на сайте найдете вот этот код и удалите его:

    <div style="width:auto;height:auto;overflow: auto;position:relative;">
  66. Максим

    #fancybox-wrap “съедает” кнопку закрытия. А про код то этот я знаю, только никак не могу нигде его найти :sad:

  67. Степан => автор блога Степан => автор блога

    попробуйте через total commander найти этот код. В total commander есть поиск, который может искать во всех файлах.

  68. Максим

    Спасибо, уже разобрался. Надо внимательнее читать мануалы ). Всего то надо было в настройках fancybox включить inline-content и класс, соответственно, тоже ставить class=”fancybox-inline”

  69. Дарья

    Добрый день, вставляю всплывающее окно в меню хэдера, само окно работает. А ссылка на русском не отображается, вместо букв вопросы, с английским текстов все ок. Я корректирую шаблон вордпресс, так вот остальные пункты меню на русском отображаются корректно.Не понимаю где нужно прописать кодировку, в плагине? в шаблоне? и как правильно это сделать.

  70. Степан => автор блога Степан => автор блога

    Здравствуйте, Дарья! Мне бы посмотреть на проблему. Дайте ссылку на сайт и скажите куда нажать. Посмотрю чем смогу помочь.

  71. Дарья

    Степан, спасибо, что отозвались! В хэдере кнопка “Заказать звонок”.Я временно разместила png файл вместо кнопки, чтоб как-то выйти из ситуации

  72. Степан => автор блога Степан => автор блога

    Попробуйте проверить кодировку в хедере. У Вас на всех файлах шаблона должна быть кодировка “UTF-8”.
    Почитайте вот эту статью, в какой кодировке сохранять веб страницу

  73. Антон

    Добрый день! Есть встроенная в тему кнопка roll-button border, внешний вид ее очень нравится. Как привязать всплывающее окошко fancybox к данной кнопке? Спасибо!

    Код кнопки на любую ссылку выглядит так:

     <a href="ссылка" class="roll-button border">Заказать обратный звонок!</a>
  74. Степан => автор блога Степан => автор блога

    Здравствуйте, Антон!
    А так, что, не работает?

    <a href="#contact_form_pop" class="roll-button border fancybox">Написать письмо</a>
  75. Кирилл

    Степан, большое спасибо за статью! Несколько раз ставил эти плагины на сайты, но вылетело уже и головы, как правильно прописать) :arrow:

  76. Саша

    Спасибо огромное. Разобралась за 5 минут. Все работает отлично!

  77. Степан => автор блога Степан => автор блога

    Пожалуйста, Саша!

  78. Валерий

    Это все не очень, плагины. Даже казалось бы известный ContactForm уже не тот и крайне не удобный. Использую под формы нормальный плагин https://ru.wordpress.org/plugins/ucalc/ побыстрей и попроще многих других будет.

  79. Степан => автор блога Степан => автор блога

    Спасибо за комментарий!

  80. Сергей

    Когда-то давно тоже через Contact Form 7 такие всплывашки прикручивал. Только модалку от Bootstrap привязывал. Было где-то дополнение для CF7 для этого, но название не помню, может уже и нет его. Сейчас времени нет ручками все делать, через stepform.io/ru всякие всплывашки делаю, в окошке чтоб само всплывало и при клике на кнопку или ссылку. Но когда само всплывает это не очень пользователями воспринимается, так что надо аккуратно с этими окнами.

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573