BloGGood.ru

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

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

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

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

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

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

Итак, если вы хотите, чтобы форма обратной связи, форма «заказать звонок» и т. д. появлялась во всплывающем окне, вам нужно на 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="http://адрес сайта/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

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

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

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

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

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

  1. zhassulan

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

    Ответить

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

    Степан => автор блога отвечает:

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

    wp_head();

    и

    wp_footer();

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

    Ответить

  2. Мария

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Мария отвечает:

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

    Ответить

  3. Владимир

    Добрый день.

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

    Ответить

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

    Степан => автор блога отвечает:

    Здравствуйте, Владимир! Попробуйте вот так:
    Форма №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>
    

    Ответить

    Владимир отвечает:

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Владимир отвечает:

    Степан,

    Спасибо за помощь, на странице обработки ошибки 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>
    Степан => автор блога

    Степан => автор блога отвечает:

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

  4. Dima

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  5. 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>

    Ответить

  6. Наталья

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  7. Роман

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

    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>
    

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Роман отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  8. Подарки

    Здравствуйте. Подскажите пожалуйста, в теме есть форма в которой есть кнопка заказать. Но у нее в коде просто ссылка со словом 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"]

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  9. Марина

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  10. Никита

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  11. дмитрий

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  12. Василий

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  13. Вадимир

    Здравствуйте, Степан. Попытался вместо ссылки вставить кнопку. Но дело в том что мне нужно закрепить кнопку в определенном месте (справа). В 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;
    }
    

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

    Ответить

    Вадимир отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Вадимир отвечает:

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

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

    , а визуально

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  15. Евгений

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  16. Олег

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Олег отвечает:

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

    http://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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  17. Дэн

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  18. Антон

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

    Ответить

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

    Степан => автор блога отвечает:

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

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

    Ответить

    Антон отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Антон отвечает:

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

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

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

    Степан => автор блога отвечает:

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  20. Максим

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  21. Елена

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    <div id="contact_form_pop">

    на

    <div id="contact_form_pop1">

    Ответить

    Елена отвечает:

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Елена отвечает:

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

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

    Степан => автор блога отвечает:

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

  22. Максим

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

    Ответить

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

    Степан => автор блога отвечает:

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

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

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

    <div style="width:auto;height:auto;overflow: auto;position:relative;">

    Ответить

    Максим отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Максим отвечает:

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

  23. Дарья

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Дарья отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  24. Антон

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

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

    Ответить

  25. Кирилл

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

    Ответить

  26. Саша

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :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]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

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

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

3). Довести количество статей до 750

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

5). Создать книгу

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

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

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

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

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