Home / Блоговедение / Эффектная всплывающая форма для блога
Всплывающая форма

Эффектная всплывающая форма для блога

Здравствуйте, уважаемые читатели моего блога. Целый месяц я занимался другим сайтом, а на блоге только отвечал на комментарии. Но этот месяц не прошел зря – за это время я узнал много нового – научился устанавливать и настраивать премиум-темы, близко познакомился с CSS и много работал с Фотошопом.

Сегодня я хочу рассказать об одной из интересных фишек, которую я применил на новом сайте, который, как и блог, работает на CMS WordPress и посвящен туристической тематике. Там мне хотелось сделать форму заказа, где любой желающий смог бы ввести некие пожелания по интересующему его туру и отправить заявку по e-mail. То есть я хотел всплывающую форму заказа. Это стильно, современно, удобно для посетителей и придает сайту профессионализма.

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

Казалось бы, в чем проблема – создал форму, да поставил на сайт… Можно и так, конечно. Но мне хотелось сделать удобнее и красивее. Идея моя была такая – вместо формы в статьях о разных странах ставить просто кнопку или ссылку “Заказать”, при нажатии на которую появлялось бы всплывающее окно с формой заказа. Ведь для WordPress существует множество плагинов, должен быть и такой…

Потратив 4 дня на поиски и испытания разных плагинов для всплывающих окон и создания форм, я был разочарован. Плагины всплывающих форм либо не работали как следует, либо создавали только примитивные формы связи из 3-х полей, либо были платными и малополезными. С плагинами просто всплывающих окон оказалось еще хуже – они либо были вообще неуправляемыми, для показа всплывающей рекламы, либо не умели выводить формы, либо появлялись с такими искаженными цветами, что смотреть страшно… В общем, намучился я много, но выход нашел! А все гениальное, как известно — просто!

Итак, выход вот – плагин Contact Form для создания любой желаемой формы + плагин FancyBox для вывода картинок во всплывающем окне. Картинок? Да, но этот плагин имеет гораздо больше малоизвестных возможностей, в том числе он может выводить в окне практически любой контент, а не только картинки. Я давно установил FancyBox на блоге, когда писал статью с большими скриншотами и нужно было сделать возможность их показа в отдельном окне. С этим он справляется успешно, а теперь я его и вовсе зауважал, потому что по возможностям даже платные плагины и близко к нему не приближаются, а FancyBox абсолютно бесплатен, и использовать его очень просто.

Как FancyBox показывает картинки, можно увидеть, кликнув по изображению в начале статьи. Но перейдем к практической части.

Делаем всплывающую форму на блоге

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

Как устанавливать и включать плагины – рассказывать не буду. Думаю, читатель, который заинтересовался моей статьей, уже имеет блог и умеет устанавливать плагины. А тому, кто еще не имеет блога, и эта статья бесполезна в принципе.

Итак, установите и активируйте плагин Contact Form. Он есть в официальном репозитории WordPress. В нем нужно создать какую-нибудь форму, например – форму обратной связи. У многих это уже сделано, так что здесь проблем возникнуть не должно.

Теперь установите и активируйте второй плагин – “FancyBox for WP”. Установить его можно прямо с блога, из админки, нажав ссылку “добавить новый плагин” и вписав название – он тоже есть в официальном репозитории WordPress. Можно использовать и его разновидность – “Easy FancyBox”, но у меня в шаблоне было встроенное слайдшоу и картинки при нажатии на них выводились сразу в двух окнах, да и настроек в нем меньше, поэтому мне он не подошел. Я советую FancyBox for WP, с ним вряд ли будут проблемы даже если на блоге установлена премиум-тема.. А в остальном никакой разницы нет — все работает одинаково.

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

<a class="fancybox" href="#contact_form_pop">Написать письмо</a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">КОД ФОРМЫ CONTACT FORM</div>
</div>

Вместо «КОД ФОРМЫ CONTACT FORM» поставьте свой код для вставки формы, который дает плагин Contact Form — полностью, вместе с квадратными скобками. В итоге получаем вот такую ссылку: Написать письмо

А если Вы хотите получить не просто ссылку, а поставить какую-нибудь картинку в виде кнопки или другое изображение, то заранее приготовьте его, загрузите на блог (например, в библиотеку медиафайлов) и скопируйте ссылку на эту картинку. Код для вставки немного изменится – уберем надпись и добавим картинку:

<a class="fancybox" href="#contact_form_pop"><img src="http://www.yura-blog.ru/wp-content/uploads/2013/07/button-message.png" alt="" /></a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">КОД ФОРМЫ CONTACT FORM</div>
</div>

Этот код поставит на блог кнопку со ссылкой на всплывающую форму (кнопка работает):

Вот и все! Этот код можно вставлять на любую страницу блога или в сайдбар. Но помните, что на одной странице можно ставить сколько угодно таких кнопок, но все они должны вызывать одну и ту же форму. Вы можете поставить 2 кнопки для 2-х разных форм на одной странице, но обе будут показывать всплывающее окно с той формой, которая идет на странице первой. На разных страницах можно вызывать разные формы – именно этот результат мне и был нужен.

Если поставить в сайдбар обычный текстовый виджет и вставить в него этот код, то там также все будет работать.

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

Здравствуйте, уважаемые читатели моего блога. Целый месяц я занимался другим сайтом, а на блоге только отвечал на комментарии. Но этот месяц не прошел зря – за это время я узнал много нового – научился устанавливать и настраивать премиум-темы, близко познакомился с CSS и много работал с Фотошопом. Сегодня я хочу рассказать об одной из интересных фишек, которую я применил на новом сайте, который, как и блог, работает на CMS WordPress и посвящен туристической тематике. Там мне хотелось сделать форму заказа, где любой желающий смог бы ввести некие пожелания по интересующему его туру и отправить заявку по e-mail. То есть я…

Review Overview

User Rating: 4.87 ( 3 votes)

Читайте также:

Дубли страниц в Wordpress

