Contact form 7 дополнительные настройки

Contact form 7 дополнительные настройки

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

Введение

Данная ошибка начала возникать в последних версиях Contact Form 7 при использовании параметров on_submit и on_sent_ok на вкладке «Дополнительные настройки». Эти параметры помечены как устаревшие и будут поддерживаться только до конца 2017 года.

on_submit и on_sent_ok предназначены для модификации работы формы. Действия, заданные в параметре on_submit, будут выполнены после отправки данных формы (в том числе при возникновении ошибок валидации и т.д.), а заданные в on_sent_ok — только в случае успешной отправки.

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

Рассмотрим, что нужно предпринять, чтобы исправить ошибку.

Решение

В качестве замены разработчики плагина предлагают использовать JavaScript-события: wpcf7submit для on_submit и wpcf7mailsent для on_sent_ok.

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина 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 байт). Жмём кнопочку "Вставить тег":

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

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

Читайте также:  Что лучше ноутбук asus или acer

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

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

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр — только для подписчиков — 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/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

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

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

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

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

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

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

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

Формы создаются как произвольный тип записи — wpcf7_contact_form . Т.е. страница редактирования формы — это тип записи.

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

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

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

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

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

В верхнем поле — название формы (его видно только в админке), указываем понятное для себя название, например: "Отзыв о сайте", "Форма заявки на работу", "Форма обратной связи" и т.п.

Под заголовком — шорткод. Его используем в записях, для вывода формы.

И ниже — четыре вкладки:

  1. Шаблон формы
  2. Письмо
  3. Уведомления при отправке формы
  4. Дополнительные настройки

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

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

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

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

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

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

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

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

  1. удалить и создать с помощью конструктора новый.
  2. изучить синтаксис и исправить шорткод поля вручную.

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

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

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

text(обязательный) Тип поля: text, select, password, number и т.д. (в данном случае поле текстовое). Определяет, в какой элемент формы будет преобразован наш тег, а значит какой вид данных он будет принимать. * Звёздочка делает поле обязательным для заполнения (форма не будет отправлена и отобразиться уведомление о том, что поле надо заполнить). client-name(обязательный) Имя поля, используется как атрибут name в input, а так же используется при формировании шаблона отправляемого письма. id:my-id Атрибут id в input со значением my-id. Используется для оформления. class:my-class Атрибут class в input со значением my-class. Используется для оформления. placeholder "Введите имя" Использовать текст "Введите имя" как placeholder.

Читайте также:  Будет ли ipad mini 5

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

  • Текстовые поля: text , email , tel , url , textarea
  • Числовые поля: number , range
  • Поля с датой: date
  • Чекбоксы, радио, списки: checkbox , radio , select
  • Поле с загрузкой файла: file
  • CAPTCHA: captchac и captchar
  • Опросы: quiz
  • Поле "Принять": acceptance
  • Кнопка "Отправить": submit
  • Произвольный тип поля

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

Во второй вкладе можно тонко настроить шаблон (вёрстку) и свойства отправляемого письма. В полях данной вкладки можно использовать специальные теги полей формы — это дает возможность передавать в письме указанные в форме данные.

Теги состоят из имен полей из шаблона формы. Например, мы создали текстовое поле с именем: [text fio] . Теперь в шаблоне письма можно использовать тег [fio] . В письме вместо этого тега будет подставлено значение поля, введенное пользователем (ФИО).

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

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

От кого — имя и электронный ящик, от кого пришло письмо. Обычно тут указывается почта сервера (например admin@site.ru).

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

Тема — Заголовок письма. По нему будет понятно с какой формы были отправлены данные. К примеру, тема письма "Ошибка на сайте", "Заказ обратного звонка" и так далее. Выбираете такой заголовок, чтобы проще было работать с полученными письмами.

  • Дополнительные заголовки — По умолчанию тут прописано Reply-To: [your-email] . Заголовок Reply-To говорит нам, что на этот электронный ящик можно ответить нажав кнопку "Ответить" в почтовой программе, а тег формы [your-email] — это имя поля из шаблона. Указанный пользователем email будет вставлен вместо этого тега. Получится что-то типа Reply-To: campusboy@mail.ru .
  • Тело письма

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

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

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

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

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

    Если юзер не заполнит поле, а оно используется в теле письма, то тело письма будет неполным. К примеру в теле написано Человек с города [city] , но юзер не заполнил поле [city] , а значит в письме мы получим Человек с города . Такая строка в письме лишняя. Чтобы убрать эту строку из письма, поставьте галочку на пункте "Исключить вывод строк с пустыми тегами сообщения". Обратите внимание, что это сработает только тогда, когда текст и шоткод поля находятся в одной и той же строке.

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

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

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

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

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

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

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

    Я пользовалась сначала сервисом stepform.io, потом создала с помощью кода, без плагинов и сторонних сервисов, но стал приходить спам, думаю вернуться к stepform

    Аналогично, тоже использую его, у них и плагин норм есть https://ru.wordpress.org/plugins/stepform/ Это кстати, от русскоязычных разработчиков как оказалось, а по уровню выполнен как зарубежный

    После отправки через Contact Form 7 появляется пустая страница. Как это исправить можно?

    Ссылка на основную публикацию
    Chuwi планшеты на windows
    Планшет Chuwi Vi8 Dual Boot с двойной загрузкой: Windows 8.1 или Android 4.4. Купить >> Мы уже писали про китайский...
    Call of duty системные требования всех частей
    На странице собрана антология - все части Call of Duty по порядку. Это самая популярная и известная стрелялка на ПК...
    Call of duty по списку выхода
    На странице собрана антология - все части Call of Duty по порядку. Это самая популярная и известная стрелялка на ПК...
    Cisco оборудование для видеоконференций
    Вы можете купить системы видеоконференций Cisco CTS в магазине НЕТВОРК-МСК по выгодной цене со склада или под заказ. Cisco CTS:...
    Adblock detector