Как использовать вебхуки с формами WordPress

Вы хотите интегрировать свои формы WordPress с различными веб-приложениями и сервисами?

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

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

Но сначала, если вы новичок, мы расскажем, что такое вебхуки и почему они важны. Имейте в виду, что метод, который мы будем использовать сегодня, не требует от вас каких-либо навыков программирования.

Что такое вебхуки?

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

С технической точки зрения, веб-перехватчики — это определяемые пользователем обратные вызовы HTTP, которые запускаются событием в исходной системе и отправляются в целевую систему.

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

Если вам интересно, почему вы должны использовать веб-хуки, вот несколько преимуществ:

• Автоматическая передача информации между двумя службами/приложениями
• Автоматизируйте задачи и сократите время администратора
• Сократите расходы на использование сервисов коннекторов, таких как Zapier и Hubspot, для обработки данных в приложениях.

Вебхуки невероятно полезны для разработчиков и технически подкованных пользователей WordPress.

С этого давайте начнем наше пошаговое руководство по созданию формы веб-перехватчика в WordPress.

Создание формы веб-перехватчика в WordPress [простой метод]

Есть много способов использовать веб-хуки для отправки ваших форм WordPress в другие веб-приложения.

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

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

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

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

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

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

Шаг 1. Создайте новое приложение Slack

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

Теперь, чтобы отправлять данные из WordPress в другую службу с помощью веб-перехватчиков, вам нужно создать мост между двумя приложениями. Итак, чтобы подключиться к Slack, вам нужно создать приложение Slack (мост).

Если вы новичок в этом, не волнуйтесь, это довольно просто, и мы проведем вас шаг за шагом. Сначала вам нужно открыть страницу Slack API и нажать кнопку « Создать приложение ».

В следующем всплывающем окне вы можете выбрать способ создания приложения с помощью Slack. Есть два варианта:

• С нуля
• Из манифеста приложения.

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

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

Откроется страница с основной информацией. Здесь вам нужно нажать на опцию Incoming Webhooks .

На следующем экране включите настройки « Активировать входящие веб -перехватчики». Это позволяет публиковать сообщения в Slack из внешних сервисов.

После включения вы увидите на странице URL-адреса веб-перехватчиков для вашего рабочего пространства .

Теперь вам нужно создать новый веб-хук для получения информации из вашей формы WordPress. Итак, нажмите кнопку « Добавить новый веб-перехватчик в рабочую область» .

Затем вы можете увидеть всплывающее окно, в котором вы можете выбрать канал Slack для публикации своих форм.

После выбора канала Slack нажмите Разрешить .

Теперь вы сможете увидеть новый URL-адрес веб-перехватчика для вашего приложения Slack.

Все, что вам нужно сделать сейчас, это скопировать URL-адрес Webhook. Он понадобится вам через несколько шагов.

Шаг 2: Установите и активируйте WPForms

Получив URL-адрес веб-хука, вы можете добавить его в форму WordPress.

Для начала зарегистрируйте учетную запись на веб-сайте WPForms.

Существует бесплатная версия плагина, но вам понадобится премиум-версия для доступа к расширенным функциям форм, таким как веб-перехватчики. WPForms поставляется со 100% гарантией возврата денег без риска, поэтому вы можете попробовать сервис, прежде чем брать на себя обязательства.

После регистрации вы найдете файл загрузки плагина и лицензионный ключ на вкладке « Загрузки ».

Теперь перейдите на панель инструментов WordPress и установите плагин. Если вам нужна дополнительная информация, вы можете ознакомиться с нашим руководством по установке плагина WordPress.

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

Прежде чем приступить к созданию формы, вам необходимо установить надстройку Webhooks.

Для этого перейдите на вкладку WPForms »Addons , и вы найдете множество дополнений, которые помогут вам расширить функциональность ваших форм WordPress. Здесь нажмите кнопку « Установить надстройку» для надстройки Webhooks.

Теперь вы готовы создать форму веб-перехватчика в WordPress.

Шаг 3: Создайте форму веб-перехватчика

Чтобы создать новую форму, перейдите на страницу WPForms »Add New , где вы увидите список готовых шаблонов. Эти шаблоны поставляются с предварительно заполненными полями, которые вам понадобятся в зависимости от цели вашей формы. Библиотека шаблонов включает в себя:

• Простая контактная форма
• Запросить форму коммерческого предложения
• Форма пожертвования
• Форма выставления счета/заказа
• Форма опроса
• Форма предложения

…и более! Для этого руководства мы выберем шаблон формы предложения , поскольку на предыдущем шаге мы создали приложение Slack для обратной связи с пользователем. Не стесняйтесь выбирать тот, который лучше всего соответствует тому, что вам нужно.

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

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

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

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

Когда вы закончите добавлять поля формы, нажмите кнопку Сохранить .

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

