Полное руководство: как динамически заполнять поля в гравитационных формах
Создание простых или сложных форм в Gravity Forms выполняется легко и быстро. Одна из функций, предлагаемых Gravity Forms, позволяет вам условно предварительно выбирать или предварительно заполнять поля в форме. Это полезно, когда у вас есть одна и та же форма на нескольких страницах контактов для каждого отдела, и вы хотите предварительно выбрать соответствующий отдел в форме. Или вы встраиваете форму запроса на страницы продуктов или услуг и хотите автоматически предварительно заполнять информацию о текущем продукте или услуге при каждой отправке.
Вы можете динамически предварительно выбирать или предварительно заполнять поля несколькими способами, а также динамически заменять возможные варианты в раскрывающемся списке, переключателе или группе флажков. Поле, которое вы динамически заполняете, может быть видимым полем, которое пользователь может редактировать, или оно может быть направлено в скрытое поле, чтобы читатель отправленных форм получил важную информацию.
Четыре способа динамического заполнения полей
В этом руководстве мы рассмотрим четыре способа динамического заполнения полей в форме Gravity Forms. Три из них вы можете сделать, не касаясь кода! Но если вы хотите динамически изменять возможные варианты выбора, группы переключателей или флажков, вам потребуется написать некоторый PHP-код. Мы рассмотрим, как это сделать, в самом конце.
Вы можете динамически заполнять поля:
- Добавление дополнительной информации в URL.
- Предоставьте дополнительную информацию шорткоду для встраивания Gravity Forms.
- Добавление дополнительной информации в блок Gravity Forms (если вы используете WordPress с Gutenberg).
- Использование фильтров с кодом PHP.
Но сначала нам нужно разобраться, как активировать динамическое заполнение поля.
Активация поля для динамического заполнения
Первым шагом, независимо от того, какой метод вы используете для заполнения поля, является его активация в самом поле.
В редактировании формы разверните поле и на вкладке «Дополнительно» вы найдете флажок «Разрешить динамическое заполнение поля». Отметьте его, и появится новый текстовый ввод, позволяющий определить имя параметра. Это может быть все, что вы хотите, но должно быть уникальным и без пробелов.
Сохраните форму, и она готова для вас, чтобы решить, какой метод вы хотите использовать для ее заполнения.
Динамическое заполнение из параметров URL
Вы можете добавить параметры GET к ссылке на страницу, которая встраивает форму, например, если ссылка находится внутри текста другого сообщения или является пользовательской ссылкой в меню WordPress.
Просто добавьте переменные запроса в пары ключ-значение, с именем параметра в качестве ключа и их значением, как вы хотите, чтобы их значение было. Можно добавить несколько пар ключ-значение, если вы хотите заполнить несколько полей в форме, просто разделите каждую пару знаком «&».
Предполагая, что ваша форма существует на этой странице: " https://example.com/contact-me/", и имя вашего параметра — awp_populate_meвы можете заполнить поле, используя этот URL-адрес: " https://example.com/contact-me/?awp_populate_me=Hello".
Имейте в виду, что URL-адреса должны быть правильно закодированы. Например, вы не можете просто добавить пробелы или специальные символы непосредственно в качестве значения параметра. Предоставление «Привет, мир!» как значение будет " Hello%20world%21". Если вы хотите пойти по этому пути, существует множество онлайн-инструментов для кодирования URL-адресов.
Динамическое заполнение из шорткода
Все формы вставляются через шорткод. Вы можете динамически заполнять поля непосредственно внутри этого шорткода. Этот метод может быть полезен, если вы используете одну и ту же форму в нескольких сообщениях (например, регистрируете участников для нескольких разных событий или курсов), и вам нужно предоставить что-то уникальное, чтобы узнать, с какого события или курса была получена форма……
Обычно, когда вы встраиваете форму, это приводит к появлению шорткода, который выглядит примерно так:[gravityforms id="1" title="Contact us"]
Отредактируйте шорткод и добавьте набор ключей field_valuesв строку, содержащую имя вашего параметра, равное желаемому значению. Например, установка параметра awp_populate_me«Hello World» выполняется следующим образом:
[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World"]Если вам нужно заполнить несколько полей, добавьте «&» между ними, например:
[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World&awp_another_field=Hello to you too"]Динамическое заполнение из блока в Гутенберге
Если у вас есть GravityForms версии 2.4.13+ и WordPress с Gutenberg (WordPress 5+), вы можете добавить Gravity Forms как блок. В этом блоке у вас также есть метод для заполнения полей.
Добавьте блок «Формы» в Гутенберг и выберите свою форму. Блок должен измениться на предварительный просмотр формы. На правой боковой панели разверните «Дополнительно», и вы найдете текстовую область с надписью «Значения поля». В этом текстовом поле вы можете ввести имена и значения параметров, как если бы вы вводили шорткод. Например " awp_populate_me=Hello World!"
Динамическое заполнение из кода
И, наконец, если вы предпочитаете заполнять свои поля с помощью PHP-кода, для этого есть фильтры. Вы можете поместить этот код в файл вашей темы functions.php.
То, как вы кодируете это, зависит от типа поля; как вы, вероятно, можете догадаться, заполнение (замена всех вариантов) в выборе, флажках или группе переключателей должно обрабатываться иначе, чем просто заполнение одного текстового поля.
Заполнение поля с одним значением
Заполнение поля с одним значением (это относится к текстовому полю, текстовой области, полю электронной почты, полю телефона и т. д.) легко выполняется с помощью фильтрации gform_field_value_<parameter name>. В нашем примере:
add_filter('gform_field_value_awp_populate_me', function($value) {
return 'Hello world!';
});Вы также можете использовать этот фильтр для предварительного выбора параметра в поле с несколькими значениями, например, выберите (раскрывающийся список), переключатели или флажки.
Заполнение выбора или переключателей
Если вы просто заинтересованы в предварительном выборе параметра, следуйте приведенному выше руководству по заполнению поля с одним значением. Этот код предназначен для настройки или замены возможных вариантов, которые вы получаете в поле.
Фильтры рендеринга форм Gravity Forms
Фильтр gform_pre_renderпозволяет нам изменять форму прямо перед ее отображением. Но при внесении изменений здесь мы должны убедиться, что наши изменения применяются во всех случаях; поэтому нам также нужно подключить gform_admin_pre_render(соответствующий фильтр pre_render, но влияет на редактирование администратора/формы), gform_pre_validation(отвечает за проверку формы перед отправкой) и gform_pre_submission_filter(фильтр после проверки, но до сохранения записи). Не волнуйтесь, мы используем одну и ту же функцию для всех этих фильтров.
Вы можете отфильтровать их напрямую или указать символ подчеркивания и идентификатор формы после имени фильтра, чтобы отфильтровать только определенную форму. Например gform_pre_render_1, будет выполняться только в форме с идентификатором формы 1.
В качестве аргумента для всех этих фильтров вы получаете объект формы, в котором вы можете получить идентификатор формы (альтернативный метод добавления идентификатора формы в фильтр) и все его поля. Поля формы представляют собой массив Fieldобъектов, но все, о чем нам нужно беспокоиться, это заменить правильное choicesсвойство поля.
Изменение выбора
Какими данными вы хотите заменить выбор, зависит только от вас, но для choicesсвойства поля требуется массив, содержащий элементы «текст» и «значение». Например ['text' => 'Hello World!', 'value' => '1', 'text' => 'Second choice', 'value' => '2'].
add_filter('gform_pre_render_1', 'awp_populate_choices');
add_filter('gform_pre_validation_1', 'awp_populate_choices');
add_filter('gform_pre_submission_filter_1', 'awp_populate_choices');
add_filter('gform_admin_pre_render_1', 'awp_populate_choices');
function awp_populate_choices($form) {
foreach ($form['fields'] as &$field) {
if ($field->inputName == 'awp_populate_me') {
// Generate your data here. Below is just an example
$pages = get_posts('numberposts=-1&post_status=publish&post_type=page');
// Generate a nice array that Gravity Forms can understand
$choices = [];
foreach ($pages as $page) {
$choices[] = ['text' => $page->post_title, 'value' => $page->ID];
}
// Set choices to field
$field->choices = $choices;
}
}
return $form;
}Приведенный выше код фильтрует только идентификатор формы 1. Он начинается с перебора полей формы. Важно отметить «&» перед элементом в цикле, который передает его по ссылке. Это означает, что если мы вносим изменения в $field, они применяются и сохраняются непосредственно в $form['fields'].
Второй шаг — нацеливание на поле с именем параметра, на который мы хотим нацелиться. Для каждого поля это inputNameсвойство. Вы можете использовать другие способы таргетинга полей, например, его идентификатор (id) или класс CSS (cssClass). Когда мы нашли наше поле, нам нужно сгенерировать массив замены для вариантов и установить $field->choicesего. В приведенном выше примере я запрашиваю все страницы и перебираю их, чтобы создать правильно отформатированный массив.
Не забудьте вернуть $formв самом конце, так как это фильтр.
Стоит отметить, что этот фильтр также применяется к форме редактирования (потому что мы фильтруем gform_admin_pre_render). Но помните, что вы больше не можете манипулировать вариантами в редактировании формы — он просто не сохранит ваши изменения, потому что этот код всегда переопределяет его.
Установка флажков
Я упомяну это снова; если вы просто заинтересованы в предварительном выборе флажка, следуйте приведенному выше руководству по заполнению поля с одним значением. Что касается замены всех вариантов выбора в флажках, процесс очень похож на заполнение кнопок выбора или переключателей выше, но с некоторыми небольшими отличиями. Я рекомендую сначала просмотреть объяснение выше для выбора и переключателей.
Вы используете те же фильтры, и процесс запуска такой же; вы просматриваете поля формы и находите то, что вам нужно. Однако с флажками вам нужно заменить два свойства в объекте поля; choicesи inputs. Свойство choicesожидает тот же массив, что и в кнопках выбора или переключателях.
Свойство inputожидает массив с элементами ‘ label‘ и ‘ id‘. Не labelтребует пояснений и должен быть идентичен textв массиве вариантов. Элемент idдолжен соответствовать правилам Gravity Forms ID; объединение идентификатора поля, точки и идентификатора выбора, начиная с 1 (например, если идентификатор поля равен 2, а идентификатор выбора равен 3, правильным idбудет " 2.3").
add_filter('gform_pre_render_1', 'awp_populate_choices');
add_filter('gform_pre_validation_1', 'awp_populate_choices');
add_filter('gform_pre_submission_filter_1', 'awp_populate_choices');
add_filter('gform_admin_pre_render_1', 'awp_populate_choices');
function awp_populate_choices($form) {
foreach ($form['fields'] as &$field) {
if ($field->inputName == 'awp_populate_me') {
// Generate your data here. Below is just an example
$pages = get_posts('numberposts=-1&post_status=publish&post_type=page');
// Generate nice arrays that Gravity Forms can understand
$choices = [];
$inputs = [];
$input_id = 1;
foreach ($pages as $page) {
$choices[] = ['text' => $page->post_title, 'value' => $page->ID];
$inputs[] = ['label' => $page->post_title, 'id' => $field->id. '.'. $input_id];
$input_id++;
}
// Set choices to field
$field->choices = $choices;
$field->inputs = $inputs;
}
}
return $form;
}Поскольку идентификатор выбора должен начинаться с 1, мы запускаем переменную-счетчик перед циклом и добавляем 1 для каждого элемента в цикле и используем это вместе с идентификатором поля и точкой, как idв inputsмассиве.
Когда у нас есть два массива, мы устанавливаем их в поля choicesи inputsсвойства и возвращаем измененную форму.