Главная - Без рубрики - Как сделать всплывающую контактную форму плагина Contact Form 7

Как сделать всплывающую контактную форму плагина Contact Form 7

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

Плагин WordPress Contact Form 7

На официальном сайте WordPress число скачиваний этого плагина на сегодня — более 38 миллионов. Рейтинг 4,5 из 5 говорит о высокой популярности плагина среди пользователей WordPress сайтов и высокой эффективности этого плагина. Он довольно простой в использовании, легко устанавливается в любом месте (страница, запись, виджет) с помощью короткого кода (shortcode) и отлично работает в сочетании с разными другими плагинами, практически не глючит (за редкими исключениями из-за разных особенностей настроек сервера на хостинге).

К минусам этого плагина можно отнести немного не удобный интерфейс настроек контактной формы. Многие новички, не знакомые с тегами HTML и CSS сразу начинают пугаться наличию тегов в окне редактора формы, которую необходимо настроить.

Плагин давно переведен на русский язык и часто обновляется автором (Takayuki Miyoshi).

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

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

Что можно еще назвать минусом этого плагина, так это невозможность сделать контактную форму в всплывающем окне, т.к. плагин не имеет специального скрипта jQuery, который делает попап-окно. Но этот недостаток можно решить.

Плагин WordPress Easy Fansybox

easy-fancybox-wordpress-plugin
C помощью плагина Easy Fancybox можно легко создать всплывающую форму для любой ссылки HTML, iFrame и Видео. Все правила и примеры добавления кода для вывода попап-окна описаны на странице обзора плагина в официальном каталоге WordPress — https://wordpress.org/plugins/easy-fancybox/faq/

Я вам сегодня расскажу об одном из вариантов работы этого плагина с плагином контактной формы Contact Form 7, а именно — как вывести контактную форму, созданную с помощью плагина WordPress Contact Form 7 и плагина Easy Fancybox.

Пример такого всплывающего окна вы можете посмотреть  на моем тестовом поддомене, где я выложил временно свою авторскую работу одного клиента. В шапке справа — кнопка «Написать письмо» и рядом слева — ссылка «Заказать звонок».

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

contact-form-7

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

[slh lang=»php»] click here

[/slh]

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

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

Частично, я использовал теги HTML прямо в редакторе создания формы. Вот пример такой формы:

[slh lang=»php»]
ЗАКАЗАТЬ ЗВОНОК

Имя *
[text* your-name]

Телефон *
[tel* tel-354]

 

[submit class=bd-button «ОТПРАВИТЬ ЗАЯВКУ»]

[/slh]

Что касается кнопки отправки заявки — я использовал встроенные стили, которые хранятся в плагине Contact Form 7, но перенес их в файл стилей активной темы и сделал их более главными перед стилями плагина. Даже в случае обновления плагина, стили останутся без изменений:

[slh lang=»css»] .wpcf7-submit {
border: 0px;
color: #ffffff;
background-color: #f24646;
vertical-align: middle;
display: inline-block;
text-align: center;
margin-right: 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 7px;
padding-left: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
line-height: 20px;
background-image: none;
}
.wpcf7-submit:hover {
background-color: #be3838;
}
[/slh]

Если есть ко мне вопросы — спросите в комментариях.

О admin

1 комментарий

  1. Владимир

    Добрый день. При создании главной страницы,в выбраной теме уже есть встроенные кнопки, которые содержат два атрибута: описание и ссылка. Как на такие кнопки настроить всплывающею форму?

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*