Настройка WordPress Contact Form 7

Добрый день дорогие читатели блога. Продолжаем тему форм обратной связи на WordPress. И раз реч зашла о них, предлагаю сегодня поговорить о плагине WP Contact Form 7. Далее я раскажу вам пошаговую настройку плагина, а также вкратце опишу дополнения для этого плагина.

Навигация по странице:

  1. Описание Contact Form 7
  2. Настройка WP Contact Form 7
  3. Настройка полей ввода Contact Form 7
  4. Динамические поля в CF7
  5. Настройка ответов reply-to в контакт форм 7

Описание WordPress Contact Form 7

  • к меню

    Contact Form 7 - функциональный плагин, который позволяет делать формы обратной связи разной сложности и в разном дизайне исполнения. Например, этот плагин можно легко использовать на странице поста, а можно переделать его под всплывающее окно и получить popup contact form 7. Плагин вставляется на сайт с помощью шорткода, который он сам и генерирует (что может быть проще) и имеет возможность вставки и настройки хтмл макета формы. На мой взгляд это самый легкий, в плане работы, и самый функциональный плагин для создания форм обратной связи. Настройка Contact Form 7 сводится к тому, что вам нужно скопировать свой html код, да поделать вставки правильных шорткодов на место полей ввода текста.

  • Преимущества плагина Contact Form 7:

    • простой и понятный интерфейс;
    • легко использовать людям ничего не понимающим в PHP;
    • имеет неплохой механизм проверки обязательных полей;
    • возможно подключение антиспам фильтра Akismet;
    • человек со знанием Html и CSS может сделать из формы конфетку;
    • есть возможность вставлять текст подсказку placeholder;
    • работает через штатную функцию wp_mail и может использовать сторонний smtp сервер.

  • Недостатки Contact Form 7

    За несколько лет работы с этим плагином у меня нет практически никаких нареканих на его функционал и работу. Все очень просто как для профессионала так и для непрофесионала.

    Создание форм сводится к правильной верстке и правильной установке й настройке Contact Form 7.

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

WP Contact Form 7 настройка

к менюПошаговая настройка плагина WP Contact Form 7 выглядит приблизительно вот так.

1) Скачать и установить плагин Получить ссылку на (Contact Form 7)

WP Contact Form 7 настройка

2) Активировать плагин Contact Form 7 в админке WordPress.

3) Перейти на новую созданную вкладку, как показано на рисунке:

WordPRess Contact Form 7 настройка шаг 34) Нажать вкладку "Добавить новую" и указать язык формы по умолчанию, или выбрать нужный

WP Contact Form 7 настройка шаг 45) Указываем имя контактной формы и нажимаем сохранить.

contact form 7 шаг 5

6) Теперь у нас появился шорткод, который уже можно скопировать и вставить в пост или сайдбар для того, чтобы вывести форму обратная связь WordPress - contact-form-7 id="1252" title="Форма номер 1" (надо взять в квадратные скобки как на рисунке).

Шорткод contact form 7 (shortcode)

7) Вот как то так выглядит наша форма:

contact form 7 настройка и выводКонечно не очень красиво, но никто не мешает создать свои стили или сделать свою форму и туда вносить вставки.

Как вывести Contact Form 7 в произвольное место шаблона

В п.6 пошаговой настройки я показывал вам, как можно взять шорткод кода CF7 и далее описал что этот код можно выводить в виджет или в пост, страницу. В дополнение, хочу сказать, что вы можете вывести Contact form 7 в любое произвольное место шаблона. Для этого следует вставить вот такой несложный код:

<?php echo do_shortcode("код который получили в п.6 целиком");?>

Вот и все, если вы все сделали правильно, то получите вывод Contact Form 7 в произвольное место шаблона WordPress.

 

Настройка полей ввода Contact Form 7

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

Для начала пишем произвольную HTML форму и стили к ней (для этого надо уметь верстать) или же можно одолжить у других веб ресурсов форму которая вам понравилась (но так делать не красиво).

