Как сделать всплывающую контактную форму плагина 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

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

<a href="#contact_form_pop" class="fancybox">click here</a>
  <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop">
    <?php echo do_shortcode ('[contact-form-7 404 "Not Found"]'); ?>
    </div>
</div>

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

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

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

<div style="padding:15px;font-family:Verdana;">
<h5 style="color:#f24646; font-weight:bold; font-size:14px">ЗАКАЗАТЬ ЗВОНОК</h5>
<p>Имя <span style="color:#f24646">*</span><br />
    [text* your-name] </p>
<p>Телефон <span style="color:#f24646">*</span><br />
    [tel* tel-354]</p>
 
<p style="float:right!important;">[submit class=bd-button "ОТПРАВИТЬ ЗАЯВКУ"]</p>
</div>

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

.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;
}

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

Если материал вам понравился, нажмите или расскажите о нем друзьям!

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

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

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