Guida completa: come popolare dinamicamente i campi nei moduli di gravità
Costruire moduli semplici o complessi in Gravity Forms è facile e veloce. Una delle funzionalità offerte da Gravity Forms ti consente di preselezionare o precompilare condizionalmente i campi in un modulo. Ciò è utile quando si dispone dello stesso modulo su più pagine di contatto per ciascun reparto e si desidera preselezionare il reparto corrispondente nel modulo. Oppure stai incorporando un modulo di richiesta nelle pagine di prodotti o servizi e desideri precompilare automaticamente le informazioni sul prodotto o servizio corrente in ogni invio.
Puoi preselezionare o precompilare dinamicamente i campi in diversi modi e puoi anche sostituire dinamicamente le possibili scelte in un menu a discesa, pulsante di opzione o gruppo di caselle di controllo. Il campo che popola dinamicamente può essere un campo visibile che l’utente può modificare, oppure può essere instradato in un campo nascosto in modo che il lettore degli invii del modulo ottenga informazioni vitali.
I quattro modi per popolare dinamicamente i campi
In questa guida esamineremo quattro modi per popolare dinamicamente i campi in un modulo Gravity Forms. Tre di loro che puoi fare senza toccare alcun codice! Ma se vuoi modificare dinamicamente le possibili scelte in un gruppo di selezione, pulsante di opzione o caselle di controllo, dovrai scrivere del codice PHP. Vedremo come farlo alla fine.
Puoi popolare dinamicamente i campi in base a:
- Aggiunta di informazioni aggiuntive nell’URL.
- Fornisci ulteriori informazioni allo shortcode di incorporamento di Gravity Forms.
- Definizione di informazioni extra per Gravity Forms Block (se stai usando WordPress con Gutenberg).
- Utilizzo di filtri con codice PHP.
Ma prima dobbiamo esaminare come attivare la popolazione dinamica di un campo.
Attivazione di un campo per consentire la popolazione dinamica
Il primo passaggio, indipendentemente dal metodo utilizzato per popolare il campo, è attivarlo sul campo stesso.
Nella modifica del modulo, espandi il campo e all’interno della scheda "Avanzate", troverai una casella di controllo "Consenti il riempimento dinamico del campo". Spunta questa opzione e viene visualizzato un nuovo input di testo che ti consente di definire il nome del parametro. Questo può essere tutto quello che vuoi, ma dovrebbe essere unico e senza spazi.
Salva il modulo ed è pronto per te decidere quale metodo utilizzare per compilarlo.
Popolamento dinamico dai parametri URL
Puoi aggiungere parametri GET al collegamento alla pagina che incorpora il modulo, ad esempio se il collegamento si trova all’interno di un altro testo del post o è un collegamento personalizzato nei menu di WordPress.
Aggiungi semplicemente le variabili di query in coppie di valori chiave, con il nome del parametro come chiave e il loro valore come vuoi che sia il loro valore. È possibile aggiungere più coppie di valori chiave se si desidera popolare più campi nel modulo, è sufficiente separare ciascuna coppia con "&".
Supponendo che il tuo modulo esista in questa pagina: " https://example.com/contact-me/", e il nome del tuo parametro sia awp_populate_me, puoi compilare il campo utilizzando questo URL: " https://example.com/contact-me/?awp_populate_me=Hello".
Tieni presente che gli URL devono essere codificati correttamente. Ad esempio, non puoi semplicemente aggiungere spazi o caratteri speciali direttamente come valore del parametro. Fornire "Ciao mondo!" come valore sarebbe ” Hello%20world%21“. Ci sono molti strumenti online per codificare gli URL per te se desideri procedere in questo modo.
Popolamento dinamico da shortcode
Tutti i moduli vengono inseriti tramite uno shortcode. Puoi popolare dinamicamente i campi direttamente all’interno di questo shortcode. Questo metodo potrebbe essere utile se stai utilizzando lo stesso modulo in più post (ad es. registrando i partecipanti a diversi eventi o corsi) e devi fornire qualcosa di unico per sapere da quale evento o corso proviene il modulo……
Normalmente quando si incorpora un modulo, si ottiene uno shortcode simile a questo:[gravityforms id="1" title="Contact us"]
Modifica lo shortcode e aggiungi il set di chiavi field_valuesa una stringa che contiene il nome del parametro uguale al valore desiderato. Ad esempio, l’impostazione di un parametro awp_populate_mesu "Hello World" viene eseguita in questo modo:
[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World"]Se devi compilare più campi, aggiungi una "&" in mezzo, in questo modo:
[gravityforms id="1" title="Contact us" field_values="awp_populate_me=Hello World&awp_another_field=Hello to you too"]Popolamento dinamico da Block a Gutenberg
Se hai GravityForms versione 2.4.13+ e WordPress con Gutenberg (WordPress 5+), puoi aggiungere Gravity Forms come blocco. All’interno di questo blocco hai anche un metodo per popolare i campi.
Aggiungi il blocco "Moduli" in Gutenberg e scegli il tuo modulo. Il blocco dovrebbe trasformarsi in un’anteprima del modulo. Nel pannello di destra espandi Avanzate e troverai un’area di testo denominata "Valori campo". In quest’area di testo puoi digitare i nomi e i valori dei parametri, proprio come faresti con lo shortcode. Es. ” awp_populate_me=Hello World!“
Popolamento dinamico dal codice
E infine, se preferisci popolare i tuoi campi usando il codice PHP, ci sono filtri per questo. Puoi inserire questo codice nel tuo tema functions.php.
Il modo in cui lo codifichi dipende dal tipo di campo; come probabilmente puoi intuire il popolamento (sostituendo tutte le scelte) in una selezione, le caselle di controllo o il gruppo radio devono essere gestiti in modo diverso rispetto alla semplice compilazione di un singolo campo di testo.
Compilazione di un campo a valore singolo
La compilazione di un campo che ha un unico valore (questo si applica a campo di testo, area di testo, campo di posta elettronica, campo di telefono e simili) può essere eseguita facilmente filtrando gform_field_value_<parameter name>. Nel nostro esempio:
add_filter('gform_field_value_awp_populate_me', function($value) {
return 'Hello world!';
});È inoltre possibile utilizzare questo filtro per preselezionare un’opzione in un campo multivalore, ad esempio seleziona (elenco a discesa), pulsanti di opzione o caselle di controllo.
Popolamento di un pulsante di selezione o di opzione
Se sei semplicemente interessato a preselezionare un’opzione, segui la guida sopra per compilare un campo a valore singolo. Questo codice è pensato per personalizzare o sostituire le possibili scelte che ottieni sul campo.
Filtri di rendering dei moduli di Gravity Forms
Il gform_pre_renderfiltro ci consente di modificare il modulo subito prima che venga visualizzato. Ma quando apportiamo modifiche qui, dovremmo assicurarci che le nostre modifiche vengano applicate in tutti i casi; quindi dobbiamo anche agganciarci gform_admin_pre_render(filtro pre_render corrispondente ma influisce sull’amministratore/modifica del modulo), gform_pre_validation(responsabile della convalida del modulo prima dell’invio) e gform_pre_submission_filter(filtro dopo la convalida ma prima che l’immissione venga salvata). Non preoccuparti, utilizziamo la stessa funzione per tutti questi filtri.
Puoi filtrarli direttamente oppure puoi fornire un trattino basso e l’ID modulo dopo il nome del filtro, per filtrare solo un modulo specifico. Ad esempio gform_pre_render_1, verrebbe eseguito solo su un modulo con ID modulo 1.
Come argomento di tutti questi filtri ottieni l’oggetto modulo, in cui puoi ottenere l’ID modulo (metodo alternativo all’aggiunta dell’ID modulo al filtro) e tutti i suoi campi. I campi del modulo sono una matrice di Fieldoggetti, ma tutto ciò di cui dobbiamo preoccuparci è sostituire la choicesproprietà del campo corretto.
Cambiare le scelte
Il tipo di dati con cui vuoi sostituire le scelte dipende interamente da te, ma la choicesproprietà di un campo necessita di un array che abbia gli elementi "testo" e "valore". Per esempio ['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;
}Il codice precedente filtra solo l’ID modulo di 1. Inizia scorrendo i campi del modulo. È importante notare la "&" prima dell’elemento nel ciclo, che lo sta passando per riferimento. Ciò significa che se apportiamo modifiche a $field, viene applicato e salvato direttamente nel file $form['fields'].
Il secondo passaggio riguarda il campo che ha il nome del parametro che vogliamo scegliere come target. Per ogni campo questa è la inputNameproprietà. Puoi utilizzare altri metodi per scegliere come target i campi, ad esempio il suo ID (id) o la classe CSS (cssClass). Quando abbiamo trovato il nostro campo, dobbiamo generare l’array sostitutivo per le scelte e impostarlo $field->choicessu questo. Nell’esempio sopra interrogo tutte le pagine e le scorre per generare un array formattato corretto.
Non dimenticare di restituire $formalla fine, poiché si tratta di un filtro.
Vale la pena ricordare che questo filtro si applica anche al modulo di modifica (perché filtriamo gform_admin_pre_render). Ma ricorda che non puoi più manipolare le scelte nella modifica del modulo: semplicemente non salverà le modifiche perché questo codice lo sovrascriverà sempre.
Popolamento delle caselle di controllo
Lo menzionerò di nuovo; se sei semplicemente interessato a preselezionare una casella di controllo, segui la guida sopra per compilare un campo a valore singolo. Per quanto riguarda la sostituzione di tutte le scelte nelle caselle di controllo, il processo è molto simile al popolamento di un pulsante di selezione o di opzione sopra, ma con alcune piccole differenze. Consiglio di guardare prima la spiegazione sopra per i pulsanti di selezione e di opzione.
Usi gli stessi filtri e il processo di avvio è lo stesso; scorri i campi del modulo e trovi quello che desideri. Tuttavia, con le caselle di controllo è necessario sostituire due proprietà nell’oggetto campo; choicese inputs. La choicesproprietà prevede la stessa matrice di un pulsante di selezione o di opzione.
La inputproprietà prevede un array con elementi ‘ label‘ e ‘ id‘. È labelautoesplicativo e dovrebbe essere identico textall’array delle scelte. L’ idelemento deve seguire le regole dell’ID Gravity Forms; concatenando l’ID del campo, un punto e l’ID della scelta, iniziando con 1 (ad es. se l’ID del campo è 2 e l’ID della scelta è 3, il valore corretto 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;
}Poiché l’ID di scelta deve iniziare da 1, iniziamo una variabile contatore prima del ciclo e aggiungiamo 1 per ogni elemento nel ciclo, e lo usiamo insieme all’ID campo e un punto come idnell’array inputs.
Quando abbiamo i nostri due array, li impostiamo sul campo choicese sulle inputsproprietà e restituiamo il modulo modificato.