Предположим у вас есть вот такая хтмл форма:

<div class="pp">Ваше имя<div class="inp"><input class="forminp" type="text" value=""/></div></div>
<div class="pp">Электронная почта<div class="inp"><input class="forminp" type="text" value=""/></div></div>
<div class="pp">Ваш вопрос<div class="arr"><textarea class="formtext"></textarea></div></div>
<div class="pp"><input type="submit" id="sub1" value="Отправить"/></div>

И стили к ней. Не буду их выкладывать дабы не вводить вас в заблуждение.

Открываем наш редактор формы WP CF7 закидываем наш хтмл код и на место наших блоков для ввода текста вставляем шорткоды, которые предлагает плагин.

contact-form-7-add-2
contact-form-7-add-1

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

contact-form-7-add-3

Не забываем закинуть стили в файл style.css вашей темы и проверяем работу формы:

contact form 7 результатЭто ж совсем другое дело, но еще не все. Открываем наш редактор формы и записываем все наши переменные шорткодов в шаблон сообщения:

contact form 7 настройка шаблона

Мы берем шорткоды которые в самом верху и вставляем в тело сообщения, тему и так далее. Тут мы, по желанию, можем сделать настройку сообщений, которые будут приходить к нам на почту. Обычно это понты для местных, но иногда заказчик готов платить за то, чтобы была произведена настройка отображения исходящих сообщений. Сделать это вы можете с помощью обычного ХТМЛ и стилей к нему.

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

Форму мы настроили, шорткод вставили в пост или сайдбар, или же вывели в пхп через функцию do_shortcode() - тестируем работу формы обратной связи и наслаждаемся ее работой.

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

Эксклюзивная настройка Contact Form 7 и формы ввода

к менюБывает ситуация, когда нужно вставить динамические скрытые или видимые поля, для этого можно воспользоваться плагином Contact Form 7 - Dynamic Text Extension. Это расширение функций основного плагина. Скачать его можно по ссылке: Получить ссылку на (CF7 - Dynamic Text Extension)

Благодаря ему, у вас дополнительно появятся такие боксы как:

contact form 7 настройка динамических полей

 

Настройка ответа reply-to для contact form 7

к менюВ новой версии плагина CF7 4.4 и выше, разработчик рекомендует вводить в поле from (вот оно на скине ниже)

cf7-reply-toправильный адрес, который соответствует вашему домену. Видно со скина, и эта рекомендация создает проблему:

Как сделать ответ пользователю с почтовика?

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

Решение этой проблемы есть и как всегда простое. Вам нужно в поле Additional Headers добавить код:

Reply-To: [your-email-sh]

Разумеется your-email-sh нужно заменить на свой шорткод почты. Смотрите скин ниже:

cf7-reply-to-2

Теперь, когда вам придет письмо с обратной связи вордпресс, вы сможете нажать в почтовике ответить и ваш ответ будет отправлен на правильный e-mail.

 

Если после этий действий вы столкнулись с проблемой contact form 7 не работает - стоить прочесть пост перейдя по ссылке. Там описанные основные проблемы и причины траблов в плагине Contact Form 7.

 

к менюНа этом все. Надеюсь вам стало понятно как делается настройка плагина и его макетов.

