Как сделать форму contact form 7
Добавил пользователь Alex Обновлено: 05.10.2024
Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в ВордПресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7, защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины - почему не работает и не отправляет письма контактная форма.
Не буду вас утомлять, уважаемый читатель, всякой писаниной - перейдем к делу. Установка и правильная настройка модуля для ВордПресс - контактная форма 7.
Плагин WordPress Contact Form 7
Ещё один плагин контактных форм. Простой, но гибкий.
Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.
Все манипуляции производим в админке ВордПресс. Для того, чтобы установить плагинчик, в разделе "Плагины" нажимаем "Добавить новый". Вводим в окошко "Поиска" Contact Form 7. Естественно он отобразится первым. Кликаем кнопку "Установить:
После успешной установки не забудьте его активировать. Полдела сделано. Следующий шаг, это - настройка вашей контактной формы.
Contact form 7 настройка
Находим в панели управления появившийся новый раздел "Contact Form 7" - пункт "Контактные формы". На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.
Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:
Если вы хотите просто посмотреть, проверить или изменить, то есть, добавить к ней дополнительные поля, тогда нажмите пункт "Изменить". Скрин выше.
Откроется страница "Редактировать контактную форму". Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка "Шаблон формы". Вы можете изменить шаблон формы под свои нужды.
Откроется окно - Генератор тега формы: файл:
Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, m4a, mov, mp3, mp4, mpg, wav, wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку "Вставить тег":
Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.
Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр - только для подписчиков - subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.
А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.
Размещаем контактную форму на отдельной странице сайта/блога
После всех настроек и сохранения формы, скопируйте шорткод на странице Контактные формы или Редактировать контактную форму.
Если у вас новая страница автоматически добавляется в меню, то выставляем "Порядок" 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку "Опубликовать". Всё. Готово.
Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.
Таким же методом контактную форму добавляют на боковую панель, футер или в текст статьи. Скопируйте шорткод и вставьте его в свои записи или содержимое текстового виджета. Знайте, что в любой момент форму можно отредактировать или создать новую, с разными тегами/полями.
Получаете спам через Contact Form 7?
Есть защита. Спамеры затрагивают всё, ваши контактные формы не являются исключением. Прежде чем вас заспамят, защитите ваши контактные формы с помощью мощных анти-спам функций Contact Form 7.
Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA в Контактную форму 7 вы можете заблокировать форму отправку спам-ботами.
Интеграция Google reCAPTCHA v3 в Contact Form 7: защита от спама
reCAPTCHA v3 проверяет запросы с оценкой и дает вам возможность предпринимать действия в контексте вашего сайта.
Нажмите пункт "Интеграция". Вы увидите поле под названием reCAPTCHA:
Клик Настройки интеграции, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:
Чтобы начать использовать Contact Form 7 reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress где установлена контактная форма.
После регистрации сайта вы получите ключ сайта и секретный ключ:
Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.
Внешний вид контактной формы - Contact Form 7 Style
Плагин Contact Form 7 Style - это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка - Contact Form 7 Style Template. Настройка внешнего вида:
Пример, я изменил стандартный внешний на такой симпатичный:
Не забывайте, что можно задать свои, пользовательские параметры стиля:
И в заключение:
Отправка электронных писем из контактной формы 7 работает без проблем для большинства людей. Но оказывается не для всех. Несмотря на то, что плагин успешно отправляет миллионы писем каждый день, существует множество проблем, которые могут задерживать или останавливать электронные письма, как на отправляющей, так и на принимающей стороне типичной электронной почты.
Почему не работает (не отправляет письма) Contact Form 7?
- Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
- Убедитесь, что используется правильный обратный электронный адрес;
- Ваше письмо может рассматриваться как спам;
- Плагины или тема конфликтует с Contact Form 7;
- Конфликты Javascript.
На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.
В сентябре 2013 года я рассматривал процесс создания формы обратной связи на WordPress с помощью плагина Contact Form. Но со временем пришло понимание того, что возможностей этого плагина явно не достаточно и самый большой минус — он позволяет создать лишь одну форму обратной связи.
В этой инструкции я хочу показать вам создание формы обратной связи с помощью другого плагина, более функционального и чуть более сложного, чем рассмотренный в прошлой заметке. Приступим?
Описание плагина
Кроме этого, вы можете подключить к нему плагин Akismet для защиты от спама, реализовать сбор и хранение данных в базе вашего сайта, а так же использовать мультиязычность. Это, на мой взгляд, круто! :-)
Установка плагина Contact Form 7
Настройка Contact Form 7
Тут же можно скопировать нужный шорткод для вставки на страницу или в запись:
Добавление новой формы обратной связи
Первым делом нам предлагается выбрать язык интерфейса формы, которая будет создаваться. WordPress определяет установленную версию на вашем сайте и предлагает выбрать её по умолчанию:
Но вы можете выбрать из списка любой доступный язык:
Изменяем название формы
После этого появится текстовое поле, в котором введём название с описанием:
Можно скопировать предложенный шорткод и вставить на нужную нам страницу.
Но вы можете сделать это и позже, как только настроите форму. Выбор за вами.
Изменяем шаблон формы
Вы можете менять блоки местами, просто вырезая и вставляя их код в любое место.
Например, мы можем поменять местами поле электронного адреса и имя клиента:
Как добавить новое поле в форму
При нажатии вывалится огромный список возможных дополнительных полей:
Вам останется лишь выбрать тип нужного поля и выполнять ещё ряд простых действий.
Не пугайтесь. Настройки хоть и выглядят устрашающе, но на деле очень простые :-)
Кроме этого, многие поля нашей формы имеют одинаковые настройки имени, указания ID элемента и класса CSS, через которые можно изменять внешний вид этих полей. Они присутствуют практически во всех полях:
Но за время пользования этим плагином мне ни разу не приходилось менять или устанавливать значения этих атрибутов. Скорее всего и вам не понадобится. Но рассказать и познакомить с ними я обязан :-)
Все текстовые поля в нашем конструкторе формы имеют дополнительные поля с размером самого поля и максимальной длиной значения, вот они:
Так же специфические поля, типа URL или каких-то других, отличных от обычных текстовых, имеют свои особенные настройки. Например, наше поле URL имеет дополнительную настройку:
Рассматривать абсолютно все настройки я не буду, т.к. их слишком много и они специфические для каждого типа поля. Ну, а если вдруг вам всё-таки понадобится эта информация, тогда напишите об этом в комментариях к этой заметке и я подготовлю дополнительный обзор настроек.
Теперь нам нужно добавить код этого поля в форму шаблона формы.
Для этого необходимо скопировать предложенный код и вставить его в форму слева:
Например, я хочу разместить поле с адресом сайта после имени клиента. Мне необходимо будет ввести код по аналогии с другими полями, то есть добавить абзац, перенос строки и вставить шорткод этого нового поля:
Ну и для того, чтобы значение этого поля пришло нам на электронный адрес, вот это значение нужно скопировать:
По аналогии добавляются и другие поля. Всё просто и понятно :-)
Адресат и шаблон письма
Ну и дальше вам останется лишь привести в порядок шаблон самого письма:
Известные проблемы
Не увидели? А я покажу поближе:
Тут есть два варианта решения. Первое — добавить соответствующие стили в файл style.css вашей темы, либо изменить в шаблоне формы тип url на text, тогда всё будет нормально:
Заключение
Я думаю обзор способов создания форм обратной связи можно считать полностью закрытым, а саму тему рассмотренной вдоль и поперёк.
Конечно, обязательно появится кто-то, у кого либо что-то не получится, либо захочется предложить к рассмотрению какой-то другой, аналогичный плагин. Я всегда рад вопросам и предложениям! Не стесняйтесь задавать их в комментариях :-)
Сегодня мы поговорим о плагинах контактных форм для вашего сайта на WordPress. А именно — я расскажу вам о таком простом, но очень гибком и нужном плагине — Contact Form 7.
Общение имеет важное значение. Это верно при попытке построить устойчивый бизнес или сообщество, блог и практически любой тип веб-сайта, а также в жизни. Как вы можете себе представить, чтобы вы могли связаться со своей аудиторией, особенно если комментарии отключены на вашем веб-сайте, у вас должна быть контактная форма. Фактически, не имеет значения, какой тип сайта вы строите. Блог, портал, журнал, визитная карточка или что-то среднее между ними, цель веб-сайта — привлечь своих пользователей. Какой лучший способ достичь этого, чем позволить им говорить прямо с вами?
Как добавить контактную форму в WordPress
Самый простой способ добавить контактную форму на ваш сайт — это добавить плагин.
Для целей данного руководства мы будем использовать плагин Contact Form 7.
У нас нет конкретной причины выбора этого плагина. Ранее я уже описывал как добавить к себе на сайт плагин формы под названием: WPForms. Можете посмотреть в его сторону.
Вы можете и не использовать Contact Form 7 при добавлении формы контакта на свой собственный сайт. Существует множество плагинов, предназначенных для создания форм. Процесс добавления для большинства из них практически одинаковый.
Существует множество плагинов, предназначенных для создания контактной формы. И процесс добавления для большинства из них почти одинаковый.
Но сегодня мы остановимся на плагине контактной формы — Contact Form 7. Я расскажу вам как его установить и настроить, а также добавить аддон для препятствия проникновения спама.
Что такое Contact Form 7?
Contact Form 7 является предпочтительным плагином, чтобы посетители вашего сайта могли связаться с вами по электронной почте. Этот плагин для контактной формы WordPress очень прост в установке и использовании и таким образом, является одним из самых популярных.
Как добавить контактную форму WordPress на свой сайт, используя Contact Form 7:
Шаг 1
Шаг 2
Поиск плагина Contact Form 7
Шаг 3
Шаг 4
Шаг 5
Шаг 6
Поиск Really Simple CAPTCHA.
Шаг 7
Шаг 8
Шаг 9
Шаг 10
Скопируйте две нижние строки кода и вставьте их чуть выше тега Submit вашей формы.
Шаг 11
Шаг 12
Теперь скопируйте код формы контакта.
Шаг 13
Шаг 14
Вот и все! Вы успешно установили контактную форму в WordPress с помощью плагина Contact Form 7.
До скорых встреч!
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
Приветствую вас, друзья. Сегодняшний урок поможет вашему wordpress сайту обзавестись симпатичной и функциональной формой обратной связи. Сделаем мы ее с помощью плагина Contact Form 7. В свое время я потратил немало времени на поиски нормальной контактной формы и достойной альтернативы данному плагину так и не нашел.
Содержание:
Возможности плагина
Еще раз напомню, что мы будем работать с плагином, поэтому, если вам нужна обратная связь без плагина, вам лучше посетить статью про html форму обратной связи, там настройка чуть посложнее, но, зато, вариант более универсальный (подойдет каждому сайту) и меньше нагружает сервера.
Одним словом, плагин мегафункциональный.
В-третьих, использование контактной формы позволяет скрыть ваш адрес электронной почты и, тем самым, избавиться от возможного спама, который неизбежно появляется при попадании электронного ящика в свободный доступ.
В-четвертых, это просто стильно и современно.
Установка и настройка плагина Contact form 7
Настройка плагина Contact form 7
Настройка плагина состоит из двух этапов.
Первый – это настройка конкретной формы. Разных форм может быть много, каждая из них может содержать свой набор полей. Одним словом, под каждую задачу и каждую страницу на сайте вы можете отдельно создать форму обратной связи, wordpress это позволяет – их список будет храниться в базе плагина.
Второй этап – это вставка формы на страницы сайта. Каждая форма, созданная нами внутри плагина, будет иметь собственный уникальный шорткод. Для вставки на страницу достаточно будет вставить только его.
Настройка формы разделена на отдельные блоки. Рассматривать их я буду по порядку.
Расположение полей можно настраивать с помощью обычной html разметки.
Что касается настройки самих полей, то вы можете удалить ненужные и добавить те, которые вам потребуются. Если вы не хотите, чтобы тему письма вносили вручную – просто удалите соответствующий блок.
Добавляются поля тоже очень просто. С правой стороны есть кнопка сгенерировать тег, нажав на нее, вы увидите список всех возможных полей, которые поддерживает этот плагин.
Выберите нужный элемент и настройте его параметры. Плагин на русском, поэтому все настройки интуитивно понятны.
Первый чекбокс указывает на обязательность или необязательность поля (он добавляет звездочку).
После настройки поля у вас появятся 2 шорткода:
Таким образом вы можете добавить в форму любое количество полей, чекбоксов, выпадающих списков, элементов для прикрепления файлов и т.д.
Теперь наша задача настроить письмо, которое мы будем получать. Письмо никак не влияет на работоспособность формы обратной связи, оно служит только для передачи той информации, которую ввели в форме.
Наша задача включить в письмо всю информацию.
В конце указывается сайт, с которого отправлено письмо.
Любую текстовую информацию этого блока (кроме тегов) можно менять по своему вкусу. Также вы можете добавить любые описания и менять теги местами, расставляя их в том порядке, который вам удобен.
Настраивается этот блок аналогично предыдущему. По умолчанию все поля в нем заполнены для того, чтобы письмо ушло тому человеку, который заполнял форму (видимо, чтобы он не забыл).
Вы можете настроить отправку копии, например, своему менеджеру или бухгалтеру.
Активация формы
Плагин поместит созданную вами форму в список действующих и присвоит ей специальный код примерно такого вида:
Вставив этот код в любое место на вашем сайте, вы получите готовую форму для общения с вашими потенциальными клиентами.
Борьба со спамом – Akismet и Captcha
Спамеры доставляют немало хлопот владельцам сайтов, а каждая новая форма, позволяющая что-то писать, только добавляет количество спам ботов.
Избавиться от спамеров можно двумя способами:
- Поставить обязательную капчу (это можно сделать дополнительным плагином – Really Simple CAPTCHA).
- Воспользоваться антиспамерским плагином для wordpress – Akismet.
Первый вариант неудобен тем, что заставляет посетителей вручную вводить дополнительные символы. Это не так сложно, но некоторым не нравится.
Кроме того, akismet стоит на большинстве wordpress сайтов для защиты от спама в комментариях к статьям. Значит, при его использовании не потребуется устанавливать дополнительные плагины и создавать лишнюю нагрузку на сайт.
Защита от спама с помощью Akismet
1. Устанавливаем плагин Akismet на ваш сайт и активируем его – инструкция здесь.
2. Добавляем в теги контактной формы дополнительные данные:
- в поле с именем автора дописываем akismet:author
- в поле с email отправителя письма akismet:author_email
- в поле для адреса сайта akismet:author_url
Должно получиться вот так:
Защита от спама с помощью Really Simple CAPTCHA
Открываем для редактирования нужную контактную форму
В списке тегов выбираем Captcha. В настройках тегов можно выбрать размер картинки с символами, в остальном ничего менять не стоит. В нижней части настроечного окна появятся 2 тега, один отвечает за вывод картинки, второй выводит поле для ввода данных с этой картинки.
Чтобы капча начала работать, необходимо скопировать и вставить оба этих тега в левое окно шаблона формы, после чего сохранить изменения.
Размещение формы обратной связи во всплывающем окне
Не всегда контактная форма должна располагаться в каком-то определенном разделе сайте, порой, клиент должен иметь возможность получить к ней доступ с каждой страницы ресурса.
В таких случаях размещать полноценную форму не всегда удобно. Гораздо проще поместить на видное место кнопку, привлекающую внимание. Нажатие этой кнопку уже должно вести к открытию формы.
Делается это с помощью еще одного плагина – Easy FancyBox.
1. Установка плагина
В этой вкладке нужно найти перечень типов контента, который должен отображаться во всплывающем окне. По умолчанию стоит только Images, нужно добавить Inline content.
На этом настройка плагина закончена, переходим к настройке кнопки обратной связи.
2. Вставляем код на сайт
В принципе, можно использовать обычную текстовую ссылку, но кнопка-картинка будет выглядеть лучше.
На вашем сайте, там где вы хотите вывести кнопку для формы связи (в шапке, подвале или сайдбаре) вставьте следующий код:
В коде вам необходимо указать адрес картинки, которую вы используете в качестве кнопки обратной связи, и отредактировать шорткод самой формы – прописать ваш id и title.
3. Снимаем ограничение на шорткоды в сайдбаре
Этот пункт необходим, если вы хотите установить кнопку в сайдбаре. Не всегда сайдбар в вордпрессе позволяет выполнять шорткоды.
Он даст возможность выполнять все шорткоды в сайдбаре.
У меня получилась вот такая симпатичная всплывающая форма:
Несколько разных всплывающих форм на одной странице
Иногда возникает необходимость разместить на сайте несколько форм с разными настройками и полями.
Например, одна кнопка у вас ведет на форму с именем и телефоном и служит для заказа обратного звонка с сайта, а вторая должна открывать другую форм где идет подробная заявка на заказ (с адресом, полем для описания, возможностью прикрепить файл и т.д.). В самом плагине Contact Form 7 вы можете сделать бесконечное количество вариантов форм, но как их впихнуть в разные кнопки одной страницы?
Для этого необходимо корректировать код кнопки из предыдущего пункта. Первая кнопка использует представленный выше вариант. Во второй меняются два значения:
Для второй формы получится такой код:
Таким образом вы можете выставить много разных кнопок с формами на любой странице ресурса и они не будут конфликтовать.
На этом сегодняшний урок закончен, теперь вы без труда можете наладить обратную связь с вашими клиентами с помощью функциональных и красивых контактных форм.
Читайте также: