Dopo aver inserito il titolo, clicca su Create Form<\/strong> 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.<\/p>\n 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:<\/p>\n 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.<\/p>\n 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.<\/p>\n Passo 1 – Campo Nome:<\/strong> Trascina il campo Name<\/strong> 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.<\/p>\n Passo 2 – Campo Email:<\/strong> Aggiungi il campo Email<\/strong> 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.<\/p>\n Passo 3 – Campo Telefono:<\/strong> Il campo Phone<\/strong> permette di raccogliere numeri di telefono con formattazione automatica. Puoi scegliere tra formato internazionale o personalizzato.<\/p>\n Passo 4 – Campo Oggetto:<\/strong> Utilizza un campo Single Line Text<\/strong> o un Drop Down<\/strong> per l’oggetto del messaggio. Un dropdown è particolarmente utile se vuoi categorizzare le richieste in arrivo (informazioni, preventivo, assistenza, altro).<\/p>\n Passo 5 – Campo Messaggio:<\/strong> Aggiungi un campo Paragraph Text<\/strong> per il corpo del messaggio. Puoi impostare un numero massimo di caratteri e un placeholder che guidi l’utente nella compilazione.<\/p>\n Passo 6 – Consenso Privacy:<\/strong> Per la conformità al GDPR, aggiungi un campo Consent<\/strong> con il testo relativo al trattamento dei dati personali. Rendilo obbligatorio per impedire l’invio del modulo senza il consenso esplicito.<\/p>\n Ogni campo di Gravity Forms offre una serie di opzioni di configurazione accessibili cliccando sul campo nell’editor. Le opzioni principali includono:<\/p>\n General:<\/strong> 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.<\/p>\n Appearance:<\/strong> 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.<\/p>\n Advanced:<\/strong> 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.<\/p>\n 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:<\/p>\n Metodo 1 – Drag-and-drop:<\/strong> 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.<\/p>\n Metodo 2 – Classi CSS:<\/strong> Puoi utilizzare le classi CSS predefinite di Gravity Forms. Aggiungi 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.<\/p>\n Oltre ai singoli campi, il modulo stesso ha una serie di impostazioni globali accessibili tramite la voce Settings<\/strong> nell’editor. Queste impostazioni si dividono in diverse sezioni:<\/p>\n Form Settings:<\/strong> 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.<\/p>\n Confirmations:<\/strong> 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.<\/p>\n Notifications:<\/strong> 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.<\/p>\n Prima di pubblicare il modulo, è fondamentale testarlo accuratamente. Gravity Forms offre un pulsante Preview<\/strong> nell’editor che apre il modulo in una nuova finestra del browser. Utilizza questa funzione per verificare:<\/p>\n 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.<\/p>\n 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:<\/p>\n Blocco Gutenberg:<\/strong> Se utilizzi l’editor a blocchi di WordPress, cerca il blocco Gravity Forms<\/strong> e seleziona il modulo dall’elenco dropdown. Questo è il metodo più semplice e consigliato.<\/p>\n Shortcode:<\/strong> Puoi utilizzare lo shortcode Widget Elementor:<\/strong> Se utilizzi Elementor, esiste un widget dedicato per Gravity Forms che permette di inserire e personalizzare il modulo direttamente nell’editor visuale di Elementor.<\/p>\n Codice PHP:<\/strong> Per gli sviluppatori, è possibile utilizzare la funzione Creare un modulo tecnicamente funzionante è solo metà del lavoro. Per massimizzare il tasso di completamento, segui queste best practice:<\/p>\n Seguendo queste linee guida, i tuoi moduli non saranno solo belli da vedere ma anche efficaci nel raccogliere le informazioni di cui hai bisogno.<\/p>\n 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.<\/p>\n Per qualsiasi domanda o per richiedere assistenza nella creazione dei tuoi moduli WordPress, non esitare a contattare il team di G Tech Group<\/a>.<\/p>\n Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n Creare il Primo Modulo con Gravity Forms: Editor Visuale Dopo aver installato e configurato Gravity Forms, è il momento di creare il tuo primo modulo.…<\/p>\n","protected":false},"author":0,"featured_media":167011,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Creare Modulo Gravity Forms: Editor Visuale | Guida","_seopress_titles_desc":"Come creare il primo modulo con Gravity Forms. Editor drag and drop, campi, layout e pubblicazione del form.","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[3409,2586,3328,3410,492],"class_list":["post-167029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","tag-editor","tag-form-builder","tag-gravity-forms","tag-modulo","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=167029"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167029\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167011"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Creazione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/gf-02-newform.png\")
<\/p>\nL’Interfaccia dell’Editor Visuale<\/h3>\n
\n
Creare un Modulo di Contatto Base<\/h3>\n
Configurare le Proprietà dei Campi<\/h3>\n
![\"Configurazione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/gf-03-settings.png\")
<\/p>\nLayout a Più Colonne<\/h3>\n
gf_left_half<\/code> al primo campo e gf_right_half<\/code> al secondo per creare un layout a due colonne. Per tre colonne, usa gf_left_third<\/code>, gf_middle_third<\/code> e gf_right_third<\/code>.<\/p>\nImpostazioni del Modulo<\/h3>\n
Anteprima e Test del Modulo<\/h3>\n
\n
Inserire il Modulo in una Pagina<\/h3>\n
[gravityform id=\"1\" title=\"true\" description=\"true\"]<\/code> sostituendo l’ID con quello del tuo modulo. Questo metodo funziona in qualsiasi editor e anche nei widget.<\/p>\ngravity_form(1, true, true)<\/code> nei template PHP per renderizzare il modulo programmaticamente.<\/p>\n![\"Elenco](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/gf-01-forms.png\")
<\/p>\nConsigli per Moduli Efficaci<\/h3>\n
\n
Prossimi Passi<\/h3>\n
Continua a Leggere: Guide WordPress Essenziali<\/h4>\n
\n
Migliora il Tuo Sito WordPress<\/h3>\n
\n