как настроить контактную форму 7 в вордпресс

Полное руководство по Contact Form 7

Установка плагина

1. В админ-панели перейдите Плагины > Добавить новый и в строке поиска впишите название дополнения.

Установка плагина Contact Form 7 из админки WordPress

2. В найденной карточке нажмите по очереди кнопки Установить и Активировать.

Вывод на сайте

После активации в админке откройте раздел Contact Form 7.

Список форм

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

1. Кликните Страницы > Добавить новую.

Создание новой страницы на сайте WordPress

2. Укажите название (например Контакты).

3. Скопируйте шорткод.

Шорткод формы

4. Вставьте в блок Шорткод из раздела Виджеты и нажмите Опубликовать.

Блок Шорткод

В итоге пользователь увидит:

Страница с формой CF7

Как создавать формы

Перейдите Contact Form 7 > Добавить новую.

Создание контактной формы

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

В текстовой области видны поля, которые будут показаны посетителю. Их можно редактировать вручную. Для верстки доступны:

Символом «*» отмечены обязательные к заполнению поля.

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

Настройка письма

Когда заполненная пользователем форма обратной связи будет отправлена, администратор сайта получит email-уведомление. В нем указано имя посетителя, контакты и текст сообщения. Вы можете настроить формат этого уведомления. Для этого откройте вкладку Письмо.

В поле Кому вписывайте рабочий e-mail. На этот адрес будут приходить все уведомления.

Настройка уведомлений

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

Настройка уведомлений при отправке формы

Интеграция reCaptcha

1. В браузере наберите https://www.google.com/recaptcha/admin/create

2. В опции Ярлык введите произвольное название, отметьте reCAPTCHA v3, в настройке Домены укажите имя сайта, примите Условия использования и кликните Отправить.

Добавление reCAPTCHA на сайте Google

3. Скопируйте ключи.

4. В админ-панели перейдите Contact Form 7 > Интеграция и кликните Настройки интеграции.

Настройки интеграции в плагине

5. Добавьте скопированные ключи, сохраните изменения.

Установка целей метрики

В CF можно отслеживать конверсии для анализа поведенческих факторов. Рассмотрим как это сделать для Яндекс.Метрики.

1. В Метрике зайдите Настройка > Цели > Добавить цель.

Настройка цели в Яндекс-Метрике

2. Придумайте название цели, отметьте JavaScript-событие, укажите Идентификатор цели. Последний нужен для отслеживания действий.

Настройка цели в Яндекс-Метрике

3. Добавьте в файл functions.php активной Ворпресс-темы код

ID формы можно посмотреть, если открыть ее на редактирование.

Редактирование формы

Готовые шаблоны

Оформление в CF7 одинаковое для всех форм. Каждую из них можно видоизменить.

Плагин Contact Form 7 Style

Вы сможете применить к выбранной форме один из нескольких готовых шаблонов. Установка стандартная.

Чтобы задать внешний вид форме:

Решение проблем и исправление ошибок

Рассмотрим некоторые трудности, которые возникают при работе с дополнением CF7.

Не отправляются письма

Тут может быть несколько проблем:

Как исправить?

Чтобы заставить работать почту, есть несколько способов.

1. Стандартные настройки

Откройте вкладку Письмо в своей форме и в опции Кому проверьте, правильно ли указан адрес. Он должен быть рабочим.

2. WP Mail SMTP

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

Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.

3. Код

Использовать SMTP можно без плагина, с помощью кода в functions.php.

В коде нужно вписать свой email-адрес и пароль.

Источник

Делаем форму обратной связи WordPress: плагин Contact Form 7, функции в темах и самописный код

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

Форма обратной связи WordPress плагином Contact Form 7

Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:

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

Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

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

Копируем данные для капчи, оба ключа.

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

Создание формы

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

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

Появиться всплывающее окно, настраиваем по потребностям.

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

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

Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] помещаем под остальными элементами.

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

В результате получился такой код.

Настройка отправки письма

Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.

Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.

Вставка формы на сайт

Вверху страницы сформировался шорт код, копируем его.

Идем в любую запись и вставляем.

После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.

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

Сделать поля горизонтально в строчку

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

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

Всплывающая форма обратной связи

Положительно на приеме заявок действуют всплывающие окна с обратной связью от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение приложу видео из той статьи.

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

Далее перетаскиваем модуль в активную область, в параметрах блока вставляем код формы. Функция сработала и вывела на экран результат в виде формы обратной связи.

Используем настройку темы

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

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.

Обратная связь без плагина

Если предпочитаете способы без плагина, то есть отличная инструкция, нашел на просторах интернета, если хозяин кода объявится, то с удовольствием поставлю ссылку.

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали тут.

Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

В гутенберге в любой текстовый блок вставляете строку.

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

Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

Теперь загружаем вторую часть кода в function.php.

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

Такое письмо приходит на почту с обратной связи.

Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!

Источник

Contact Form 7

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

Создание и показ контактных форм

Создание форм в админке

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

Форма на картинке создана при активации плагина автоматически.

Используем форму по умолчанию, для этого создадим страницу «Связаться со мной» и вставим туда шорткод формы.

Лицевая часть сайта

А теперь сохраним статью и посмотрим, как выглядит наша форма (используется тема Twenty Sixteen):

На картинке вид формы после отправленного письма (об этом говорит извещение внизу формы).

Настройка формы (создание сложных форм)

Пример выше показывает как вставить готовую и очень простую форму контактов. А теперь давайте рассмотрим как создать форму посложнее. Для этого вернемся в админку, в менеджер форм и зайдем в редактирование формы по умолчанию.

Рассмотрим каждую вкладку отдельно.

