In questo tutorial su Gravity Forms impareremo tre cose:
- Come aggiungere un input personalizzato a qualsiasi tipo di campo di tua scelta
- Come aggiungere impostazioni personalizzate al tuo modulo
- E infine come inviare in remoto i valori inviati per campi specifici dopo ogni invio di moduli.
Questo post presuppone che tu voglia aggiungere funzionalità a Gravity Forms per inviare una richiesta di post remota dopo ogni invio del modulo. All’interno del post remoto invierai i valori dal modulo, che sono personalizzabili con impostazioni aggiuntive nell’editor del modulo. Esempi comuni di dove ciò sarebbe utile sono l’invio, ad esempio, di nome ed e-mail a un elenco di newsletter di Mailchimp o qualsiasi altra integrazione di terze parti.
Il modo per risolvere questo problema in pratica è prima aggiungere impostazioni personalizzate a ciascun campo, in cui l’editor può digitare i nomi delle chiavi. La chiave e i relativi valori inviati verranno inviati a un URL di terze parti dopo ogni invio del modulo. Aggiungeremo anche un’impostazione in modo che tu possa scegliere per ogni modulo di attivare questo tipo di invio di terze parti.
Tutto il codice seguente può essere inserito nel codice del tuo tema functions.phpo del plugin.
Aggiunta di un input personalizzato ai campi
Il primo passaggio consiste nell’aggiungere l’input ai campi nell’editor dei campi in cui è possibile digitare il nome della chiave per questo valore. Includeremo e invieremo solo i valori in cui questo input è stato compilato.
Scegliere dove posizionare il tuo input
Gravity Forms offre hook che possiamo utilizzare per aggiungere elementi personalizzati nell’editor di campo. Il nome dell’hook dipende dalla scheda in cui vuoi che appaia il tuo campo.
- "Scheda Generale:
gform_field_standard_settings - Scheda "Aspetto":
gform_field_appearance_settings - Scheda "Avanzate":
gform_field_advanced_settings
In ogni hook avrai due parametri; posizione e ID modulo. Ogni impostazione Gravity Forms incorporata ha un numero di posizione fisso. Puoi confrontare questo numero per decidere esattamente dove vuoi che sia il tuo codice HTML personalizzato o input. Elencare tutte le impostazioni e la loro posizione sarebbe troppo lungo in questo post. Ma Gravity Forms aggiunge le loro impostazioni con incrementi di 5. Ad esempio, nella scheda Generale, "Etichetta campo" è in posizione 0 e "Descrizione" è in posizione 10. Mettere il tuo HTML in posizione 10 lo farà apparire dopo Descrizione. Non confrontare la posizione con un numero che non sia un moltiplicatore di 5.
Sto aggiungendo il mio campo personalizzato nella scheda Avanzate, nella posizione 50, che si trova subito dopo l’immissione di "Etichetta campo amministratore".
La maggior parte del codice sopra è autoesplicativo. Sto aggiungendo HTML nello stesso formato di Gravity Forms si aspetterebbe che ci sia un’impostazione. Tuttavia, sull’input stesso è necessario fornire una onchangefunzione Javascript. Gli diciamo semplicemente di eseguire la funzione di GravityForms per salvare le modifiche apportate al nostro input. La proprietà che forniamo in SetFieldProperty, thirdPartyInput, è importante da ricordare, all’interno di questa chiave è dove il nostro input personalizzato verrà salvato nell’array dei campi di Gravity Forms durante l’invio.
Aggiunta di una descrizione comando (opzionale)
Puoi fare un’altra cosa opzionale con il tuo input; aggiungi un suggerimento. Se lo desideri, aggiungi questa chiamata di funzione all’interno del codice che hai appena aggiunto e fornisci una chiave (unica) come stringa:
Quindi aggiungi un’altra funzione che si aggancia al filtro gform_tooltipse aggiungi il contenuto della descrizione comando alla chiave corrispondente, in questo modo:
L’aggiunta di una descrizione comando è completamente facoltativa, ma è un bel modo per spiegare ai proprietari del sito cosa fa questo input. Modifica il contenuto in base alle tue funzionalità.
Definire quali tipi di campo aggiungere il tuo input personalizzato
Potresti notare che il tuo campo non viene visualizzato in nessuna scheda Avanzate. Questo perché dobbiamo dire a Gravity Forms in quali tipi di campo vogliamo che appaia questo input. Di default non apparirà in nessuno.
Il modo in cui lo facciamo è in realtà con Javascript. GravityForms ha Javascript che nasconde automaticamente tutte le impostazioni e quindi sceglie di visualizzare quelle specifiche in base al tipo di campo. Quindi il nostro campo è lì, ma Gravity Forms lo ha semplicemente nascosto.
Ci colleghiamo gform_editor_jse dobbiamo fare due cose. Per prima cosa decidiamo in quali tipi di campo deve apparire l’input. E in secondo luogo ci assicuriamo che l’input venga popolato con il suo valore al caricamento.
Sto aggiungendo l’input ai tipi di campo text, textarea, email, phonee number. Ricorda di considerare come gestirai i valori dei campi inviati. Se scegli di consentire questo campo, ad esempio sul tipo di campo casella di controllo, devi essere in grado di analizzare e gestire correttamente i valori inviati.
Ora, finalmente, dovresti essere in grado di vedere il tuo input personalizzato nella scheda Avanzate, se il campo è di uno dei tipi forniti. Vedrai anche che è stato salvato correttamente e viene caricato con il valore salvato. Ogni volta che il modulo viene inviato d’ora in poi, se questo input è popolato, l’array del campo del modulo conterrà la proprietà thirdPartyInput.
Il passaggio successivo consiste nell’aggiungere un’impostazione al modulo stesso per attivare l’invio a terzi. Questo è facoltativo ma consigliato. Vogliamo evitare di eseguire codice non necessario o inviare qualcosa a terze parti quando non abbiamo intenzione di farlo.
Aggiunta di un’impostazione personalizzata alle impostazioni del modulo
L’aggiunta di impostazioni personalizzate alle impostazioni dei moduli è piuttosto semplice. Dobbiamo agganciarci al filtro gform_form_settingse aggiungere il nostro HTML con tutti gli input che desideri, quindi sul filtro gform_pre_form_settings_savee assicurarci che i nostri input personalizzati siano salvati nell’oggetto modulo.
Ecco come aggiungere un’impostazione personalizzata alle impostazioni del modulo:
Il filtro gform_form_settings prevede che le chiavi siano un’etichetta di sezione e quindi un array per ciascuna impostazione. Ne aggiungiamo solo uno con la chiave submit_3rd_party. All’input della casella di controllo usiamo il metodo di Gravity Forms rgar()per estrarre i valori di una data chiave da un array (il modulo), per assicurarci di recuperare il valore salvato del nostro campo. Modifica l’HTML in base alle tue esigenze.
Il campo verrà ora visualizzato nella parte inferiore delle impostazioni del modulo. Ma non salverà ancora le tue modifiche, quindi dobbiamo risolverlo:
add_filter('gform_pre_form_settings_save', function($form) {
$form['submit_3rd_party'] = rgpost('submit_3rd_party');
return $form;
}, 10, 2);
Questo pezzo di codice utilizza un altro dei metodi di supporto di Gravity Forms, rgpost(), per estrarre i valori inviati (da $_POST) e salvarli nell’array di moduli fornito con la chiave desiderata. Se aggiungi più impostazioni, dovrai ripetere l’operazione per ciascuna impostazione.
E questo è tutto ciò di cui abbiamo bisogno per aggiungere le impostazioni dei moduli personalizzati! Ogni volta che hai accesso all’oggetto modulo, puoi controllare il valore di $form['submit_3rd_party'].
Invia i valori inviati a terzi
Un buon hook da utilizzare per azioni personalizzate come l’esecuzione di una richiesta e l’invio di dati da un modulo inviato è gform_after_submission. A questo punto tutte le convalide sono passate ed è stato creato l’oggetto entry (reply). Con questo hook otteniamo l’accesso all’oggetto entry e all’oggetto form.
Quello che fai in questa azione dipende da te e da come devi estrarre i dati e come esegui la richiesta di post. Per quanto riguarda questo esempio, sto facendo una semplice richiesta di post utilizzando la funzione di WordPress wp_remote_post()con un array di tutti i campi che avevano compilato il nostro input personalizzato nel corpo.
Vedrai che prima controllo se il modulo ha attivato gli invii. Se ha il codice, scorre tutti i campi del modulo e controlla se ogni campo ha aggiunto qualcosa nel nostro input personalizzato. Se l’input non è effettivamente vuoto, il codice controlla anche se è stato inviato qualcosa per questo campo. Puoi rimuovere questo se-controlla se sei d’accordo a inviare valori vuoti.
La parte sull’URL e su come verranno inviati i dati è qualcosa che dovrai ovviamente adattare da solo. Puoi anche fare qualcosa con la risposta, ad esempio inviando un’e-mail in caso di errore o qualcosa del genere. Sta a te decidere come gestire la tua funzionalità.