Комментарии к записи «Настройка WordPress Contact Form 7»:
  1. Alex:

    долго искал как включить и настроить скрытые поля в contact form 7. Ваш Dynamic Text реально помог. А на яваскрипте туда что угодно можно записать :).
    Заказчик попросил пересылать на почту адрес страницы с которой идет заказ услуги, а без скрытого поля тут никак.

  2. Евгений:

    А у меня FancyBox конфликтует c Autoptimize - если включить сжатие javascript - то кнопка перестает работать. А без сжатия сайт грузится долго. Может подскажете, что делать?

    • admin:

      Добрый день.
      Самое простое, что могу посоветовать, заменить фанцибокс на вот этот плагин https://help-wp.ru/responsive-lightbox-wordpress/

      Я о нем все подробно описывал, там есть настройки

  3. Серёжа:

    куда надо вставлять этот код?
    Ваше имя
    Электронная почта
    Ваш вопрос

    чтобы сделать динамическое зависимое поле

  4. Владимир:

    Подскажите, а можно сделать так, чтобы на почту пришло помимо названия товара еще и динамические атрибуты, которые выбрал пользователь, например размер, цвет и тд.?? p.s. магазин на woocommerce

    • admin:

      Можно. Для этого нужно сделать скрытое полу в contact form 7 и туда на яваскрипте по событию писать значение. У скрытого поля надо сделать ИД. Также есть динамические поля, о них описывал выше, но в них все равно надо писать или на javascript или на php.

    • Серёжа:

      А где взять ID Владимир, если узнаете напишите мне. Я тоже хочу сделать связанные динамические списки

    • admin:

      Ответил вам на почту и в разделе Вопрос/ответ

  5. Игорь:

    Подскажите, як можно создать связанные динамические списки с помощью плагина CF7
    Установил плагин Dynamic Select, Где взять Id attribute и Class attribute?

    • admin:

      Добрый день. К сожалению не сталкивался с такими проблемами на Contact Form 7, увы решения не знаю.
      Если сможете пояснить что за "Id attribute и Class attribute" вам нужны думаю смогу помочь. Или хотя бы опишите вашу задачу целиком

  6. Никита:

    Интересно а как подружить Contact Form 7 и Shortcodes Ultimate? Как вывести форму обратной связи во всплывающее окно, которое открывается кликом по кнопке на странице??? Устал уже искать...

    • admin:

      Добрый день.
      В любое место шорткод вы можите вставить вот так:

      echo do_shortcode('ваш шорткод');

      Писал ниже об этом 🙂

  7. Макс:

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

    • admin:

      За посты отвечает файл single.php за страницы page.php (но может быть и другой файл).
      Ваш вызов шорткода будет такого плана тогда

      echo do_shortcode('ваш шорткод');

      Шорткод нужно заменить на свой вариант. вставлять нужно после endif; или endwhile; только пхп не разорвите 🙂

    • Михаил:

      Я правильно понимаю, такой вывод нам нужен только когда мы в пхп коде вызываем форму Contact Form 7. В других случаях можно использовать шорткод, который генерирует ВП?
      Заранее большое спасибо.

  8. Леонид:

    Здравствуйте, нужна консультация по настройке Contact Form 7. Желательно сразу уточнить цену консультации и режим. Можно на почту.

  9. Александр:

    Можно долго рассуждать на тему плагинов, можно плеваться слюной и доказывать что плагины это вред, но на сегодняшний день, с целью экономии времени, а отсюда и денег для создания контактных форм, слайдеров и так далее лучше использовать плагины. Для форм обратной связи лучший плагин это Contact Form 7. Альтернативы ему я даже не рассматриваю уже на протяжении 3 лет. Думайте сами, решайте сами ... 🙂

  10. Пришелец:

    CF7 - это самый лучший плагин для отправки сообщений у вордпреса. Простая настройка позволяет максимально модифицировать его без правки кода. Также contact form 7 можно объединить с AntiSpam Bee, для защиты от спама. Не нужно ничего писать и выдумывать для того, чтоб спам не валил кучами вам на сайт.
    Пробуйте и наслаждайтесь (-spam-url-)

  11. Олеся:

    Как делается настройка Contact Form 7 более менее понятно, а вот на проблемах динамических полей стояло бы остановится более подробно.
    Лично у меня нельзя сделать динамических полей. Нажимаю и вижу пустую выпадашку. Подскажите как решить эту проблему. Заранее большое спасибо

    • admin:

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

    • Олеся:

      Все верно, глючил именно плагин Contact Form 7 - Dynamic Text Extension. После того как вышло обновление, пустые плашки пропали и все добавляется нормально.
      Большое вам спасибо за то что вы есть :))

Сделать заказ
Онлайн помощь по WordPress