Как создать контактную форму в WordPress без программирования

Хотите добавить форму обратной связи на свой сайт WordPress, но не знаете, как это сделать? Вы попали по адресу. В этом пошаговом руководстве вы узнаете, как это сделать. Создайте профессиональную форму обратной связи в WordPress, не написав ни одной строчки кода.—и это займет меньше 5 минут.

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

Почему каждому сайту на WordPress нужна форма обратной связи

Прежде чем перейти к руководству, давайте разберемся, почему форма обратной связи важна:

• Защищает вашу электронную почту от спама. – Публикация вашего адреса электронной почты в открытом доступе привлекает спам-ботов, которые начинают заваливать ваш почтовый ящик спамом.
• Выглядит профессионально – Грамотно разработанная форма внушает посетителям доверие.
• Собирает структурированную информацию – Получите необходимые данные (имя, электронная почта, сообщение) в упорядоченном формате.
• Отслеживает запросы – Сохраняйте отправленные материалы в панели управления WordPress, чтобы они не терялись при пересылке по электронной почте.
• Удобный для мобильных устройств опыт – Формы отлично работают на телефонах и планшетах.

Что вам понадобится

Для прохождения этого урока вам понадобится:

• Веб-сайт на WordPress (самостоятельно размещенный на WordPress.org)
• Административный доступ для установки плагинов.
• 5 минут вашего времени

Вот и всё! Никаких знаний в программировании, никакого технического опыта, никаких платных инструментов не требуется.

Шаг 1: Установите плагин Auto Form Builder (бесплатный плагин).

Мы будем использовать Автоматический конструктор форм (также известный как AFB)—свободный, легкий плагин для WordPress с визуальным интерфейсом перетаскивания. Идеально подходит для новичков, поскольку не требует длительного обучения.

Вот как его установить:

1. Войдите в панель администратора WordPress.
2. Перейдите на Плагины → Добавить новый
3. Искать "AFB(сокращенное название Auto Form Builder)
4. Искать "AFB – Auto Form Builder – конструктор форм с функцией перетаскивания.
5. Нажмите установить сейчас, то активировать

💡 Совет: Поиск по запросу «AFB» — самый быстрый способ найти плагин в репозитории WordPress.

После активации в меню административной панели WordPress появится пункт «Автоматический конструктор форм». Вот и все — вы готовы создать свою первую форму!

Шаг 2: Создайте новую форму обратной связи.

Теперь давайте создадим вашу контактную форму:

1. Нажмите Автоматический конструктор форм в вашем административном меню
2. Нажмите Создать новую форму
3. Вы увидите экран выбора шаблона — выберите Отправить запрос

Auto Form Builder поставляется с готовым шаблоном контактной формы, который включает в себя:

• Поле "Полное имя"
• Поле адреса электронной почты
• Поле "Номер телефона" (опционально)
• Поле сообщения

Шаблон готов к немедленному использованию, но вы можете настроить его по своему усмотрению.

Шаг 3: Настройка полей формы (необязательно)

Хотите добавить или изменить поля? Конструктор с функцией перетаскивания сделает это очень просто:

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

В левой боковой панели вы увидите доступные типы полей. Просто перетащите любое поле на холст вашей формы:

• Ввод текста – Для коротких ответов, таких как имя или предмет.
• Эл. адрес – Автоматически проверяет адреса электронной почты
• Телефон – Для телефонных номеров с дополнительным форматированием
• Текстовая область – Для более длинных сообщений
• Выпадающее – Предоставьте пользователям возможность выбора из предложенных вариантов (например, «Причина обращения»).
• флажок – Для полей согласия или выбора нескольких вариантов

Настройки поля редактирования

Щелкните по любому полю, чтобы настроить его:

• Изменить этикетка (например, «Ваше имя» вместо «Полное имя»)
• Добавить текст заполнителя направлять пользователей
• Создать поля обязательный или дополнительный
• Добавить текст справки ниже поля

Изменение порядка полей

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

Шаг 4: Настройка параметров формы

Нажмите Настройки Вкладка для настройки действий при отправке формы:

Сообщение об успехе

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

«Спасибо за обращение! Мы свяжемся с вами в течение 24 часов».

Уведомления по электронной почте

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

1. Включите Уведомления по электронной почте
2. Введите свой адрес электронной почты (или несколько адресов, разделенных запятыми).
3. Настройте тему электронного письма.

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

Шаг 5: Оформите свою форму (необязательно)

