Contact Form 7 — лучший (и бесплатный) плагин WordPress

Приветствую, друзья!

Contact Form 7 — чрезвычайно популярный плагин для WordPress с невероятным количеством активных установок более 5 миллионов.

На переполненном рынке контактных форм Contact Form 7 явно делает что-то правильно!

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

Хотя многие плагины для контактных форм предлагают бесплатную версию, они, как правило, придерживаются стратегии «freemium», при которой базовый плагин бесплатен, но за дополнительные функции приходится платить.

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

Действительно необычно!

Хотя он бесплатен, его настройка может быть немного сложной, и, если вы используете его впервые, элементы процесса настройки, скорее всего, покажутся вам немного запутанными.

Именно здесь мы готовы помочь с этим полным руководством для начинающих по Contact Form 7.

Давайте начнем с Contact Form 7!

Перво-наперво… нам нужно установить плагин Contact Form 7.

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

Для тех из вас, кто менее знаком, давайте посмотрим, как это сделать.

Войдите в систему администратора WordPress, а затем перейдите на вкладку «Плагины» в левой части страницы.

Нажмите на нее, и вы попадете в репозиторий плагинов WordPress.

Отсюда вы можете искать и устанавливать тысячи различных плагинов (хотя, пожалуйста, не добавляйте тысячи плагинов на свой веб-сайт WordPress)… обычно рекомендуется не более десяти!).

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

Скорее всего, если вам нужна определенная функция на вашем веб-сайте, есть плагин, который сделает это за вас!

Используйте строку поиска «Поиск плагинов» в правом верхнем углу и введите «Contact Form 7».

Он сразу же появится на экране.

Нажмите «Установить сейчас», и он загрузится.

Затем нажмите «Активировать», и все будет готово.

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

Теперь, когда плагин Contact Form 7 установлен и активирован, вы увидите новую вкладку «Contact Form 7» слева в панели администратора WordPress.

Щелкните по ней, и вы загрузите интерфейс Contact Form 7.

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

Нажмите на нее, и теперь вы увидите панель управления этой контактной формой.

В разумных пределах (мы не знаем о каких-либо жестких ограничениях) вы можете создавать столько контактных форм, сколько вам нужно.

Эти контактные формы могут быть настроены по-разному.

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

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

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

Давайте приступим к работе с контактной формой по умолчанию.

Вкладка формы в Contact Form 7

Вкладка «Форма» предназначена для выполнения большей части настроек вашей формы.

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

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

Форма по умолчанию называется «Контактная форма 1».

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

Давайте перейдем к «Основной контактной форме» для нашего примера.

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

Основные поля формы в Contact Form 7

Первое поле формы по умолчанию на вкладке Формы будет выглядеть следующим образом:

Каждое поле начинается с <label> и заканчивается </label>.

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

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

Начальным элементом поля формы является название поля.

В этом примере это ваше имя.

Таким образом, в поле будет запрошено имя контакта. Легко!

Вы можете написать здесь все, что хотите (например, имя и фамилию).

Вы заметите, что после этого текста добавлено «(обязательно (required))».

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

Через секунду мы покажем вам, как это сделать.

Под надписью поля вы увидите следующее:

Теперь мы переходим к элементу формы, который управляет отправкой информации через форму.

Начальная формулировка «text» указывает на то, что это текстовое поле, состоящее из одной строки.

Звездочка после этого указывает на то, что поле для Contact Form 7 является обязательным (это не позволит вам отправить форму, не заполнив это поле).

После этого у нас будет «your-name».

Это тег формы и уникальный идентификатор поля формы.

Вскоре это станет более понятным!

Весь этот элемент заключен в квадратные скобки, а затем поле формы заканчивается </label>

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

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

Один и тот же метод применяется ко всем полям формы в Contact Form 7, но с разными метками.

Читайте дальше, чтобы узнать больше!

Добавление новых полей в Contact Form 7

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

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

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

Давайте теперь установим это как «Номер учетной записи» и сделаем его обязательным полем.

• Начнем с <label></label>;
• Давайте добавим название поля: <label> Регистрационный номер учетной записи </label>;
• Теперь мы добавим тег формы. Для этого нажмите на тег с номером. Откроется всплывающее окно, в котором вам нужно заполнить несколько новых полей. Здесь вы можете использовать значения по умолчанию. Выберите «Диапазон», а затем, если хотите, введите значение по умолчанию, а также минимальное и максимальное число, которое можно ввести. Итак, если у вас 4-значные номера счетов, введите 1000 в качестве минимального номера и 9999 в качестве максимального. Нажмите на синюю кнопку «Вставить тег», чтобы вставить этот новый тег формы в вашу форму;
• Вы, наверное, заметили, что во всплывающем окне установлен флажок «Обязательное поле» (This is a required field). Все говорит само за себя … но если вы забыли поставить галочку, вы можете легко сделать поле обязательным, добавив звездочку, как показано на записи экрана ниже;
• Нажмите «Сохранить», чтобы сохранить свою форму. Теперь вы настроили Contact Form 7!
• Подумайте и повторите для стольких полей, сколько потребуется. Посмотрите запись ниже для примера:

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

Contact Form 7 содержит большое разнообразие тегов форм, и их можно настраивать множеством способов.

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

Скорее всего, если вы хотите чего-то добиться с помощью Contact Form 7, обычно есть способ!

Вкладка «Письмо»

Теперь, когда ваша форма создана, мы можем перейти к настройке отправки ответов.

Перейдите на вкладку «Письмо», и вы увидите то, что немного похоже на редактор электронной почты.

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

Давайте пройдемся по полям:

Кому

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

От кого

Это поле состоит из двух компонентов.

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

Для этого мы добавим тег с именем.

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

[your-name]

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

Итак, если домен вашего веб-сайта равен «example.com», вам действительно понадобится электронное письмо типа «yourname@example.com», чтобы перейти сюда.

В итоге вы получите что-то вроде этого (используя свой адрес электронной почты):

Тема

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

Дополнительные заголовки

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

По умолчанию (и наиболее полезный) используется:

Помните, в поле «От кого» мы использовали наш адрес электронной почты?

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

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

Тело письма

Шаблон текста сообщения по умолчанию выглядит следующим образом:

Вы можете настроить макет этого шаблона сообщения по своему усмотрению, гарантируя при этом целостность тегов формы.

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

Вы заметите, что в шаблоне сообщения выше это поле не упоминается.

Нам нужно добавить его.

Для этого вернитесь на вкладку Формы и скопируйте созданное вами новое поле.

Вставьте его в шаблон сообщения, чтобы оно выглядело следующим образом:

ЕДИНСТВЕННОЕ, что вам нужно сохранить — это сам тег формы, который я выделил курсивом.

Остальное вы можете удалить.

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

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

И все!

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

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

Смотрите ниже, как это будет выглядеть:

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

Это может произойти, если вы создаете свой веб-сайт на промежуточном сервере или (как в данном случае) если указан неправильный адрес электронной почты для домена!

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

Хорошо, теперь вы можете немного перевести дух.

Мы проделали основную часть тяжелой работы.

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

Нам осталось сделать еще несколько деталей, но теперь это становится увлекательным!

Вкладка «Уведомления при отправке формы» — это быстрый способ выиграть.

Откройте ее, и вы увидите множество сообщений по умолчанию.

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

Вы можете настроить их по своему усмотрению.

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

Дублирование Contact Form 7

Отличный способ научиться использовать Contact Form 7 — просто попробовать!

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

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

Чтобы дублировать форму, вам нужно установить новый плагин.

Вернитесь на страницу плагина из вашей админ-панели WordPress и нажмите «Добавить новый».

Найдите «Duplicate Post» и установите его.

Активируйте, а затем вернитесь на вкладку Contact Form 7.

Загрузите форму, которую вы хотите скопировать, и в правом верхнем углу формы (над сохранением) вы увидите кнопку с надписью «Дублировать».

Нажмите на нее, и вы получите идеальную копию вашей формы.

Она идеально подходит для тестирования функций или может сэкономить часы работы, когда вам нужна новая форма для вашего веб-сайта, но вы не можете найти в себе сил начинать с нуля!

Добавление формы Contact Form 7 на веб-страницу

Итак, вы сделали это!

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

К счастью, это очень просто.

Чтобы начать, перейдите на главную вкладку Contact Form 7 (нажмите «Contact Form 7» в панели администратора).

Затем вы увидите список ваших форм.

Здесь пригодится присвоение им имен, и если вы не уверены, что это за форма, сейчас самое время открыть их и дать им подходящие названия.

Рядом с названием вы увидите шорткод.

Шорткоды — это простой способ вставить функцию на страницу или публикацию WordPress.

Нам нужно скопировать этот шорткод, нажав на него.

Он станет синим, и вы сможете скопировать его (CTRL + C на ПК).

Теперь откройте страницу, на которой вы хотите разместить свою контактную форму.

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

Вставьте ранее скопированный шорткод Contact Form 7 в поле виджета и обновите страницу.

Вот и все!

Теперь отобразится ваша Contact Form 7. Загрузите страницу и ознакомьтесь.

Теперь перейдем к действительно захватывающей части … тестированию вашей формы!

Заполните ее и нажмите «Отправить»!

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

Настройка Google reCAPTCHA

Спам-боты повсюду, и они ищут формы, похожие на ваши.

Зачем они это делают, никто не знает, но вы практически гарантированно получите кучу писем, которые вам совсем не нужны, если не настраивать reCAPTCHA.

Если вы мне не верите, то смело пропустите этот шаг…

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

Что такое reCAPTCHA?

Это бесплатный сервис от Google, который помогает защитить сайты от спама.

Вы наверняка уже видели флажок «Отметьте это поле, чтобы подтвердить, что вы не робот» в формах? Ну, это reCAPTCHA.

Сейчас все сильно продвинулось, и Google представила V3 своей reCAPTCHA, которая даже не требует от пользователя ставить галочку, что делает ее очень удобной для пользователя.

Все, что вам нужно сделать, это настроить ее.

К счастью, Contact Form 7 позволяет сделать это очень просто.

Для начала перейдите по ссылке https://www.google.com/recaptcha/intro/v3.html

Нажмите на синюю кнопку «Консоль администратора» в правом верхнем углу и войдите в Google (вам потребуется настроить бесплатную учетную запись Google, если у вас ее еще нет).

После входа в систему нажмите на значок «+» в правом верхнем углу и затем заполните форму.

В разделе «Ярлык» просто используйте название вашего веб-сайта, а затем, что важно, выберите v3 в reCAPTCHA (v2 не будет работать с Contact Form 7).

Точно добавьте домен вашего веб-сайта (или это снова не сработает), а затем примите условия и отправьте заявку.

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

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

Щелкните ее, а затем нажмите «Настроить интеграцию».

Скопируйте ключ сайта и секретный ключ из Google и вставьте их, а затем сохраните изменения.

Вот и все!

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

Итак, все! Ваш мастер-класс по Contact Form 7 завершен

Хотя мы постарались как можно подробнее объяснить, как пользоваться Contact Form 7, не забудьте посетить их веб-сайт по адресу www.contactform7.com для получения дополнительной информации и ресурсов.

Мы надеемся, что вы найдете информацию в этой статье полезной.

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