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

3 min


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

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

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

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

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

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

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

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

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

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

  • Плагин очень прост в использовании, у него более 5 миллионов активных установок.
  • Это полноценный бесплатный плагин без назойливой рекламы или дополнительных продаж премиум-версии.
  • Активно развивается и поддерживается.
  • Многие популярные темы WordPress интегрируют плагин Contact Form 7 и предлагают настраиваемые формы.
  • Вы можете вставить форму в любом месте вашего сайта, используя блок Гутенберга.

Установка плагина Contact Form 7

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

Установить плагин Contact Form 7
Установить плагин Contact Form 7

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

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

Контактная форма 7 Меню
Контактная форма 7 Меню
  • Вы можете просмотреть все свои формы в разделе «Контактные формы».
  • Перейдите в «Добавить», чтобы создать новую форму.
  • Раздел интеграции позволяет вам связываться с внешними API из Constant Contact, reCAPTCHA и Sendinblue.

Настройка плагина Contact Form 7

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

Просмотр созданных форм
Просмотр созданных форм

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

Раздел формы

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

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

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

Заполните детали для тега
Заполните детали для тега

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

<label> Your name
    [text* your-name] </label>
<label> Your email
    [email* your-email] </label>
<label> Subject
    [text* your-subject] </label>
<label> Your message (optional)
    [textarea your-message] </label>
[file* file-915 limit:1mb filetypes:.docx]
[submit "Submit"]

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

Контактная форма сохранена
Контактная форма сохранена

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

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

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

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

Контактная форма 7 Автоответчик
Контактная форма 7 Автоответчик

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

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

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

Настройки сообщений
Настройки сообщений

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

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

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

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

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

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

Контактная форма 7 Блок Гутенберга
Контактная форма 7 Блок Гутенберга

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

Вставить контактную форму
Вставить контактную форму

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

Добавить контактную форму в классическом редакторе
Добавить контактную форму в классическом редакторе

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

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

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

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

Опубликованная контактная форма
Опубликованная контактная форма

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

Проверка формы в браузере
Проверка формы в браузере

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

Сообщение успешно отправлено
Сообщение успешно отправлено

Заключение

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


0 Comments

Добавить комментарий