Хотите, чтобы ваша форма соответствовала дизайну вашего сайта? Нажмите вкладку «Настроить», чтобы внести изменения:

• Цвета – Изменить цвет кнопок, фон и текст
• Границы – Настройте границы поля и радиус скругления углов.
• Расстояние – Регулировка отступов и полей
• Button – Настройте текст и внешний вид кнопки отправки

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

Шаг 6: Сохраните и получите свой короткий код

Когда вы будете довольны своей техникой:

1. Дайте вашей форме название (например, «Контактная форма»).
2. Нажмите Сохранить форму
3. Скопируйте короткий код отображается

Шаг 7: Добавьте форму обратной связи на свою страницу.

Теперь давайте разместим вашу форму на вашем сайте:

Вариант А: Добавить на существующую страницу

1. Перейдите на Страницы и отредактируйте свою страницу «Контакты».
2. Вставьте шорткод в то место, где вы хотите, чтобы появилась форма.
3. Нажмите Обновление ПО

Вариант B: Создать новую страницу контактов

1. Перейдите на Страницы → Добавить
2. Назовите его «Контакты» или «Свяжитесь с нами».
3. При желании добавьте вступительный текст.
4. Вставьте шорткод
5. Нажмите Опубликовать

Посетите свою страницу, чтобы увидеть вашу новую красивую форму обратной связи в действии!

Шаг 8. Проверьте свою контактную форму

Прежде чем объявить миру о своей новой версии, протестируйте её:

1. Перейдите на страницу контактов.
2. Заполните форму, указав информацию об тестировании.
3. Нажмите «Отправить»
4. Убедитесь, что вы видите сообщение об успешном завершении.
5. Проверьте свою электронную почту на наличие уведомления.
6. В WordPress перейдите по ссылке: Автоматический конструктор форм → Отправка форм чтобы просмотреть сохраненную запись

Если всё работает, поздравляем — ваша форма обратной связи запущена!

Управление отправкой форм обратной связи

Одна из лучших функций Auto Form Builder — это встроенная функция. управление подачей заявокВ отличие от некоторых плагинов для создания форм, которые только отправляют электронные письма, каждая отправленная форма сохраняется в вашей базе данных WordPress.

Перейдите на Автоматический конструктор форм → Материалы чтобы:

• Просмотреть все отправленные материалы в таблице с возможностью поиска
• Фильтр по дате – Сегодня, на этой неделе, в этом месяце и т. д.
• Поиск отправленных материалов – Мгновенный поиск конкретных сообщений
• Отметить как прочитанное/непрочитанное – Отслеживайте, какие запросы вы обработали.
• Отметьте важные сообщения звездочкой – Отметьте контакты с высоким приоритетом
• Экспорт в CSV – Загрузите свои данные для электронных таблиц или резервных копий.

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

Почему Auto Form Builder идеально подходит для создания контактных форм

Существует множество плагинов для создания форм в WordPress, но вот почему Auto Form Builder выделяется среди других плагинов для создания контактных форм:

Часто задаваемые вопросы (FAQ)

Будет ли эта форма работать с моей темой WordPress?

Да. Auto Form Builder разработан для работы с любой темой WordPress.

Могу ли я получать ответы на заполненные формы по электронной почте?

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

Удобна ли форма обратной связи для мобильных устройств?

Да. Все формы, созданные с помощью Auto Form Builder, полностью адаптивны и отлично выглядят на телефонах, планшетах и ​​настольных компьютерах.

Как защитить свою форму от спама?

Auto Form Builder предлагает дополнительные модули защиты от спама, включая Google reCAPTCHA и Cloudflare Turnstile.

Следующие шаги

Теперь, когда на вашем сайте WordPress есть форма обратной связи, рассмотрите следующие улучшения:

• Добавьте форму обратной связи в нижнюю часть страницы. – Обеспечьте доступность с каждой страницы
• Создайте форму обратной связи – Собирайте отзывы и рекомендации клиентов.
• Создайте форму подписки на новостную рассылку. – Расширьте свой список рассылки
• Добавить защиту от спама – Включите reCAPTCHA для сайтов с высокой посещаемостью

Заключение

Для создания контактной формы в WordPress не требуются навыки программирования. Автоматический конструктор формС помощью этой программы вы можете создать профессиональную, адаптивную для мобильных устройств контактную форму менее чем за 5 минут — совершенно бесплатно.

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

Готовы создать свою контактную форму? Скачать Auto Form Builder Загрузите плагин из репозитория WordPress и начните работу уже сегодня.