Как добавить контактную форму в WordPress?

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

Связанный: Как добавить и настроить контактную форму на сайте Weebly?

Зачем иметь контактную страницу в WordPress?

Основная потребность страницы контактов — позволить читателям отправлять вам электронные письма. Тем не менее, есть несколько других преимуществ наличия контактной страницы на вашем веб-сайте.

Достоверность — наличие контактной страницы повышает доверие к вашей веб-странице. Люди поверят, что вы реальный человек или компания, которые отвечают на вопросы.

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

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

Разница между контактной формой и электронными письмами

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

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

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

Плагин без проблем работает с Akismet для предотвращения отправки спама, или вы можете добавить reCAPTCHA, чтобы убедиться, что только пользователи-люди могут отправлять форму, а не автоматические роботы. Кроме того, контактная форма 7 также использует параметр черного списка комментариев WordPress по умолчанию для блокировки сообщений.

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

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

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

Хорошая часть заключается в том, что у вас есть много плагинов для контактных форм, доступных бесплатно в разделе репозитория плагинов WordPress. Contact Form 7 — один из самых популярных среди всех бесплатных плагинов.

Плагин очень прост в использовании, у него более 5 миллионов активных установок.

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

Активно развивается и поддерживается.

Многие популярные темы WordPress интегрируют плагин Contact Form 7 и предлагают настраиваемые формы.

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

Установка плагина контактной формы 7

Поскольку Contact Form 7 — бесплатный плагин, вы можете установить его прямо из панели администратора WordPress. После входа в панель администратора вашего сайта перейдите в раздел «Плагины > Добавить новый». Вы можете найти и установить плагин Contact Form 7 оттуда.

Создание вашей первой контактной формы

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

Вы можете просмотреть все свои формы в разделе «Контактные формы».

Перейдите в «Добавить новый», чтобы создать новую форму.

Раздел интеграции позволяет вам подключаться к внешним API из Constant Contact, reCAPTCHA и Sendinblue.

Настройка плагина контактной формы 7

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

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

Раздел формы

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

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

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

Вам не нужно запоминать теги или готовить код.

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

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

Ваше имя
[text* your-name] Ваш адрес электронной почты
[email* your-email] Тема
[text* your-subject] Ваше сообщение (необязательно)
[textarea your-message] метка>
[file* file-915 limit:1mb filetypes:.docx]
[submit “Submit”]

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

Почтовый раздел

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

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

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

Тело сообщения — установите формат шаблона для получения писем.

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

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

Сохраните изменения после завершения настройки почтовых шаблонов.

Раздел сообщений

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

Дополнительные настройки

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

Добавление формы на страницу контактов

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

Теперь, когда у вас есть шорткод вашей контактной формы, следующий шаг — встроить его на свою страницу. Перейдите в раздел «Страницы > Все страницы» и создайте/отредактируйте страницу контактов. Введите /contact, чтобы отфильтровать блок контактной формы 7 Gutenberg и вставить его в область содержимого.

Нажмите на раскрывающийся список «Выберите контактную форму» и выберите имя формы для встраивания.

Если вы используете старый классический редактор, просто вставьте шорткод контактной формы в редактор.

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

Связанный: Как встроить Google Forms в WordPress?

Проверка вашей контактной формы

Просмотрите свою страницу, чтобы увидеть, как выглядит форма. Мы также рекомендуем вам протестировать форму, отправив фиктивное сообщение.

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

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

Вывод

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