Меню Рубрики

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

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

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7, защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины — почему не работает и не отправляет письма контактная форма .

Контактная форма является важным средством для поддержки связи со своими читателями и наоборот. Чиркнуть личное письмецо, сделать предложение автору (от которого он не сможет отказаться), задать вопрос, отправить какой нибудь файл и многое другое. Все это возьмет на себя и не разгласит посторонним ценную информацию, наша контактная форма WordPress Contact Form 7. Вот, как то, так. Написал так написал, самому аж понравилось.

О, письмо пришло! Контактная форма 7 молодец

Не буду вас утомлять, уважаемый читатель, всякой писаниной — перейдем к делу. Установка и правильная настройка модуля для Вордпресс — контактная форма 7.

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

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

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе «Плагины» нажимаем «Добавить новый». Вводим в окошко «Поиска» Contact Form 7. Естественно он отобразится первым. Кликаем кнопку «Установить:

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

Contact form 7 настройка

Находим в панели управления появившийся новый раздел «Contact Form 7» — пункт «Контактные формы». На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.

Контактная форма № 1 по умолчанию

Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:

Внешний вид: Стандартная контактная форма на сайте WordPress

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

Откроется страница «Редактировать контактную форму». Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка «Шаблон формы». Вы можете изменить шаблон формы под свои нужды.

Например, чтобы добавить в шаблон формы тег поле для загрузки файла, нужно: Отметить мышкой место для вставки тега (лучше всего после сообщения) и нажать соответствующею вкладку «файл». С помощью этой функции вы можете разрешить пользователям загружать свои файлы через вашу форму, а затем вам будет отправлено электронное письмо с вложениями файлов:

Редактировать контактную форму. Вкладка файл

Откроется окно — Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ([file-767])

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку «Вставить тег»:

Тег файл вставлен в шаблон формы

Где отметили курсором мышки там и появится дополнительный тег. Если вставился не в том месте, то просто копируете его и помещаете в нужное. Таким же способом добавьте нужные теги в вашу форму. Обязательно после добавления дополнительных тегов нажимайте синею кнопку «Сохранить». А вот так, будет выглядеть кнопка для прикрепления файла к письму, после поля сообщения:

Кнопка Выберите файл в контактной форме

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр — только для подписчиков — subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

После всех настроек и сохранения формы, скопируйте шорткод на странице Контактные формы или Редактировать контактную форму. После этого, создайте новую страницу — раздел Страницы — Добавить новую. Вписываем название страницы, например «Контакты». Переключаем редактор сообщений в режим «Текст» и вставляем шорткод в поле сообщений:

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем «Порядок» 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку «Опубликовать». Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

Читайте также:  Установки непрерывного действия для вытопки жиров

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

Получаете спам через Contact Form 7?

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

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Нажмите пункт «Интеграция». Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

Топчите Setup Integration, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

reCAPTCHA — это сервис Google

Чтобы начать использовать reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress. reCAPTCHA — это сервис Google, поэтому для его использования вам необходим аккаунт Google. Войдите в Google, используя учетную запись, и перейдите по ссылке https://www.google.com/recaptcha/admin . Вы увидите простую регистрационную форму, такую ​​как:

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы — Contact Form 7 Style

Стили для форм обратной связи 7

Плагин Contact Form 7 Style — это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка — Contact Form 7 Style Template. Настройка внешнего вида:

Готовые шаблоны для формы

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

Внешний вид формы для связи

Не забывайте, что можно задать свои, пользовательские параметры стиля:

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

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

  1. Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
  2. Убедитесь, что используется правильный обратный электронный адрес;
  3. Ваше письмо может рассматриваться как спам;
  4. Плагины или тема конфликтует с Contact Form 7;
  5. Конфликты Javascript.

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

источник

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

Плагин Contact Form 7, это один из самых популярных плагинов WordPress, для создания формы для контактов. Но многие не знают, как его правильно настроить.

И в этой статье, вы пошагово узнаете о том, как:

  • Как установить плагин Contact Form 7
  • Как сделать новую форму
  • Как вставить готовую форму контактов на сайт WordPress.

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

Что можно сделать с Contact Form 7

  • С более чем пятью миллионами установок, Contact Form 7 является одним из самых популярных в среде WordPress. С его помощью можно сделать следующее:
  • Создание и управление контактными формами
  • Легко настроить нужные поля в форме
  • Вставить контактную форму в любое место с помощь шорткода
  • Поддерживает антиспам фильтры Akismet, фильтрацию на основе технологий Ajax и CAPTCHA.
  • Большое количество сторонних расширений.
Читайте также:  Установка люка на ford focus

И все это, абсолютно бесплатно!

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

