Всплывающая форма на WordPress

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

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

Пример.

kontaktnaya-forma

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

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

Всплывающую форму на сайте можно использовать для различных целей. Например, в интернет-магазине на кнопку с надписью «Купить» можно повесить форму, в которой посетитель будет заполнять свои платёжные реквизиты. На кнопку «Регистрация» можно поставить форму регистрации, или форму для авторизации пользователя на соответствующей кнопке.

Как сделать всплывающую форму на WordPress

И вот, самая, наверное, интересная часть о том, как это всё воплотить на Word Press. Как и всегда, делается всё с помощью плагинов. Воспользоваться следует двумя.

Для начала берём, устанавливаем и активируем Contact Form. Мы уже говорили об этом дополнении для Word Press, оно представляет собой конструктор форм. С его помощью можно сделать не только форму контакта, но и любую другую.

Второй плагин, который понадобится – FancyBox. Это дополнение используется для того, чтобы во всплывающем окне выводить картинки. Но, как оказывается на практике, он отлично выводит не только изображения, но и любой другой контент, в том числе и текст, и html код.

Для того, чтобы всатавить анкор вызова всплывающей контактной формы, необходимо во вкладке 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>

Это, как, было сказано, даст анкор-ссылку на вывод формы. А чтобы вывод происходил через красивую кнопку, необходимо сделать так:

<a class="fancybox" href="#contact_form_pop"><img src="адрес вашей картинки" alt="« /></a>

<div class=»fancybox-hidden" style="display: none;">

<div id="contact_form_pop"> Код, который выдал плагин Contact Form для вашей формы </div>

</div>

Кнопка-картинка должна быть предварительно загружена в медиафайлы административной панели.

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

Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (Оцените статью)
Загрузка...

Также по этой теме:

16 комментариев

Оставить комментарий
  1. Очень много полезного и необходимого. Отличный, уникальный курс.

  2. Здравствуйте!

    У меня была такая ситуация, когда я составлял объявления для контекстной рекламы в Яндексе: мои объявления не проходили модерацию, тогда я обратился в тех поддержку Яндекс.Директа и там мне дали ссылки на новые правила подачи объявлений.

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

    1. Адель Гадельшин

      Об этом я рассказываю в продвинутом тренинге.

  3. Интересная статья ! Как это всё воплотить на своём сайте?

    1. Адель Гадельшин

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

  4. Всё доступно, легко и ясно! Спасибо большое Адель!

  5. Да, согласна. Адель, огромное Вам спасибо за столь «разжеванные» материалы. Вы все материалы даете очень доступно и подробно.

  6. Прошла курс по созданию сайта, 3-х дневный.

    Было очень познавательно и интересно.

    Автор подошёл к созданию курса со всей тщательностью.

    Так что его можно осваивать любому человеку. даже с самыми минимальными компьютерными знаниями.

  7. Спасибо Адель за такой курс все подробно описано.

  8. Очень нужная информация, предельно понятно и доступно изложенная. Спасибо! Обязательно воспользуюсь.

  9. Инна Дунаева

    Разжевал и положил в рот. Спасибо , Адель.

  10. Обязательно попробую сделать окно при выходе со своего нового сайта. Считаю, что такое всплывающее окно более эффективно и никому не мешает. Зато может задержать посетителя сайта на несколько минут, и возможно он еще не раз вернется на сайт, если получит действительно полезную информацию!

  11. Беру на заметку, надо использовать это на практике.

  12. Александр

    Много полезного и интересного. Приходится сожалеть, что ранее невозможно было получить такое интересное образование! Так быстро изменятся жизнь, что просто не успеваешь получать новые знания.

  13. Да, Адель, Вы были правы — чем глубже закапываешься, тем интересней. Голова пухнет — ведь догонять приходится.

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

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

Как создать блог. Видео Уроки WordPress © 2017