Как добавить форму на сайт WordPress за 20 минут
Настроим рабочую форму обратной связи с нуля: от установки плагина до первой заявки в почте.
Через двадцать минут на вашем сайте будет работать форма, которая отправляет сообщения на почту. Используем Contact Form 7 — бесплатный плагин, установленный на более чем пяти миллионах сайтов. Подходит для WordPress 5.x и новее.
Что нужно до начала
- Доступ в админку WordPress (логин и пароль от /wp-admin)
- Права на установку плагинов — обычно есть у администратора сайта
- Рабочий адрес электронной почты, на который будут приходить заявки
Шаг 1. Установите Contact Form 7
Войдите в админку WordPress. В левом меню выберите Плагины → Добавить новый. В строке поиска справа вверху введите Contact Form 7. Первым в списке появится нужный плагин с иконкой синего конверта.
Нажмите Установить, затем Активировать. В левом меню появится новый пункт Контакт. Если видите его — плагин установлен правильно.
Шаг 2. Откройте готовую форму
Перейдите в Контакт → Формы. Плагин уже создал для вас форму с именем Контактная форма 1. Нажмите на её название — откроется редактор.
В верхней части страницы увидите блок с надписью Шорткод1 и строкой вида [contact-form-7 id="123" title="Контактная форма 1"]. Скопируйте эту строку целиком — она понадобится на следующем шаге.
Шаг 3. Добавьте форму на страницу
Перейдите в Страницы → Все страницы. Откройте ту, куда хотите поставить форму — обычно это страница «Контакты». Если такой страницы нет, создайте новую: Страницы → Добавить новую.
В редакторе поставьте курсор туда, где должна появиться форма. Если используете блочный редактор (Gutenberg): нажмите +, в поиске введите шорткод, выберите блок Shortcode. Вставьте скопированную на предыдущем шаге строку. Если используете классический редактор: просто вставьте строку в нужное место текста.
Нажмите Обновить или Опубликовать. Откройте страницу в браузере — должна появиться форма с полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение», а внизу кнопка Отправить.
Шаг 4. Проверьте отправку
Заполните все поля формы на сайте и нажмите Отправить. Под кнопкой должно появиться сообщение «Ваше сообщение успешно отправлено». Проверьте почту — письмо должно прийти в течение пары минут. Если письма нет, загляните в папку «Спам».
Форма отправляет письма на адрес, указанный в настройках WordPress (Параметры → Общие → E-mail). Если хотите получать заявки на другой адрес, измените его в настройках формы во вкладке «Почта».
Если форма не отправила письмо
Самые частые причины:
- Ошибка «Failed to send your message» — проблема с почтовым сервером хостинга. Установите плагин WP Mail SMTP, он отправляет письма через внешний SMTP (Gmail, Yandex, Mailgun). Инструкции по настройке есть внутри плагина.
- Письмо попало в спам — частая ситуация, если сайт на shared-хостинге. Добавьте адрес отправителя формы в белый список почтового клиента или настройте отправку через SMTP.
- Форма не отображается на странице — проверьте, что шорткод скопирован полностью, включая квадратные скобки. Попробуйте переключиться в текстовый режим редактора и убедитесь, что строка не разбита переносами.
- Сообщение «Validation errors occurred» — не заполнено обязательное поле или введён некорректный e-mail. Заполните все поля и проверьте формат адреса.
Настройте защиту от спама
Contact Form 7 поддерживает несколько способов защиты. Самый простой — встроенная капча reCAPTCHA от Google. Перейдите в Контакт → Интеграция, найдите блок reCAPTCHA v3 и следуйте инструкции: зарегистрируйте сайт на сайте Google, получите два ключа и вставьте их в форму на странице интеграции. Капча начнёт работать автоматически на всех формах.
Добавьте нужные поля
Вернитесь в редактор формы (Контакт → Формы, выберите свою форму). Над большим текстовым полем с кодом формы увидите кнопки: текст, email, tel, число, дата и другие. Нажмите на любую — откроется окно настройки поля. Задайте имя поля (латиницей), укажите, обязательное ли оно, и нажмите Вставить тег. Тег добавится в код формы. Сохраните изменения и обновите страницу — новое поле появится на сайте.
| Тип поля | Когда использовать |
|---|---|
| текст | Имя, город, название компании |
| Адрес электронной почты — проверяет формат автоматически | |
| tel | Номер телефона |
| textarea | Длинное сообщение, комментарий |
| раскрывающееся меню | Выбор из нескольких вариантов (тема обращения, город, услуга) |
| чекбокс | Согласие на обработку данных |
| файл | Загрузка резюме, документа, изображения |
Что делать дальше
Форма работает, но есть что улучшить. Настройте текст письма, которое приходит вам: во вкладке Почта редактора формы можете изменить тему письма, добавить туда значения из полей формы. Включите автоответ для посетителей — отдельная вкладка Почта 2, там же. Установите плагин Flamingo — он сохраняет все отправленные через формы сообщения в базу данных WordPress, чтобы ничего не потерялось, если письмо не дошло.
1 Шорткод — короткая команда в квадратных скобках, которую WordPress заменяет на готовый блок: форму, галерею, виджет. Вставляете [contact-form-7 id="123"] — на странице появляется форма.
Редактор изображений: Убрать лишнее, заменить фон, добавить объект, расширить кадр — на вашем изображении.
Спросить за 20 ₽Источники: Contact Form 7 — официальная страница плагина, Документация Contact Form 7
Частые вопросы
Письма с формы не приходят. Что делать?
Можно ли добавить поле для загрузки файла?
Contact Form 7 бесплатный или нужно платить?
Как защитить форму от спама?
У меня WordPress 6.4, а в инструкции написано 5.x. Подойдёт?
Можно ли сделать несколько разных форм?
Материал носит информационный характер и подготовлен редакцией «Агентуры». Он не является офертой, рекламой или индивидуальной консультацией. Упомянутые продукты, компании и торговые знаки принадлежат их правообладателям. Перед принятием решений, влекущих юридические или финансовые последствия, обратитесь к профильному специалисту.