Шаблон формы

В этой вкладке можно настроить поля и внешний вид формы. Рабочей областью является HTML редактор WP. Только вместо привычных кнопок мы видим кнопки вставки разных полей формы.

Вёрстка формы

Для верстки можно использовать html-теги и шорткоды плагина. Шорткоды добавляют поля формы, а html теги позволяют создать произвольную HTML структуру. К примеру, наша дефолтная форма выглядит так:

А при отображении в записи она превратится в такой HTML:

Синтаксис шорткодов

Давайте кликнем по кнопке «Текст». Открывается окно, где мы можем указать атрибуты текстовому полю. Указываем и жмем «Вставить тег».

Тег [text* your-name] в последствии будет преобразован в текстовое поле с html кодом:

Шорткоды можно удобно создавать через конструктор шорткодов.

Но конструктор не дает возможность изменить шорткод (там можно только создать шорткод). Изменить шорткод можно двумя способами:

С конструктором вы и сами разберетесь.

А тут мы разберем синтаксис шорткода.

Для примера рассмотрим тег текстового поля с дополнительными опциями:

Соблюдайте порядок атрибутов тега: сначала идёт тип поля, затем его имя и только потом дополнительные опции.

Типы полей

Полный список полей смотрите в отдельной статье.

Шаблон письма

Заголовки письма:

Тело письма

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

Разберем дефолтное письмо:

У нас было 4 поля, которые заполнял пользователь. После отправки письма теги превратятся в значения и мы получим такое письмо:

Существуют ещё специальные теги для шаблона письма, позволяющие сделать ваше письмо более содержательным.

Не обязательные поля в теле письма

Опция «Использовать HTML-формат письма». Позволяет использовать в теле письма HTML теги. При этом можно использовать ограниченный список HTML тегов, потому что не все почтовые клиенты или сервисы умеют правильно обрабатывать сложную HTML разметку. Можно использовать: таблицы, маркированные списки, жирность, абзацы и так далее. Подробнее ищите в сети.

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

Уведомления при отправке формы

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

Теги шаблона письма не работают в этих полях.

Дополнительные настройки

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

Об использовании данного функционала я расскажу в отдельной статье.

Источник

Как установить и настроить Contact Form 7

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

Общение имеет важное значение. Это верно при попытке построить устойчивый бизнес или сообщество, блог и практически любой тип веб-сайта, а также в жизни. Как вы можете себе представить, чтобы вы могли связаться со своей аудиторией, особенно если комментарии отключены на вашем веб-сайте, у вас должна быть контактная форма. Фактически, не имеет значения, какой тип сайта вы строите. Блог, портал, журнал, визитная карточка или что-то среднее между ними, цель веб-сайта — привлечь своих пользователей. Какой лучший способ достичь этого, чем позволить им говорить прямо с вами?

Как добавить контактную форму в WordPress

Самый простой способ добавить контактную форму на ваш сайт — это добавить плагин.

Для целей данного руководства мы будем использовать плагин Contact Form 7.

У нас нет конкретной причины выбора этого плагина. Ранее я уже описывал как добавить к себе на сайт плагин формы под названием: WPForms. Можете посмотреть в его сторону.

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

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

Но сегодня мы остановимся на плагине контактной формы — Contact Form 7. Я расскажу вам как его установить и настроить, а также добавить аддон для препятствия проникновения спама.

Что такое Contact Form 7?

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

Однако после установки этого плагина вы можете начать получать спам-сообщения в дополнение к подлинным. Вот почему эта статья также покажет вам, как установить Captcha для предотвращения спама из вашей контактной формы WordPress.

Как добавить контактную форму WordPress на свой сайт, используя Contact Form 7:

Шаг 1

На панели инструментов перейдите в раздел «Плагины», нажмите «Добавить новый».

Шаг 2

Поиск плагина Contact Form 7

Шаг 3

В разделе «Contact Form 7» нажмите «Установить сейчас» и дождитесь, пока будет установлена ​​форма контактов на ваш сайт WordPress.

Шаг 4

По завершении нажмите «Активировать плагин». Появится новый пункт меню «Контакт».

Шаг 5

Теперь давайте установим плагин CAPTCHA, нажав кнопку «Добавить».

Шаг 6

Поиск Really Simple CAPTCHA.

Шаг 7

Под именем плагина нажмите «Установить сейчас», а затем «Активировать плагин».

Шаг 8

Чтобы настроить контактную форму в WordPress, перейдите в раздел «Контакты», а затем «Контактные формы». В списке вы увидите «Форму Контакта 1» в форме по умолчанию. Чтобы настроить ее, нажмите «Изменить». Вы увидите строки кода или тегов, представляющие поля ввода для имени, адреса электронной почты, темы, тела сообщения и кнопки отправки. Это типичная контактная форма, готовая к использованию. Вы можете настроить ее, просто добавив или удалив теги. Давайте добавим новый тег для формы — CAPTCHA.

Шаг 9

Нажмите «Создать тэг». В раскрывающемся меню выберите CAPTCHA.

Шаг 10

Скопируйте две нижние строки кода и вставьте их чуть выше тега Submit вашей формы.

Шаг 11

По завершении нажмите «Сохранить».

Шаг 12

Теперь скопируйте код формы контакта.

Шаг 13

Создайте новую страницу, которая будет содержать вашу контактную форму. Вы можете назвать ее например: «Связаться с нами».

Шаг 14

Вставьте код формы в тело страницы в текстовом режиме. Нажмите «Опубликовать», чтобы просмотреть свою контактную форму.

Вот и все! Вы успешно установили контактную форму в WordPress с помощью плагина Contact Form 7.

Источник