✅ Новости WEB и WordPress, темы, плагины. Здесь мы делимся советами и лучшими решениями для веб-сайтов.

Gravity Forms: добавление пользовательских входных данных в поля и удаленная публикация после отправки

15

В этом уроке по Gravity Forms мы узнаем три вещи:

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

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

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

Весь приведенный ниже код можно поместить в код вашей темы functions.phpили плагина.

Добавление пользовательского ввода в поля

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

Выбор места для ввода

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

  • Вкладка «Общие»:gform_field_standard_settings
  • Вкладка «Внешний вид»:gform_field_appearance_settings
  • "Продвинутая вкладка:gform_field_advanced_settings

В каждом хуке у вас будет два параметра; ID позиции и формы. Каждый встроенный параметр Gravity Forms имеет фиксированный номер позиции. Вы можете сравнить это число, чтобы решить, где именно вы хотите, чтобы ваш собственный HTML или входные данные были. Перечислять все настройки и их положение в этом посте было бы слишком долго. Но Gravity Forms добавляет свои настройки с шагом 5. Например, на вкладке «Общие» «Метка поля» находится в позиции 0, а «Описание» — в позиции 10. Поместив свой HTML в позицию 10, он появится после описания. Не сравнивайте позицию с каким-либо числом, которое не является множителем 5.

Я добавляю свое пользовательское поле на вкладке «Дополнительно» в позиции 50, которая находится сразу после ввода «Метки поля администратора».

Большая часть приведенного выше кода не требует пояснений. Я добавляю HTML в том же формате, в котором Gravity Forms ожидает настройки. Однако на самом вводе вам необходимо предоставить функцию onchangeJavascript. Мы просто говорим ему запустить функцию GravityForms, чтобы сохранить любые изменения, внесенные в наш ввод. Важно помнить о свойстве, которое мы предоставляем в SetFieldProperty, thirdPartyInput, внутри этого ключа наш пользовательский ввод будет сохранен в массиве полей Gravity Forms при отправке.

Добавление всплывающей подсказки (необязательно)

Вы можете сделать еще одну необязательную вещь со своим вводом; добавить всплывающую подсказку. Если вы хотите этого, добавьте этот вызов функции в код, который вы только что добавили, и укажите (уникальный) ключ в виде строки:

А затем добавьте еще одну функцию, которая подключается к filter gform_tooltips, и добавьте содержимое всплывающей подсказки к соответствующему ключу, например:

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

Определение типов полей для добавления пользовательского ввода

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

То, как мы это делаем, на самом деле с помощью Javascript. В GravityForms есть Javascript, который автоматически скрывает все настройки, а затем выбирает отображение конкретных в зависимости от типа поля. Итак, наше поле есть, но Gravity Forms его просто скрыло.

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

Я добавляю ввод в типы полей text, textarea, email, phoneи number. Не забудьте подумать о том, как вы собираетесь обрабатывать значения отправленных полей. Если вы решите разрешить это поле, например, для типа поля флажка, вы должны иметь возможность правильно анализировать и обрабатывать отправленные значения.

Gravity Forms: добавление пользовательских входных данных в поля и удаленная публикация после отправки

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

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

Добавление пользовательской настройки в настройки формы

Добавить пользовательские настройки в настройки формы довольно просто. Нам нужно подключиться к фильтру gform_form_settingsи добавить к нашему HTML любые входные данные, которые вы хотите, а затем к фильтру gform_pre_form_settings_saveи убедиться, что наши пользовательские входные данные сохранены в объекте формы.

Вот как вы можете добавить пользовательскую настройку в настройки формы:

Фильтр gform_form_settings ожидает, что ключи будут меткой раздела, а затем массивом для каждого параметра. Добавляем только один с ключом submit_3rd_party. При самом вводе флажка мы используем метод Gravity Forms rgar()для извлечения значений данного ключа из массива (формы), чтобы убедиться, что мы получаем сохраненное значение нашего поля. Измените HTML в соответствии с вашими потребностями.

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

add_filter('gform_pre_form_settings_save', function($form) { $form['submit_3rd_party'] = rgpost('submit_3rd_party'); return $form; }, 10, 2);

Gravity Forms: добавление пользовательских входных данных в поля и удаленная публикация после отправки

В этом фрагменте кода используется еще один вспомогательный метод Gravity Forms, rgpost(), для извлечения отправленных значений (из $_POST) и сохранения их в предоставленном массиве формы с нужным ключом. Если вы добавите больше настроек, вам нужно будет повторить это для каждой настройки.

И это все, что нам нужно для добавления пользовательских настроек формы! Всякий раз, когда у вас есть доступ к объекту формы, вы можете проверить значение $form['submit_3rd_party'].

Отправить отправленные значения третьей стороне

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

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

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

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

Источник записи: awhitepixel.com

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