Главная › Новости

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

Опубликовано: 02.09.2018

Быстрый способ сделать форму обратной связи в выезжающем окне. Плагин WP Contact Slider

Здравствуйте, уважаемые читатели моего блога. Целый месяц я занимался другим сайтом, а на блоге только отвечал на комментарии. Но этот месяц не прошел зря – за это время я узнал много нового – научился устанавливать и настраивать премиум-темы, близко познакомился с 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 и вставляем там такой код:

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

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

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

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

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

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