Вначале нужно установить плагин WordPress. Для этого на панели инструментов выберите в меню «Плагины» — «Добавить новый».

Затем нужно набрать в строке поиска Contact Form 7. После того, как плагин отобразится в поиске, нужно его установить и активировать.

После установки, в панели управления сайтом добавиться новое меню Contact Form 7

Настройка плагина Contact Form 7

Кликните на Contact Form 7 – Контактные формы. Откроется окно администрирования плагином. Здесь же вы увидите контактную форму, созданную по умолчанию.

Контактная форма 1 содержит все поля, которые могут понадобиться для базовой контактной формы. Эта форма готова к использованию и может быть вставлена на любую страницу или пост вашего сайта.

Кроме того, вы можете создать свою собственную контактную форму, выбрав Контактные формы – Добавить новую.

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

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

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

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

Однако вы можете добавить дополнительные поля в зависимости от потребностей вашего сайта. Для этого вы можете выбрать соответствующую кнопку генератора тегов, чтобы создать правильный тег формы. Например, чтобы добавить поле URL, вы просто нажимаете кнопку URL (как отмечено ниже).

Если вы хотите добавить метку к своему полю, вы можете скопировать HTML-код, из других полей. Например, когда я нажал на кнопку URL, Contact Form 7 сгенерировал тег [url url-344]. Затем я добавил дополнительный HTML-код для метки, поэтому итоговое поле URL будет иметь вид:

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

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

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

Это шаблон электронного письма, которое вы получите при отправке контактной формы. В поле «Кому» убедитесь, что адрес электронной почты правильный, так как именно сюда будет отправляться любая корреспонденция из контактной формы. (Contact Form 7 по умолчанию добавит адрес электронной почты, связанный с вашим сайтом).

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

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

И снова, не забудьте нажать на кнопку Сохранить.

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

Теперь вы знаете, как настроить Contact Form 7, как создать новую форму и настроить параметры почты. Остался последний шаг – вставить форму на страницу или в запись на сайте.

Выберите Контакты — Контактные формы. Затем скопируйте шорткод рядом с формой, которую вы хотите добавить на свой сайт.

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

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

Заключение

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

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

источник

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

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

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

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

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

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

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

Читайте также:  Установка локера на джетта 6

Список форм

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

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

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

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

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

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

Блок Шорткод

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

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

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

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

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

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

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

  • элементы HTML (позволяют создать произвольную HTML-структуру),
  • шорткоды плагина (добавляют элементы формы).

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

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

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

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

Тут можно использовать имена полей. Например, есть поле [text* telephone] . Если в письме вписать [telephone] , на его месте поставится номер телефона, который ввел пользователь.

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

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

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

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

Интеграция reCaptcha

В плагин уже встроена система спам-защиты от Google. Установим последнюю версию — v.3. Чтобы ее добавить, следуйте простой инструкции.

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

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

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

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

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

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

Для Капчи v.2 нужно вставить тег [recaptcha] . В последней версии нет дополнительных полей.

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

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

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

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

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

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

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

Замените 999 на ID формы, 555 — на Номер цели, а wptest_form — на идентификатор события в Метрике.

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

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

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

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

Плагин Contact Form 7 Style

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

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

  • выберите форму;
  • перейдите на вкладку Contact Form 7 Style Template;
  • используя стрелки, выберите дизайн.

Применение шаблона к выбранной форме в Contact Form 7

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

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

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

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

  • электронные письма не отправляются вообще;
  • попадают в СПАМ.
  • неправильные настройки сайта;
  • ограничения на хостинге.

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

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

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

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

2. WP Mail SMTP

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

Рассмотрим универсальный вариант — бесплатный WP-плагин, который использует внешний SMTP-сервер. Работать будем с почтовым ящиком от Gmail. На него будут приходить письма из формы.

  1. Создайте ящик на Gmail.com.
  2. Установите WP Mail SMTP.
  3. Откройте Настройки > WP Mail SMTP.
  4. Заполните поля От (email) и От имени. Настройка плагина WP Mail SMTP
  5. В опции Метод отправки почты отметьте Прочие SMTP.
  6. Заполните:

SMTP сервер — smtp.gmail.com
Шифрование — TLS
SMTP порт — 587
Авторизация — ВКЛ
Имя пользователя SMTP — контактный email
Пароль SMTP — пароль к ящику

  • Чтобы проверить работу почты, откройте вкладку Проверка почты и нажмите Отправить email. В ящике должно быть тестовое письмо. Отправка тестового письма в плагине WP Mail SMTP
  • Теперь о всех сообщениях, оставленных в форме, вы будете уведомлены.

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

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

    источник