Как убрать дубли страниц в WordPress и вернуть All in One SEO Pack

Доброго времени суток, уважаемые читатели. Как обычно, долго ничего не писал, но это не значит, …

Нужна ли покупка ссылок для сайта?

Полезна ли покупка ссылок для сайта?

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

153 комментария

  1. У меня косяк получается:
    hostingkartinok.com/show-image.php?id=dbff3a68c67bba324a04c5d7f6fcb179

    а код вот:

    [contact-form-7 id="116" title="ФЗ 0_2"]

    где я ошибся?

    • Юрий Пономаренко

      Такая ошибка бывает, если где-то остаются незакрытыми кавычки или скобки, или есть лишние. Внимательно проверьте всю часть кода, чтобы была в точности, как в статье, особенно эти знаки. Где-то тег не закрыт.

      • Все равно не получается…
        Вот то что получается в Contact form 7:
        (Ваше имя (обязательно)

        Ваш телефон (обязательно)
        [tel* phone id:dotstheme class:btn «Ваш телефон (обязательно)»]

        Ваш E-Mail (обязательно)
        [your-email]

        Когда Вам удобно, чтобы мы позвонили?
        [textarea your-message]

        [submit «ОТПРАВИТЬ»])

        После генерится код:
        [contact-form-7 id="214" title="Заказ звонка"]

        и я его как есть с квадратными скобками вставляю вместо «КОД ФОРМЫ CONTACT FORM»

        в итоге все тоже самое

        • Юрий Пономаренко

          А если эту форму поставить просто на пустую страницу, она работает? Без всплывающего окна имею в виду. Потому что мне кажется здесь проблема как раз с этой формой. Окно то появляется нормально, а формы нет. Пришлите мне на e-mail скриншот всей страницы с настройкой формы. Ещё попробуйте сделать простейшую форму и вставить в окно ее, чтобы проверить работу плагинов, а потом уже заменить ее на эту форму. Проблема в ней, скорее всего, неправильная она.

      • я точно все вставляю но не отображает форму. Хотя на простой странице сайта плагин работает, подскажите как решить проблему

        • Юрий Пономаренко

          Да я уже не знаю, что добавить, вроде все написал, и в комментариях кучу проблем переписали давно. Что я могу сказать, не видя ни сайта, ни кода его. Это же все руками ковырять надо, а не гадать.

    • Не всплывает форма на wppage. Сделал всё как написано у Вас. Картинка выводится, на неё жму и ничего не происходит. В чём причина? Помогите, если можете. Заранее благодарен.

      • Юрий Пономаренко

        Здесь речь идет о форме на основе Contact Form. Для других и код вставки может быть другой. Бывает конфликт плагинов или темы с плагинами. Отключите wppage и испытайте код на обычной странице — причину проще будет выявить. Но сначала нужно код внимательно проверить — одна пропущенная или лишняя запятая может испортить все дело. И настройки FancyBox не мешает посмотреть — на картинках можно испытать, если работает нормально, то может выводить в окне обычные картинки в оригинальном размере(если у них не удалены ссылки на саму картинку). У меня нет wppage, не могу больше ничего сказать, т.к. не пробовал, но вряд ли в нем причина. Создайте обычную пустую тестовую страницу, там испытайте все плагины, при отключенном wppage, получите или рабочий код, или причину, почему не работает.

        • Спасибо за ответ. У меня установлена Contakt Form 7. На обычной странице всё работает. Не хочет только на wppage.

          • Юрий Пономаренко

            Скорее всего причина такая — этот плагин создает страницу со своим шаблоном, а в нем скорее всего не прописаны нужные скрипты, которые бы срабатывали при вызове всплывающего окна. Можно посмотреть и сравнить в основном шаблоне сайта (в хедере обычно), и в шаблоне wppage. Не знаю, можно ли там поковыряться, но я бы не стерпел и посмотрел на Вашем месте. В шаблоне страницы wppage ищите — там чего-то не хватает, подключение скриптов jquary надо проверить и т.п. Можно поискать и посмотреть, что нужно для нормальной работы FancyBox на обычной странице и добавить — информации про это полно. Конечно, если шаблон wppage вообще можно редактировать — такие детали не знаю.

    • у меня точно такое же, в место формы показывает код [contact-form-7 id="34" title="Контактная форма 1"]

      • Юрий Пономаренко

        Значит, где-то что-то в коде пропустили, надо в точности до запятой соблюдать. Смотрите код, который вставляете.

  2. Чувак, ты не представляешь, как я тебе благодарен. Ну никак не получалось сделать эту всплывающую форму. Уже добрую пачку плагинов перебрал. Отчаиваться начал, а тут на твой блог попал.
    Все работает. Огромное спасибо. *THUMBS UP*

    • Юрий Пономаренко

      Заглядывай, может еще чего полезного найдешь =) Я представляю, как оно — сам неделю пробовал разные плагины, пока на каком-то форуме не нашел этот способ.

  3. Спасибо Юрий огромное за отличную статью, плагин находка, все написано понятно. Применила на своем сайте. Еще раз огормное спасибо! =)

  4. Спасибо за решение, но почему то если открыть форму, закрыть, а потом еще раз открыть то грузится страница в окне. Как можно исправить? vshit.ru кнопка онлайн заявка

    • Юрий Пономаренко

      В моем примере так не происходит. Не могу сказать, почему так получается у вас, но общеизвестные причины — конфликты плагинов или плагинов с темой. У вас скорее всего второе. Попробуйте то же самое, но с другим плагином FancyBox — он немного по другому себя ведет.

      • У Вас точно также! При этом кликать на картинку нужно дважды для того, чтобы добиться данного эффекта (то есть открыть, закрыть, еще раз повторить и на третий раз вылезет счетчик в левом верхнем углу вместо формы), а при клике на ссылку баг срабатывает со второго раза!

        • Юрий Пономаренко

          Да, я знаю, Ярослав. Это потому что я тему сменил, в которой своих всплывающих окон встроено полно. Не убираю эту кнопку только ради демонстрации, хотя надо бы ее заменить на скриншоты, а Fancy Box вообще отключить за ненадобностью, потому что в теме встроен Light Box (потому и такие странные эффекты, скорее всего).

  5. Спасибо большое за статью! Подскажите, пожалуйста, а можно ли сделать, чтобы при наведении на картинку мышки появлялась не только лапка, но и надпись какая-то или чтобы картинка (кнопка) меняла цвет или видно было, что нажимается.

    • Юрий Пономаренко

      Теоретически можно, но я не делал. Надпись можно сделать, если добавить текст в тег alt в 1 строке (там пусто в моем примере). А про картинку — думаю, нужно написать стили для нее, которые будут вызываться при наведении и при нажатии, там указать нужные картинки или эффекты для каждого случая.

      • Спасибо за ответ! Я правильно поняла , что надо в этом месте написать свой текст — alt=»текст»?

        • Юрий Пономаренко

          Да, именно так. Можете навести мышку на первую картинку в статье — у нее есть текст.

  6. Огромнейшее спасибо!!! Сейчас сделаю…

  7. Добрый вечер. Огромное спасибо за статью. Всё сделала как Вы и пишите тут. Но у меня не получается. точнее есть картинка, есть форма, а ничего не открывается.

    Вот страница greenworld-nn.ru/wp/1654-2/

    Вот её код
    Ляляляля жужужу

    Contact Us

    [contact-form-7 id="1653" title="Заказать звонок"]

     

    ролрлорлорлорлор

    Заказать звонок

    <? echo do_shortcode(‘[contact-form-7 id="1653" title="Заказать звонок"]‘); ?>

    [contact-form-7 id="1653" title="Заказать звонок"]

    Помогите мне пожалуйста. :( Заранее благодарю

    • Юрий Пономаренко

      Странный адрес у страницы и сама какая-то нестандартная. Фокус будет работать только на обычной странице WordPress, в нормальном шаблоне, где есть все необходимые скрипты. На страницах, созданных разными плагинами и на упрощенных темах работать не будет — проверял на шаблоне подписных страниц WP-Lead. Теоретически можно, конечно, поколдовать в header любой темы и подключить все нужные скрипты, но я так не делал.

      • Я делала тоже самое и на обычной страницу Word Press greenworld-nn.ru/1681-2/

        Вот её код

        [contact-form-7 id="1689" title="Заказать"]

        Может в самом коде я ошиблась?

        • Юрий Пономаренко

          Я не могу понять, что у вас за страницы такие странные. Код для кнопки в статье — его надо просто скопировать и вставить в нужное место. Он рабочий, взят из самой статьи, из рабочего примера. [contact-form-7 id="1689" title="Заказать"] надо подставить вместо «КОД ФОРМЫ CONTACT FORM» и все.

  8. Спасибо большое за статью, очень помогла))))) Все получилось)))

  9. Может подскажите, как лучше добавить время (формат в часах и минутах) в контактную форму.
    Обычно в конт. формах есть все: дата, сообщения, адрес и т.к., а время нет(((
    Спасибо, заранее)))

    • Юрий Пономаренко

      А зачем это надо? Смотрю письмо, которое пришло из формы связи вчера — есть время и дата, когда оно создано и получено. Получаю почту программой The Bat.

      • Необходимо, что бы клиент в форме связи указал интересующее времяю

        • Юрий Пономаренко

          Специальных полей для времени в Contact Form нет, но Вы можете сами их создать и поставить, куда надо. Там есть поля «Число», в виде обычного счетчика и в виде слайдера. Сделайте текстовую надпись наподобие «Укажите время» и поставьте два таких поля — для часов и для минут. В этих полях можно указать пределы — минимальное и максимальное значение, то есть для часов можно легко поставить 0-24, для минут 0-59. Также можно сделать эти поля обязательными для заполнения.

  10. Анастасия

    Спасибо, Вам огромное! Максимум полезной информации в компактной и понятной форме! Еще раз спасибо!!!

  11. Вот бы еще детальное описание работы с Contact Form 7. Я часто пользуюсь этой формой для вставки в блоги обратной связи. но кроме каптчи больше ничего не умею. Вот бы видеоурок на ю-тубе по работе с дополнительными полями этого плагина? Было б здоровски!

  12. Буду ждать с нетерпением! Спасибо!

  13. За совет насчет плагина ФэнсиБокс спасибо! До этого я пытался освоить плагин всплывающих картинок Simplebox. Он почему-то не пошел у меня. А Фэнси пошел сразу. Картинки в таблице сайта на вордпрессе теперь всплывают именно так, как надо.
    Правда настройки плагина все на аглицком. Пришлось разбираться со словарем.
    Но теперь все как надо! Я влюбился в этот плагин :-)

    • Юрий Пономаренко

      Это лучший плагин для таких целей. Кроме того, основная масса подобных эффектов на разных сайтов сделана с помощью скриптов Fancy, только не в виде плагинов, а подключаемых отдельно. Такая популярность о чем-то да говорит)

  14. Интересно стало. Обязательно пробью поподробнее. Спасибо Юрий!

  15. Алексей

    а можно как то к кнопке привязать это. так все получилось, спасибо, но хочется чтобы кнопка была а не картинка. спасибо!

    • Алексей

      т.е. есть вот такой код кнопки:
      заказать

      как к нему привязать ваш код не получается.

      • Юрий Пономаренко

        Не совсем понял вопрос. Я в статье показал, как прицепить всплывающее окно на картинку или просто на ссылку. Других вариантов и нету. Дальше — полет фантазии, как оформить картинку или ссылку. Если не хотите делать кнопку картинкой — сделайте ее просто ссылкой, назначьте ей всякие красивые стили и все. Тогда можно будет написать стили для состояний «обычное», «курсор наведен» и «нажатие», если захочется.

  16. Алексей

    все сделал, спасибо оч круто!

  17. Алексей

    хм, первое нажатие срабатывает нормально, второе выдает текст кода вставки формы, а после третьего нажатия вопше грузит страничку внутрь окна фансибокс((

    • Юрий Пономаренко

      Проверьте все настройки FancyBox, может быть конфликт с другими плагинами или с шаблоном, как иногда бывает. Проверьте весь код, который вставляете — вплоть до каждой запятой. Код — между html, само слово html не надо брать — оно нужно для того, чтобы в тексте код вставился. У меня такого не происходит, у многих тоже все нормально, хотя в комментариях уже писали про один такой случай.

    • Юрий Пономаренко

      Есть другая версия плагина FancyBox — «Easy FancyBox», можно его попробовать. Код один и тот-же, просто один плагин надо отключить, а другой включить. Они немного по-разному работают. Когда один глючит, в другом может быть все нормально.

  18. Вероника

    Добрый день! Спасибо огромное за вашу статью. А можно ли сделать так, чтобы всплывающая форма появлялась при нажатии на кнопку, которая формируется шорткодом темы вида [button link="http://google.com" size="medium" title="Click" target="_blank"]?

  19. Здравствуйте! Подскажите пожалуйста, а как прикрутить форму для отправки комментариев, которая уже встроена в WordPress? И чтоб, при заполнении ее, добавлялся новый комментарий в отдельную страницу… (Назовем эту страницу комментариев, а отзывы клиентов)

    • Юрий Пономаренко

      Этот вопрос сложнее, тем более в разных темах комментирование может быть устроено по разному. Это не та тема, которую можно решить в двух словах. Обратитесь к программисту.

      • а с формой, которую вы описывали, можно такой трюк провести? через эту форму добавить комментарий в штатный перечень ораторов? или она заточена только по электронке письма рассылать?

        • Юрий Пономаренко

          Да, здесь используется комбинация из плагинов FancyBox (всплывающее окно) и Contact Form 7 (отправка писем через форму обратной связи). Можно и другие совместить, но я не пробовал.

  20. Спасибо. У вас хорошо и понятно описано, сделал по инструкции — все получилось.

    Только всплывающее окно получается небольшое по размерам, форма в него не влазит, поэтому появляются полосы прокрутки. Уже сломал голову, где поменять размер всплывающего окна. Может, подскажете?

    • Юрий Пономаренко

      Размер окна сам подстраивается под содержимое. Я форму заключил в рамку, например, чуть большего размера, чем сама форма.

  21. Спасибо за подсказку с плагином easy fancybox, fancybox for wp не хотел корректно работать

  22. У меня стоит WP Lightbox 2
    Об плагина «easy fancybox» и «fancybox for wp» конфликтуют с WP Lightbox 2.

  23. В бронировании вкладке sochiluxe.net/en/about-us/ не могу не как сделать. Всё код вставил при отпраке сразу исчезает и при повторном нажатии появляется, как это исправить чтоб сразу сообщение выходило плагин использую formidable *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP* *HELP*

    • Юрий Пономаренко

      Я не пользовался этим плагином, может какой-нибудь конфликт. Окно можно сделать плагином Fancybox for WP или Easy Fancybox. Если один не работает как надо, попробуйте другой, тем более код одинаковый. Бывают конфликты с темой или другими плагинами.

  24. Добрый день!
    Очень хочу чтобы все так заработало как у вас.
    Но не получается.
    Сама контактная форма работает israel-eilat.ru/kontakt/
    А если вставляю на страницу код ничего не всплывает. Помогите, пожалуйста, разобраться.

    • Юрий Пономаренко

      Код здесь правильный, перепроверил. Плагин FancyBox проверьте, или замените его на другой такой же, в предыдущем комментарии писал, какие 2 работают одинаково. Вместо КОД ФОРМЫ CONTACT FORM надо подставлять код от Contact Form от нужной формы в скобках [ и ]. Разве что с другими плагинами конфликт или с темой еще.

      У меня работало на шаблоне, сделанном в Artisteer, на премиум-теме Avada, и вот здесь работает, но этот шаблон я сам делал, он без премудростей и чистый от всяких скриптов.

  25. спасибо за статью. все работает. правда, тоже наблюдаю эффект, когда при повторном вызове формы (без обновления страницы) — вызывается сама страница где стоит эта форма. используется FancyBox.
    пробовал Easy FancyBox — работает лучше. но дело в том что этот же плагин работает у меня для галереи. а у Easy FancyBox почемуто нет кнопок перехода к следующему изображению.
    и вот вопрос. как сделать чтобы после отправки письма из всплывающего окна — это окно само бы закрывалось. а так получается что я отправил письмо, а форма продолжает висеть. только пишет что письмо успешно отправлено.

    • Юрий Пономаренко

      Не могу сказать, как это сделать, скорее всего и не получится. Разве что сам плагин Fancybox переделать, но это уже к программистам надо.

      • Юрий, я разобрался. все очень просто! делюсь.
        Надо внести вот такую запись в поле «дополнительные настройки» в редакторе формы обратной связи плагина CF7:
        on_sent_ok: «location = ‘http://zakaji-sait.ru/’;»
        естественно, адрес страницы заменить на свой. это может быть просто главная страница, как в моем примере.
        или можно сделать специальную страницу, где написать что «ваше сообщение успешно отправлено, спасибо за интерес к нашим услугам», и предложить еще куда нибудь сходить на сайте.
        вобщем, дальше как у кого фантазия сработает)))

        • Юрий Пономаренко

          Классно, спасибо. Не знал про такую возможность, и нигде про это не попадалось. Еще раз подтверждает истину — в очевидных вещах скрыто много чего интересного. Это можно как-нибудь использовать. Должны быть и другие параметры, кроме on_sent_ok, надо разобраться в этом вопросе.

          • я даже думаю, что это не просто можно, а нужно ВСЕГДА использовать. у меня всегда вызывало недоумение как срабатывал плагин формы обратной связи после отправки письма. не было ощущения что все нормально сработало. потому что снова та же страница, та же форма, те же поля, и только небольшое сообщение что письмо отправлено.
            а редирект на страницу успешной отправки создаст ощущение завершенности процесса. да и будет не лишним перебросить посетителя еще куда нибудь на сайт, чтоб еще побродил, не уходил с сайта.
            а для варианта со всплывающим окном — это вообще необходимый функционал.

          • Вот вопрос. Я не спец в этом. Может подскажете. Вот такая организация формы обратной связи, в виде всплывающего окна — насколько защищена от спама? Мне кажется робот не сможет выполнить все действия по вызову и заполнению такой конструкции. И если это так, тогда капча вообще не нужна? Или я ошибаюсь?

            • Юрий Пономаренко

              А я думал — спец. Ссылка на сайт веб-студии ведет. Вообще, если посмотреть на исходный код страницы, то код формы все-равно есть, правда со скриптами. Лично я думаю (может и ошибаюсь), что спамерской программе будет трудно обнаружить форму под кнопкой. У меня стоят здесь эти кнопки по тексту почти год, спама пока не было. Со страницы связи, где форма стоит просто так, иногда приходят, раз в месяц, и то не спам скорее, а баловство некоторых посетителей. Капчи у меня нету пока, т.к. спамом не донимают.

              Думаю, с таким всплывающим окном капча и не понадобится, если не ставить форму связи просто так на страницу (хотя можно капчу поставить только на эту, а в окнах сделать без капчи). Надо проверять, смотреть. Точнее не могу сказать — спамеров нету =) Заменить бы простую форму на окно у кого-нибудь, кого спамеры атакуют, и сравнить.

              • Я еще не во всем разбираюсь. Но активно учусь)). Спасибо за ответ. Да, надо попробовать поставить кому такую штуку и посмотреть. Это же будет простым и элегантным решением защиты от спама безо всяких дополнительных ухищрений! Если сработает конечно…

  26. И главное читать так приятно было — с чувством «Эврика, нашёл!»
    Спасибо автору.

    Скажи пожалуйста, есть идеи как оживить кнопку?
    Чтоб она реагировала на наведение курсора.
    Цвет меняла например.

    • Юрий Пономаренко

      Спасибо. Чтобы оживить кнопку, не надо ничего придумывать. Можно просто задать ей класс и прописать ей стили для свойств hover, active и focus. Соответственно, там можно задать вид кнопки при наведении, нажатии и в обычном виде. В общем, путем CSS это все решается.

  27. Вопрос № 2:

    Если у меня не FancyBox, a SimpleLightBox (по-моему) — он сгодится или FancyBox придётся устанавливать?

    • Юрий Пономаренко

      Не могу сказать, не пробовал. Этот код точно не пригодится, потому что будет другой принцип. Если и будет работать, то способ вставки в окно чего-то кроме картинок будет совсем другой, в общем. Вообще, я других способов не нашел.

  28. очень полезная статья! огромное спасибо!) но у меня есть проблемы: не могу понять как сделать что бы картинки галереи не открывались в двух окнах. и еще: при нажатии на кнопку повнорно (второй раз без обновления страницы) в попапе выпадает скрин страницы сайта.

    • Юрий Пономаренко

      В некоторых шаблонах в коде бывают подключены разные скрипты, а когда плагин FancyBox (да и многие другие) устанавливается, он добавляет к шаблону свои скрипты эффектов, и вписывает код для их использования в код страницы. Иногда получается, что один и тот же скрипт, но в разных версиях, вызывается на одной странице. Такое вот бывает. У меня шаблон чистый, в нем не используются никакие навороты типа встроенных скриптов, потому все работает хорошо. Шаблоны, где есть разные встроенные фишки, могут конфликтовать с FancyBox и давать такие вот сюрпризы. Так же могут конфликтовать между собой разные плагины, особенно использующие скрипты — галереи, ротаторы, слайдеры и т.п. — методом последовательного отключения или включения надо проверять.

  29. Помогите, плиз, разобраться. Вроде все делаю правильно, сама форма без проблем выводится, а когда оборачиваю ее, чтобы стала всплывающей, то по клику на ссылку ничего не всплывает. Экспериментировала с разными плагинами — и просто Easy Fancy Box, и Fancy Box — сносила и опять ставила, но без толку. Может в них есть какие-то настройки, которые я не учитываю?
    Пожалуйста, помогите советом.
    Спасибо!

    • Юрий Пономаренко

      На картинках сначала проверьте. Вообще-то прямое назначение этого плагина — вывод картинок во всплывающем окне.

  30. Во-первых, спасибо, реализовал то что вы описали давно, все прекрасно работает, но…. Очень хочется несколько разных форм на странице, задолбался читать, подскажите как это сделать при помощи этих же плагинов???

    • Юрий Пономаренко

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

  31. Добрый день! все сделал как и описывалась выше, все работает хорошо, единственный минус это кнопка отображается только в правой части или в левой, как сделать что бы она была по середине?

    • Юрий Пономаренко

      Игорь, это делается стилями. Для кнопки нужно назначить отступы слева-справа и поставить ее куда надо.

  32. Добрый день! У меня все работало отлично до недавнего времени. Всплывающее окно начало открываться снизу за пределами экрана, т.е. оно есть, но его не видно. И по мере того, как я двигаю экран вниз окно позиция окна top соответственно увеличивается и двигается параллельно со мной. В чем может быть косяк?

    • Юрий Пономаренко

      Игорь, для начала я бы посмотрел в другом браузере. Если и там так же, то можно заглянуть в настройки FancyBox, там на вкладке Behaviour есть пункт с галочкой под названием Center on Scroll, его надо включить. Это как раз центрирование в середине окна браузера.

      • Спасибо за ответ. Эта галочка стоит. Убрал, сохранил. Поставил заново, сохранил, но не помогло. Сайт vprokat96.ru Окно должно появляться, когда нажимаешь в любом разделе (кроме бетономешалок, потому что заново переустановил этот плагин CF7 и все слетело, но не суть)

        • Юрий Пономаренко

          Да, посмотрел, в самом деле так. Кстати, красивый сайт, и продуман хорошо. Впервые вижу такую проблему с формой, видимо какой-то конфликт с темой. Плагин добавляет свой код в страницу, со своими скриптами, и если в шаблоне уже прописано, например, подключение таких же скриптов, но других версий, то бывают разные штуки.

          В любом случае, окно создает плагин FancyBox, он и виноват, что так получается. Попробуйте его отключить и попробовать аналогичный плагин Easy FancyBox — он делает все точно так же, как и FancyBox for WP, но когда бывают проблемы с одним, то часто выручает другой. Отличаются настройками, в этом их меньше. И проверьте еще раз код, чтобы совпадал до каждой запятой. Перед тем, как использовать окно с формой, лучше проверить, как FancyBox выводит обычную картинку (у картинки должна быть ссылка на саму себя, я там таких не нашел, все ведут на разные страницы).

  33. Спасибо за отзыв. Эту проблему я заметил недавно, т.к. занимался наполнением сайта и не придавал значения. Похоже это произошло после обновления самого WP. Как то раз он уже обновлялся сам, но вроде как именно с FB был косяк потом и я восстановил все данные на сервере до обновления. А сейчас видимо забыл и обновил снова WP. А как нибудь можно сохранить все странички (кроме как копированием кода каждой страницы в блокнот) ? Потому что если я вернусь к старому WP, то на тот момент большинство страниц созданно не было. А проблема похоже в какой то несовместимости WP 4 и FB

    • Юрий Пономаренко

      Может быть, я на версии 4 не проверял, у меня пока 3.9, на ней точно работает. А чтобы сменить WP, можно сделать все просто. База данных со статьями не затронется, поэтому можно просто удалить весь сайт, кроме папки wp-content (там все плагины и картинки) и нужных файлов — robots.txt и прочих. А потом закинуть другую версию WP, опять же, кроме папки wp-content. Потом в файле wp-config.php (или не удалять старый, он все-равно одинаковый) снова так же вписать все настройки, какие были для подключения к базе данных и все. Правда, потом придется заново включать все плагины, но настройки их в базе должны сохраниться, так что настраивать их заново не придется (но проверить это надо). Но перед такими экспериментами надо обязательно скопировать весь сайт полностью себе на компьютер — копия для восстановления лишней не будет никогда.

    • Юрий Пономаренко

      Кстати, вот блог http://super-ozernoe.ru, на новом WP 4.0, на нем плагин FancyBox for WP исправно выводит картинки в окне. Версия плагина 3.0.2.

  34. Понял, спасибо. Но попробую как то решить проблему без переустановки wp. Если получится решить — отпишусь, может кому полезно будет

  35. Юрий спасибо. Вообщем на WP4 все решается обновлением темы. Правда после этого слетают все изменения, внесенные в код и сейчас придется все мелочи заново исправлять, но зато CF7 и FB исправно работает. А вообще если сайт исправно работает — лучше ничего не обновлять!

    • Юрий Пономаренко

      Согласен, потому и не обновляю часто — приходится каждый раз смайлики в код вставлять =) И вообще, когда появляются новые версии хоть чего — от программ до процессоров, лучше немного подождать — разработчики уберут все косяки, потом и брать можно. Если делаю блог кому-то и человек в тонкостях совсем не разбирается, я ему отключаю обновления, чтобы не создавал себе головной боли. Есть желание — научится и включит, а нет — по крайней мере не сломает.

  36. Нашел истинную причину. Странно, но это действительно так. Причиной всему код Яндекс.Метрики. Если его вставлять, как рекомендуется Яндексом, как можно выше, то после этого у меня Fancybox опускал всплывающую заявку вниз. Стоит убрать код Яндекс.Метрики и заявка расположена по центру. Обращайте на это внимание!

    • Юрий Пономаренко

      Спасибо, Игорь, за полезную информацию. Так она и набирается =) Кстати, здесь в комментариях тоже был совет, как сделать, чтобы после отправки письма форма закрывалась автоматически или происходил переход на определенную страницу — может быть полезно для вашего сайта (страница «Спасибо за заявку и т.п.», например).

  37. Добрый день, проблемка с темой Kora
    Все сделал по инструкции, но увы FancyBox не срабатывает. В чем может быть проблема?

    • Юрий Пономаренко

      Я не знаю, что это за тема, их тысячи. Плагины могут конфликтовать с некоторыми, потому что в них часто встраивают уже разные скрипты. На простых точно все работает, а если есть какие-то навороты, то могут быть проблемы. Попробуйте другой FancyBox, обычно какой-то из двух нормально работает, а внешней разницы особой между ними нету. Код тоже перепроверьте — все должно совпадать до последней запятой. Я на десятке тем уже испытал — всегда работало.

  38. Здравствуйте, Юрий, большое спасибо за такую чудную статью! Форму установила кнопку «Отправить заявку» со всплывающей формой, работает нормально, но есть одно «но»: после нажатия «отправить» не выводится сообщение, что письмо отправлено, при этом адрес страницы становится вот таким — site.ru/stranica/#cntctfrm_contact_form — вот если уже на этой странице еще раз нажать на кнопку «Отправить заявку», выводится сообщение, что письмо отправлено.
    Может быть будете так любезны и подскажите, как сделать так, чтобы сообщение об отправке сразу выводилось?
    Заранее спасибо.

    • Юрий Пономаренко

      Анна, сообщение об отправке ответа выводится, но оно находится ниже. Если прокрутить окно дальше, то его можно увидеть. Можно задать размеры окна, используя CSS (или задать положение самой надписи), и тогда его будет видно всегда. Здесь в комментариях писали, что можно в настройках Contact Form указать, какую страницу открывать после отправки сообщения. Посмотрите, пожалуйста, немного выше, это интересная фишка, о которой я и сам не знал, но она есть и Вам поможет .

      • Юрий, спасибо за ответ, буду пробовать :-), еще раз спасибо за дельную статью, тоже давно мучаюсь с установкой этих форм обратной связи :-)

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

    • Юрий Пономаренко

      Здравствуйте, Ирина. Проблемы может быть три: плагин Fancy Box, плагин Contact Form или шаблон. Бывают иногда непонятные сбои, когда что-то нарушается. Если есть резервная копия, то все три этих штуки можно просто заменить на более ранние, когда все работало. Или заменять по очереди, пока виновник не определится. Еще раз проверьте код формы, не нарушился ли. Один символ если убрать, уже не будет работать.

  40. Два плагина только для одной функции. Не многовато ли? Ведь известно, что плагины тормозят загрузку.

    • Юрий Пономаренко

      Ну, эти два плагина все-равно нужны. Contact Form есть на любом уважающем себя блоге. А FancyBox должен быть у каждого просто потому, что выводит картинки во всплывающем окне. Например, я не люблю, когда кликаешь по картинке, а она загружается вместо страницы. А всплывающая форма для писем — это бонус от их сочетания. Почему бы его не использовать, если эти два плагина стоят (или один, как минимум уже есть). Да и другого способа я не нашел. Может кто-то уже и придумал что-то другое, но вряд ли это будет проще.

  41. Здравствуйте! Подскажите, пожалуйста, как с помощью этого плагина реализовать такое:

    есть страница со списком наименований продукции:
    товар1
    товар2

    товар85

    нужно рядом с наименованием товара разместить кнопку (ссылку) типа “узнать цену”, при клике на которую открывалась форма с полем “введите телефон” и кнопкой “отправить”:

    товар1 – узнать цену
    товар2 – узнать цену

    товар85 – узнать цену

    саму форму сделала с помощью этого плагина.

    Подскажите, как можно реализовать отправку “узнать цену”, не создавая миллиард форм?

    • Юрий Пономаренко

      Анна, скорее всего, не получится. Если на одной странице вызывается много разных форм, то на самом деле всегда появляется только одна — которая по странице последняя. Так что к товару1 будет показана форма от товара85. Выход можно найти в создании таблицы цен и скрипта, который будет для каждой кнопки брать цену из таблицы. Но это уже к специалистам надо.

  42. Вроде все сделал как описано, но форма обратной связи сразу рисуется на странице, а по нажатию на кнопку просто обновляется страница. Не подскажите в чем может быть проблема?

    • Юрий Пономаренко

      Проверьте код, все должно быть в точности до запятой. И вставлять его надо в редакторе в режиме «Текст», где html-код текста.

      • Уже много раз все проверил, ещё с одного блога брал код. Если бы была ошибка то вообще бы форма не выводилась, а она выводится и кнопка выводится как бы активная. Может в настройках Contact Form указывать что форма вызывается.
        Написать нам [contact-form-7 id="42" title="Контактная форма 1"]

        • Юрий Пономаренко

          Код скопируйте в точности, а вместо «Код формы» подставьте то, что в квадратных скобках (вместе со скобками). Проблема еще может быть, если в шаблоне уже встроены всплывающие окна. Бывают конфликты плагинов или шаблона с плагинами. Я не могу ничего сказать, не видя самого сайта. А угадывать можно долго, причин бывает много.

  43. Благодарю!

  44. Спасибо,все работает

  45. Спасибо за подробный «разбор полетов». Всё становится понятно.

  46. Юрий, а возможно ли «зацепить» контактную форму на УЖЕ существующую кнопку в теме?

    • Юрий Пономаренко

      Не пробовал. Теоретически можно, придется покопаться с кодом, поэкспериментировать.

      • Оперативно Вы) Благодарю))
        Да как раз этим и занят — экспериментирую с кодом, но пока безуспешно.
        Всё же «с нуля» это воплотить легче. «Интегрированные» элементы использовать сложнее((

  47. Здравствуйте, Юрий! Всплывающую форму сделала, все получилось, спасибо! Посмотрите, ссылку на сайт я вам написала в форме…Правда форму я сделала без плагина Contact Form (он почему-то работает некорректно в моем шаблоне), но не в этом суть. У меня другой вопрос. Помогите, если можете, как сделать так, чтобы если кто-то отправляет письмо со ссылкой, чтобы оно либо блокировалось, ну либо не отправлялось совсем — проще говоря, запретить письма со ссылками. Я как поставила эту форму, какой-то умник пятый день спамит, я вижу его IP в админке, но IP адрес он меняет каждый раз, когда отправляет свою рассылку, через мою форму. Блокировать его через .htaccess по IP адресу нет смысла. Помогите, может скрипт какой есть для запрета ссылок в форме?

    • Юрий Пономаренко

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

  48. Юрий, спасибо за ответ и за оценку! Я тоже поискала такие скрипты, ничего не нашла в инете, сама я не асс по html, может кто из посетителей подскажет. Буду заходить к вам на сайте, я подписалась на вашу рассылку.

  49. Виктория

    Юрий,добрый день!помогите разобраться а как прописать путь к кнопке если это не ссылка на картинку,а созданная с помощью плагина кнопка с кодом например [maxbutton id=»2″],

    • Юрий Пономаренко

      Я так не делал. Думаю, вряд ли получится, придется все-таки картинку сделать, скорее всего.

  50. Подскажите пожалуйста, с какой частью кода надо работать в style.css для изменения расположения кнопки «заказать звонок»?

    Заказать звонок

    • Юрий Пономаренко

      Сначала этому коду надо назначить класс, а потом уже ему добавить стиль в style.css. Например, в строке после href добавить class=»bzakaz». Потом идете в style.css и добавляете стиль для bzakaz, там можно указать смещение, отступы, и вообще позиционирование на странице. Код в комментариях не появляется, так что подробнее не расскажу, но суть такая — назначить класс, и этому классу назначить стиль. Ну или сразу в строке стили вписать, просто громоздко получится.

  51. Юрий, спасибо! Но все равно не получается пока. Хочу вставить «заказать звонок» под номера телефонов в шапку. Посмотрите пожалуйста, если не сложно: http://sdelaypotolokchernovik.ru.s52.hhos.ru/ a id=»myButton» href=»#contact_form_pop» class=»fancybox»>Заказать звонок</a
    myButton
    contact_form_pop
    fancybox
    прописывал параметры для каждого) ничего не происходит..

    • Все получилось, просто туплю.. еще раз спасибо!!!

      • Юрий Пономаренко

        Да, оригинальная страница)

        • )) тренируюсь пока..

          • Юрий Пономаренко

            Плагин Cyr-to-Lat надо поставить, иначе часть ссылки на статьях получается на русском.

            • Да, уже изучал этот вопрос(руки не дошли). влияет ли это на поисковое продвижение?

              • Юрий Пономаренко

                Конечно влияет. Русские буквы в ссылках заменятся на кучу каракулей, а это само по себе нехорошо. А во вторых — плагин делает ссылку из заголовка, просто проводит транслитерацию. Если в заголовке есть запрос, по которому будет продвигаться статья, то он будет и в ссылке, а это сразу намного повышает релевантность страницы запросу. То есть в ТОП выйти будет намного легче, потому как половина конкурентов всяких таких тонкостей не учитывает)

  52. Юрий, тогда обязательно установлю! Хотел искать ответ на этот вопрос, теперь все ясно. Помогли решить две проблемы, огромное Вам спасибо!!

  53. Здравствуйте, такая штуковина. Установил все как написано. При первом нажатии выплывает форма обратной связи, все прекрасно. После того как сверну форму и снова нажимаю на кнопку вот тут происходит невообразимое), всплывает окно, которое как бы копирует страницу и конечно никакой формы. После перезагрузки все по кругу. Прошу допоможения!

    • Юрий Пономаренко

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

  54. Спасибо, то есть точной ошибки нет, надо копаться?

  55. Поставил Easy FancyBox, с ним все нормуль. Вопрос. Я так понял на одной странице формы не могут сосуществовать, то есть выплывает первая по списку? Если так, нет ли какого пути заковыристого, чтобы это обойти?

  56. И на том огромное спасибо!

    • Юрий Пономаренко

      Спасибо, Олег! Комментарий заменил на скриншот, иначе код в тексте комментария превращается в обычные ссылки, и ничего не читается. Кому-нибудь пригодится, это частый вопрос)

    • Юрий Пономаренко

      Спасибо за дополнение, Кирилл, пригодится кому-нибудь. А я вот недавно обнаружил, что в моем нынешнем шаблоне это всплывающее окно уже есть. Я его пока не использовал, но могу показать пример — на сайте жены http://www.voproshayka.ru/ сбоку есть кнопка «Написать письмо». И таких окон с любым содержимым можно создавать сколько угодно, даже на одной странице.

      • Юрий, добрый день!
        Спасибо за Вашу находку — все отображается на сайте , как надо! Единственное что — не приходит письмо на мэйл, указанный в настройках ContactForm((( С чем это может быть связано?

        Также было бы здорово настроить форму, как на сайте у Вашей жены — как это можно сделать? Была бы очень благодарна!!

        • Юрий Пономаренко

          Доброго времени суток, Мария. Если письмо не отправляется, нужно смотреть настройки Contact Form, и посмотреть папку спама — вдруг оно пришло и просто туда попало. На блоге жены используется другой принцип — там стоит шаблон Avada, где встроена возможность создавать модальные окна с любым содержимым без всяких танцев с бубном).

  57. Был на сайте Вашей жены, приятно выглядит (сайт :-) ну и жена, конечно:-) )
    Я с вордпрессом так, чтобы очень плотно работать, начал месяца полтора назад. Темы, что можно поставить из предлагаемых, пока что меня пугали)) Сами понимаете, проще с нуля собрать что-то свое, чем разбираться во «вражеском коде». Сегодня буду пробовать пересобирать под себя какую-нибудь тему, все равно надо учиться.
    А блог у Вас отличный, спасибо Вам! Чувствую, я бы больше времени потратил на лайтбокс, если бы не наткнулся на Ваш сайт) С Вашего позволения, я сошлюсь на Ваш блог в своих статьях (что-то процитирую, но обязательно укажу Вас в источниках) — не против? Сам несколько статей пишу по плагинам, с которыми приходилось возиться. Свой сайт указал в информации, если интересно будет)

    • Юрий Пономаренко

      Смотрел сайт, оригинальный подход, космический такой) Ссылайтесь, конечно, это никогда не вредно. А насчет сторонних шаблонов — много я их перепробовал, все не то. Но как-то попалась мне премиум-тема Avada, года 2 назад, очень крутая была. С тех пор более удобной и гибкой не нашел. В итоге теперь она стоит и у меня, и у жены, современная версия, конечно. Если есть желание поковырять — могу дать, почти с полным переводом на русский. Из достоинств — практически полная настраиваемость страниц благодаря мощному конструктору и настройкам буквально любой мелочи. Ну и современные примочки — анимация, параллакс, полная адаптивность… Из минусов — требуется некоторое время на освоение, слишком много любопытных вещей встроено. В общем, из одного шаблона можно сделать сотни сайтов, и все будут разные. 3 вида слайдеров идут в комплекте.

  58. Добрый день! Занят был немного! Не откажусь, если не жалко)

  59. Это просто ОГОНЬ!!!!! Спасибо огромное

  60. Всё прекрасно работает. Один вопрос: мне ну вот совершенно не нужно «Написать письмо». Как подставить свою фразу?

    • Юрий Пономаренко

      Если в ссылке, то в коде смотрите первую строку — там текст этой ссылки. А если кнопка будет картинкой, то на кнопке можно хоть что написать в Фотошопе.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *