Повний посібник: як динамічно заповнювати поля у формах Gravity

Створення простих або складних форм у Gravity Forms легко та швидко. Однією з функціональних можливостей, які пропонує Gravity Forms, є можливість умовного попереднього вибору або попереднього заповнення полів у формі. Це корисно, якщо у вас є одна і та сама форма на кількох сторінках контактів для кожного відділу та потрібно попередньо вибрати відповідний відділ у формі. Або ви вставляєте форму запиту на сторінки продуктів або послуг і хочете автоматично заповнювати інформацію про поточний продукт або послугу в кожній заявці.

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

Чотири способи динамічного заповнення полів

У цьому посібнику ми розглянемо чотири способи динамічного заповнення полів у формі Gravity Forms. Три з них ви можете зробити, не торкаючись жодного коду! Але якщо ви хочете динамічно змінювати можливі варіанти вибору, групи перемикачів або прапорців, вам потрібно буде написати PHP-код. Ми розглянемо, як це зробити в самому кінці.

Ви можете динамічно заповнювати поля:

• Додавання додаткової інформації в URL.
• Надайте додаткову інформацію до короткого коду для вбудовування Gravity Forms.
• Визначення додаткової інформації для блоку Gravity Forms Block (якщо ви використовуєте 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 world!» як значення буде " 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"]

Динамічне заповнення з Block у Gutenberg

Якщо у вас є GravityForms версії 2.4.13+ і WordPress із Gutenberg (WordPress 5+), ви можете додати Gravity Forms як блок. У цьому блоці також є метод для заповнення полів.

Додайте блок «Форми» в Gutenberg і виберіть свою форму. Блок має перетворитися на попередній перегляд форми. На правій бічній панелі розгорніть «Додатково», і ви знайдете текстове поле з позначкою «Значення поля». У цьому текстовому полі ви можете вводити назви параметрів і значення так само, як ви вводите короткий код. Наприклад ” 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'].

Наведений вище код фільтрує лише ідентифікатор форми 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; об’єднання ідентифікатора поля, крапки та ідентифікатора вибору, починаючи з 1 (наприклад, якщо ідентифікатор поля дорівнює 2, а ідентифікатор вибору – 3, правильним idє ” 2.3“).

Оскільки ідентифікатори вибору повинні починатися з 1, ми запускаємо змінну лічильника перед циклом і додаємо 1 для кожного елемента циклу, і використовуємо це разом з ідентифікатором поля та крапкою, як idу inputsмасиві.

Коли у нас є два масиви, ми встановлюємо їх у поля choicesта inputsвластивості та повертаємо змінену форму.