Шаг 4. Настройте веб-перехватчик для Slack

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

Будет создан новый веб-хук, который вы можете отредактировать, чтобы настроить интеграцию со Slack.

Во-первых, вы можете изменить имя вебхука. Это поможет вам распознать его позже.

Теперь помните URL-адрес веб-перехватчика, который вы скопировали из своего приложения Slack на шаге 1? Вам нужно будет вставить его сюда в параметре Request URL . Это позволит вам связать форму WordPress с другими сервисами, такими как Slack.

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

• Метод запроса: позволяет выбрать тип соединения, которое вы хотите создать с подключенной службой. Существует много типов HTTP-методов, которые вы можете использовать в зависимости от того, какой тип соединения вы хотите создать:
  • ПОЛУЧИТЬ : данные будут получены из отправленной формы и отправлены в подключенное приложение.
  • POST : это отправит данные на вторичную службу. Мы будем использовать запрос HTTP POST, так как нам нужно отправить данные из вашей формы в ваш канал Slack.
  • PUT : это позволяет вам обновлять данные при запуске вашего веб-хука.
  • PATCH : Это позволяет вам заменять данные при запуске вашего веб-хука.
  • DELETE : это позволяет вам удалять информацию при запуске этого конкретного веб-перехватчика.
• Формат запроса: эта опция покажет серверу, какой тип контента вы отправляете. Это немного технически, но в основном доступны два разных типа формата запроса:
  • JSON : форматирует ваши данные в формате application/json и устанавливает тип содержимого как charset=utf-8 .
  • FORM : форматирует ваши данные в формате application/x-www-form-urlencoded и устанавливает тип содержимого как charset=utf-8 .
• Секрет: если вы разработчик и хотите интегрировать свой собственный API для аутентификации, вы можете использовать секретный ключ. Но для нашего урока нам не нужна эта опция, поэтому мы оставим это поле пустым.
• Заголовки запроса: при отправке запроса в приложение отправляются определенные значения. Когда вебхук запустится, поля будут сгенерированы автоматически. Мы также оставим это поле пустым.
• Тело запроса: для этого варианта вам необходимо настроить тип сообщения и выбрать поле для публикации сообщений. Поскольку пользователи будут вводить предложения в текстовом формате, мы установим для параметра Key значение Text . Затем выберите поле, в которое пользователи будут вводить свое сообщение.

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

Шаг 5. Настройте уведомления формы

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

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

Здесь вы можете настроить параметры уведомлений и добавить адреса электронной почты получателей.

WPForms также позволяет отправлять автоматические уведомления по электронной почте пользователям формы. Чтобы настроить это, нажмите кнопку « Добавить новое уведомление » в правом верхнем углу страницы.

Затем вам нужно использовать параметр « Показать смарт-теги » и выбрать « Электронная почта ». С этим тегом WPForms автоматически обнаружит адрес электронной почты, введенный пользователем в форме.

В разделе « Сообщение электронной почты » вы можете добавить собственное сообщение и использовать смарт-тег {all_fields} для отображения всех данных формы, введенных пользователем.

Не забудьте сохранить настройки в конце.

Шаг 6: Настройте подтверждающее сообщение

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

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

• Сообщение: добавьте подтверждающее сообщение, которое отображается в интерфейсе после того, как клиенты отправят свой заказ.
• Показать страницу: перенаправляйте пользователей на любую страницу вашего сайта.
• Перейти к URL-адресу (перенаправление): отправка пользователей на определенный URL-адрес.

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

Когда вы закончите с настройками, нажмите на кнопку Сохранить .

Мы также должны упомянуть здесь, что WPForms позволяет вам интегрироваться с предпочитаемым вами почтовым сервисом, таким как Constant Contact и Mailchimp.

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

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

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

Шаг 7: Опубликуйте форму Webhooks на своем сайте

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

В этом уроке мы добавим форму на новую страницу нашего сайта. Итак, перейдите на вкладку Страницы »Добавить новую на панели администратора WP. На экране редактора блоков добавьте новый блок и найдите «WPForms».

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

Затем вы можете опубликовать свою страницу на своем сайте.

Если вы используете классический редактор WordPress, вы можете добавить форму с помощью кнопки « Добавить форму » в редакторе.

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

Затем вы можете выбрать созданную вами форму из выпадающего меню и сохранить изменения.

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

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

Это все! Мы надеемся, что этот пост помог вам узнать, как использовать Webhooks в ваших формах WordPress. С WPForms вы можете создать форму веб-перехватчика и с легкостью подключиться к стороннему сервису.

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

Для ваших следующих шагов вы можете проверить эти ресурсы:

• Как добавить опцию «Сохранить и продолжить позже» в формы WordPress
• Как уменьшить количество заброшенных форм и повысить конверсию
• Лучшие инструменты для захвата электронной почты и конструкторы форм для WordPress

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