Creare il Primo Modulo con Gravity Forms: Editor Visuale
Dopo aver installato e configurato Gravity Forms, è il momento di creare il tuo primo modulo. L’editor visuale di Gravity Forms è uno degli strumenti più intuitivi nel panorama dei form builder per WordPress: grazie alla sua interfaccia drag-and-drop, anche chi non ha competenze tecniche può realizzare moduli professionali in pochi minuti. In questa guida esploreremo ogni aspetto dell’editor, dalla creazione di un nuovo modulo all’inserimento nella pagina.
Accedere all’Editor di Gravity Forms
Per creare un nuovo modulo, accedi al pannello di amministrazione di WordPress e vai su Forms > New Form. Gravity Forms ti chiederà di assegnare un titolo al modulo e, opzionalmente, una descrizione. Il titolo è importante perché verrà mostrato agli utenti nella parte superiore del form, a meno che tu non decida di nasconderlo tramite le impostazioni. La descrizione può essere utilizzata per fornire istruzioni generali su come compilare il modulo.
Dopo aver inserito il titolo, clicca su Create Form per accedere all’editor visuale. Ti troverai davanti a un’interfaccia divisa in due aree principali: sulla destra c’è il pannello dei campi disponibili, sulla sinistra l’area di anteprima dove trascinerai i campi per costruire il modulo.
L’Interfaccia dell’Editor Visuale
L’editor visuale di Gravity Forms è progettato per essere immediato e funzionale. Nella parte superiore trovi la barra degli strumenti con le opzioni per salvare, visualizzare l’anteprima e accedere alle impostazioni del modulo. Il pannello laterale destro organizza i campi in categorie logiche:
- Standard Fields: Campi di testo, paragrafo, dropdown, caselle di spunta, radio button e altro.
- Advanced Fields: Nome, email, indirizzo, sito web, telefono, data, ora e campi file upload.
- Post Fields: Campi specifici per la creazione di post WordPress (titolo, corpo, categoria, tag, immagine).
- Pricing Fields: Campi per prodotti, opzioni, quantità, totale e spedizione.
Per aggiungere un campo al modulo, basta trascinarlo dal pannello laterale all’area di anteprima. Puoi riorganizzare l’ordine dei campi semplicemente trascinandoli nella posizione desiderata. Ogni campo può essere configurato cliccandoci sopra: si aprirà un pannello di opzioni che permette di personalizzare etichetta, placeholder, validazione e molto altro.
Creare un Modulo di Contatto Base
Iniziamo con un esempio pratico: la creazione di un modulo di contatto professionale. Questo tipo di modulo è il più comune e rappresenta un ottimo punto di partenza per familiarizzare con l’editor.
Passo 1 – Campo Nome: Trascina il campo Name dalla sezione Advanced Fields. Questo campo è composto da più sotto-campi (nome, cognome, prefisso) che puoi attivare o disattivare secondo le tue esigenze. Per un modulo di contatto standard, mantieni attivi solo Nome e Cognome.
Passo 2 – Campo Email: Aggiungi il campo Email dalla sezione Advanced Fields. Questo campo include automaticamente la validazione del formato email, garantendo che l’utente inserisca un indirizzo valido. Puoi abilitare l’opzione di conferma email per richiedere all’utente di digitare l’indirizzo due volte.
Passo 3 – Campo Telefono: Il campo Phone permette di raccogliere numeri di telefono con formattazione automatica. Puoi scegliere tra formato internazionale o personalizzato.
Passo 4 – Campo Oggetto: Utilizza un campo Single Line Text o un Drop Down per l’oggetto del messaggio. Un dropdown è particolarmente utile se vuoi categorizzare le richieste in arrivo (informazioni, preventivo, assistenza, altro).
Passo 5 – Campo Messaggio: Aggiungi un campo Paragraph Text per il corpo del messaggio. Puoi impostare un numero massimo di caratteri e un placeholder che guidi l’utente nella compilazione.
Passo 6 – Consenso Privacy: Per la conformità al GDPR, aggiungi un campo Consent con il testo relativo al trattamento dei dati personali. Rendilo obbligatorio per impedire l’invio del modulo senza il consenso esplicito.
Configurare le Proprietà dei Campi
Ogni campo di Gravity Forms offre una serie di opzioni di configurazione accessibili cliccando sul campo nell’editor. Le opzioni principali includono:
General: Qui puoi modificare l’etichetta del campo, aggiungere una descrizione, impostare il campo come obbligatorio e definire un valore predefinito. L’etichetta è il testo che appare sopra il campo, mentre la descrizione fornisce informazioni aggiuntive sotto il campo.
Appearance: Questa sezione permette di personalizzare l’aspetto del campo. Puoi aggiungere un placeholder (testo grigio che appare all’interno del campo vuoto), scegliere la posizione dell’etichetta (sopra, a sinistra, nascosta) e impostare la dimensione del campo.
Advanced: Le opzioni avanzate includono il valore predefinito, la visibilità (tutti, solo admin), la classe CSS personalizzata e la logica condizionale. Il campo CSS Class è particolarmente utile per applicare stili personalizzati a campi specifici.
Layout a Più Colonne
Gravity Forms permette di creare layout a più colonne per rendere i moduli più compatti e professionali. Ci sono due metodi per ottenere questo risultato:
Metodo 1 – Drag-and-drop: Nelle versioni più recenti di Gravity Forms, puoi semplicemente trascinare un campo accanto a un altro per creare una riga multi-colonna. L’editor mostra automaticamente le guide di posizionamento.
Metodo 2 – Classi CSS: Puoi utilizzare le classi CSS predefinite di Gravity Forms. Aggiungi gf_left_half al primo campo e gf_right_half al secondo per creare un layout a due colonne. Per tre colonne, usa gf_left_third, gf_middle_third e gf_right_third.
Il layout a colonne è particolarmente efficace per campi brevi come Nome e Cognome, Città e CAP, o Data e Ora. Evita però di usarlo per campi che richiedono input lunghi come il messaggio di testo.
Impostazioni del Modulo
Oltre ai singoli campi, il modulo stesso ha una serie di impostazioni globali accessibili tramite la voce Settings nell’editor. Queste impostazioni si dividono in diverse sezioni:
Form Settings: Qui puoi modificare il titolo e la descrizione del modulo, scegliere il posizionamento delle etichette (sopra i campi, a sinistra o a destra), configurare il testo del pulsante di invio e molto altro.
Confirmations: Definisci cosa succede dopo l’invio del modulo. Puoi mostrare un messaggio di conferma, reindirizzare l’utente a una pagina specifica o mostrare il contenuto di una pagina WordPress esistente.
Notifications: Configura le email automatiche inviate dopo ogni submission. Puoi creare notifiche multiple: una per l’amministratore del sito e una di conferma per l’utente che ha compilato il modulo.
Anteprima e Test del Modulo
Prima di pubblicare il modulo, è fondamentale testarlo accuratamente. Gravity Forms offre un pulsante Preview nell’editor che apre il modulo in una nuova finestra del browser. Utilizza questa funzione per verificare:
- Il layout e l’aspetto visivo del modulo.
- La validazione dei campi obbligatori.
- Il funzionamento della logica condizionale (se configurata).
- Il messaggio di conferma dopo l’invio.
- La ricezione delle notifiche email.
Testa il modulo compilandolo sia correttamente che con dati errati per verificare che i messaggi di errore siano chiari e utili. Controlla anche la versione mobile del modulo, poiché una percentuale sempre maggiore di utenti naviga da smartphone.
Inserire il Modulo in una Pagina
Dopo aver creato e testato il modulo, devi inserirlo in una pagina o in un post del tuo sito. Gravity Forms offre diversi metodi per farlo:
Blocco Gutenberg: Se utilizzi l’editor a blocchi di WordPress, cerca il blocco Gravity Forms e seleziona il modulo dall’elenco dropdown. Questo è il metodo più semplice e consigliato.
Shortcode: Puoi utilizzare lo shortcode [gravityform id="1" title="true" description="true"] sostituendo l’ID con quello del tuo modulo. Questo metodo funziona in qualsiasi editor e anche nei widget.
Widget Elementor: Se utilizzi Elementor, esiste un widget dedicato per Gravity Forms che permette di inserire e personalizzare il modulo direttamente nell’editor visuale di Elementor.
Codice PHP: Per gli sviluppatori, è possibile utilizzare la funzione gravity_form(1, true, true) nei template PHP per renderizzare il modulo programmaticamente.
Consigli per Moduli Efficaci
Creare un modulo tecnicamente funzionante è solo metà del lavoro. Per massimizzare il tasso di completamento, segui queste best practice:
- Meno campi possibili: Ogni campo aggiuntivo riduce la probabilità di completamento. Chiedi solo le informazioni strettamente necessarie.
- Campi obbligatori chiari: Marca chiaramente quali campi sono obbligatori con l’asterisco rosso.
- Etichette descrittive: Usa etichette chiare e concise che non lascino dubbi su cosa inserire.
- Placeholder intelligenti: Utilizza i placeholder per mostrare il formato atteso (es. +39 xxx xxx xxxx per il telefono).
- Feedback immediato: Abilita la validazione in tempo reale per segnalare errori mentre l’utente compila il modulo.
- Call to action efficace: Personalizza il testo del pulsante di invio con un’azione specifica come “Richiedi Preventivo” invece del generico “Invia”.
Seguendo queste linee guida, i tuoi moduli non saranno solo belli da vedere ma anche efficaci nel raccogliere le informazioni di cui hai bisogno.
Prossimi Passi
Ora che hai creato il tuo primo modulo con Gravity Forms, sei pronto per esplorare le funzionalità più avanzate. Nel prossimo articolo della serie analizzeremo nel dettaglio tutti i tipi di campi disponibili, scoprendo come sfruttare al massimo ogni field type per creare moduli sempre più sofisticati e personalizzati.
Per qualsiasi domanda o per richiedere assistenza nella creazione dei tuoi moduli WordPress, non esitare a contattare il team di G Tech Group.
Continua a Leggere: Guide WordPress Essenziali
Migliora il Tuo Sito WordPress
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress: