ГлавнаяПлагиныКонтактные формы в WordPress с помощью плагина Jetpack

Контактные формы в WordPress с помощью плагина Jetpack

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

Jetpack — это бесплатный плагин для WordPress от создателей сети WordPress.com. Он содержит большой набор модулей, включая статистику, подписки, уведомления, кнопки «поделиться», и конечно же контактные формы. Если ваш блог или сайт работает на WordPress.com (а не WordPress.org), то модуль для работы с контактными формами у вас уже установлен и дополнительно настраивать его не нужно. Если вы не видите разницу между WordPress.com и WordPress.org, советуем обратиться к нашей статье.

Активация Jetpack и модуля «Контактные формы»

Если вы ещё не установили плагин Jetpack, то вы можете скачать архив плагина с сайта WordPress.org или установить плагин автоматически через административную панель WordPress. После активации Jetpack для полноценной работы вам необходимо связать его с вашим аккаунтом WordPress.com.

Подключение к WordPress.com

Подключение к WordPress.com

Если у вас нет аккаунта в сети WordPress.com (не путать с аккаунтом от вашего сайта WordPress), то вы можете его создать. После успешного подключения вам станут доступны все модули плагина Jetpack, некоторые из них будут активированы по умолчанию.

Чтобы деактивировать модуль Jetpack, щёлкните по кнопке «Learn More» (узнать больше) и рядом с ней появится кнопка «Deactivate» (деактивировать). Чтобы активировать модуль, щёлкните по его кнопке «Activate» (активировать). Убедитесь в том, что модуль «Contact Form» (контактная форма) находится в активном состоянии:

Модуль "Контактные формы"

Модуль «Контактные формы»

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

Контактные формы Jetpack можно размещать как в записях, так и на страницах. В качестве примера мы создадим новую страницу и назовём её «Контакты». В редакторе страницы вы заметите новую кнопку для работы с контактными формами:

Добавить новую контактную форму

Добавить новую контактную форму

Щёлкнув по этой кнопке, вы перейдёте в режим работы с контактной формой. Если у вас на странице уже есть контактная форма, то в открывшимся окне вы сможете её редактировать. Если на странице контактных форм не было, то Jetpack предложит создать новую форму со стандартными полями.

Работа с контактной формой

Работа с контактной формой

Поля можно сортировать, редактировать, удалять. Чтобы добавить новое поле щёлкните по ссылке «Add a new field» (добавить новое поле). Вы можете создавать поля различных типов, включая текст, радио-кнопки, флажки (checkbox), выпадающие списки.

Во вкладке «Email notifications» (уведомления) вы можете настроить адрес электронной почты и тему письма, которое будет отправляться при заполнении новой формы. Если адрес не задавать, то Jetpack воспользуется тем, что указан в вашем профиле. В случае отсутствия темы письма, Jetpack воспользуется названием страницы, на которой размещается контактная форма.

Чтобы добавить новую форму на страницу, щёлкните по кнопке «Add this form to my post» и Jetpack добавит код для вашей формы в редактор.

Код контактной формы

Код контактной формы

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

Контактна форма в действии

Контактна форма в действии

При заполнении формы на указанный вами электронный адрес придёт новое письмо с содержанием всех заполненных полей. Несмотря на наличие поля для ввода адреса электронной почты в контактной форме, письмо приходит с адреса вашего сайта, например wordpress@wpmag.ru а не с того адреса, который был указан при заполнении формы. Учитывайте это при ответе на подобные письма.

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

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

В основном меню в административной панели WordPress перейдите в раздел «Feedbacks» (отзывы). Здесь вы найдёте все сообщения которые были присланы через контактную форму, включая те, которые Jetpack пометил как спам.

Для защиты от спама Jetpack пользуется средствами плагина Akismet. Для правильной работы антиспама, создавая поля для ввода имени, адреса электронной почты и адреса сайта, используйте предназначенные для этого соответствующие типы полей (Name, Email, Website), а не простые текстовые поля.


Если при работе с контактными формами в WordPress у вас возникли вопросы, напишите нам в комментариях или в Твиттере.

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

  • Anton Vokrug

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

    • Антон, возможно у вас не работает отправка почты с вашего сервера? Это легко проверить — выйдите из панели администрирования WordPress а при входе зайдите в раздел «забыли пароль» и попытайтесь его восстановить. Если сообщение о восстановлении не придёт, значит проблема в почте. Если придёт, значит проблема с контактными формами (возможно письмо так же попадает в спам).

  • жаль возможностей мало, нет вывода дат, файл прикрепить проблематично, настройка писем HTML отсутствует … и если не ошибаюсь, то нет функции вызова формы в шаблонах ВП? Так что пока (ИМХО) в забеге несомненный лидер CF7. Скажу и хорошее))) форма Jetpack имеет превосходство перед › Contact Form 7 в том, что локально копии писем хранятся, это очень удобно.

  • fakir77

    Здравствуйте! Интересует такой вопрос: возможно ли в форме сделать заголовки без вывода полей, т.е., что бы при добавлении нового поля отображалось только его название?

    • Думаю можно это сделать с помощью CSS при выводе формы на странице.

  • Кирилл

    Можно ли прикрутить к этой форме капчу? Или это не имеет смысла?

    • Из коробки — нет, но стоит отметить, что все данные введенные в форму отправляются сперва на серверы Akismet для проверки на спам.

      • Кирилл

        Спасибо!

  • Tamara Gusakova

    Здравствуйте! Помогите разобраться. Настроила Jetpack Subscriptions. Письма которые приходят на email после подписки на обновления информации на сайте на английском языке. Не всем будет понятно куда нажать, чтобы подтвердить подписку. Как это можно исправить?

    • Попробуйте поменять язык интерфейса на вашем сайте WordPress в настройках.

  • Алекс

    Как насильно прописать e-mail получателя? Поделитесь кодом плз.

    • Адрес получателя можно выбрать в разделе Email Notifications во всплывающем окне при создании формы.

  • Андрей Иванов

    Не подскажете, как можно настроить форму кнопок для «Обратной связи» Jetpack’a. По умолчанию такие чёрные мрачные кнопки. Или можно свои вставить?

  • Плагин не может быть активирован, поскольку он вызвал фатальную ошибку. Jetpack требует WordPress версии 4.1.1 или позже.