Creare il Primo Form con Fluent Forms: Editor Drag and Drop

Creare il Primo Form con Fluent Forms: Editor Drag and Drop

Dopo aver installato e configurato Fluent Forms sul tuo sito WordPress, è il momento di creare il tuo primo modulo. In questo articolo ti guideremo attraverso l’intero processo di creazione di un form utilizzando l’editor drag and drop di Fluent Forms, uno degli strumenti più intuitivi e potenti disponibili nel panorama dei form builder per WordPress.

Accedere all’Editor di Fluent Forms

Per iniziare a creare un nuovo modulo, dalla dashboard di WordPress vai su Fluent Forms → Tutti i Form e clicca sul pulsante Aggiungi un Nuovo Form in alto a destra. Si aprirà una finestra che ti offre diverse opzioni per partire:

• Form Vuoto: per partire da zero e costruire il modulo campo per campo
• Template Predefiniti: Fluent Forms offre decine di template già pronti per le situazioni più comuni, come moduli di contatto, iscrizione alla newsletter, richiesta preventivi, prenotazioni e molto altro
• Form Conversazionale: un tipo speciale di modulo che mostra una domanda alla volta, simile a Typeform

Per questa guida, partiremo da un form vuoto così potrai capire il funzionamento dell’editor nel dettaglio. Tuttavia, se hai fretta, i template predefiniti sono un ottimo punto di partenza che puoi personalizzare successivamente.

L’Interfaccia dell’Editor

L’editor di Fluent Forms è diviso in tre aree principali che rendono il flusso di lavoro estremamente efficiente:

• Pannello di sinistra: contiene tutti i campi disponibili, organizzati in categorie (Generali, Avanzati, Pagamento, ecc.). Da qui puoi trascinare i campi direttamente nell’area centrale
• Area centrale: è l’anteprima in tempo reale del tuo modulo. Qui puoi trascinare, riordinare e organizzare i campi. Cliccando su un campo, si apriranno le sue opzioni di configurazione
• Pannello di destra: appare quando selezioni un campo e mostra tutte le opzioni di personalizzazione per quel campo specifico, come etichetta, placeholder, validazione e altro

La barra superiore dell’editor contiene i pulsanti per salvare il modulo, visualizzare l’anteprima, accedere alle impostazioni del form e configurare le notifiche email.

Aggiungere i Campi al Modulo

Il processo di aggiunta dei campi è semplicissimo. Hai due opzioni:

1. Drag and Drop: trascina un campo dal pannello di sinistra e rilascialo nell’area centrale nella posizione desiderata
2. Click: clicca semplicemente su un campo nel pannello di sinistra e verrà aggiunto automaticamente in fondo al modulo

Per un modulo di contatto base, aggiungeremo i seguenti campi:

1. Campo Nome

Cerca il campo Nome nella sezione “Campi Generali” e trascinalo nell’area del modulo. Per default, Fluent Forms crea un campo nome composto da Nome e Cognome affiancati. Cliccando sul campo potrai personalizzare:

• L’etichetta del campo (es. “Nome Completo” o “I tuoi dati”)
• Se mostrare il campo come un unico input o diviso in Nome/Cognome
• Se aggiungere anche il prefisso e il secondo nome
• Se rendere il campo obbligatorio o facoltativo

2. Campo Email

Aggiungi il campo Email sotto al campo nome. Questo campo ha già una validazione integrata che verifica automaticamente il formato dell’indirizzo email inserito dall’utente. Nelle opzioni puoi:

• Personalizzare il messaggio di errore per email non valide
• Aggiungere un campo di conferma email
• Impostare un valore predefinito per gli utenti già registrati

3. Campo Oggetto

Aggiungi un campo Testo Singolo (Single Line Text) e personalizza l’etichetta cambiandola in “Oggetto”. Questo campo è perfetto per informazioni brevi come l’oggetto del messaggio, un numero di telefono o qualsiasi altro dato testuale su una singola riga.

4. Campo Messaggio

Per il corpo del messaggio, aggiungi un campo Area di Testo (Text Area). Questo campo permette all’utente di scrivere testi più lunghi su più righe. Nelle opzioni puoi configurare:

• Il numero di righe visibili inizialmente
• Il limite massimo di caratteri
• Il placeholder (es. “Scrivi qui il tuo messaggio…”)
• Se mostrare un contatore di caratteri

Personalizzazione dei Campi

Ogni campo in Fluent Forms offre due schede di personalizzazione: Generale e Avanzato.

Scheda Generale

Nella scheda Generale trovi le opzioni più comuni:

• Etichetta: il testo che appare sopra o accanto al campo
• Posizione dell’etichetta: sopra il campo, a sinistra, a destra o nascosta
• Placeholder: il testo grigio che appare all’interno del campo vuoto come suggerimento
• Testo di aiuto: una descrizione aggiuntiva sotto il campo per guidare l’utente
• Obbligatorio: se attivato, il modulo non potrà essere inviato senza compilare questo campo
• Messaggio di errore personalizzato: il testo mostrato quando la validazione fallisce

Scheda Avanzato

Nella scheda Avanzato trovi opzioni più specifiche:

• Valore predefinito: puoi precompilare il campo con un valore statico o dinamico (es. il nome dell’utente loggato)
• Classi CSS personalizzate: per applicare stili specifici al campo
• Attributo Name: l’identificativo tecnico del campo usato nei dati inviati
• Larghezza del container: puoi impostare la larghezza del campo in frazioni della riga (1/1, 1/2, 1/3, ecc.) per creare layout multi-colonna
• Logica condizionale: per mostrare o nascondere il campo in base al valore di altri campi

Layout Multi-Colonna

Fluent Forms permette di creare layout sofisticati senza dover scrivere codice. Ogni campo ha un’opzione Larghezza Container che ti permette di affiancare più campi sulla stessa riga. Ad esempio:

• Imposta il campo Nome a 1/2 e il campo Email a 1/2 per averli affiancati
• Usa 1/3 per tre campi sulla stessa riga
• Usa 2/3 + 1/3 per un campo più largo e uno più stretto

Puoi anche utilizzare il campo Container per raggruppare i campi in colonne e creare layout ancora più complessi con sezioni visivamente distinte.

Configurare il Pulsante di Invio

Il pulsante di invio è aggiunto automaticamente in fondo al modulo. Cliccandoci sopra, puoi personalizzare:

• Testo del pulsante: cambia “Submit” con qualcosa di più accattivante come “Invia il Messaggio”, “Richiedi Informazioni” o “Contattaci Ora”
• Testo durante l’invio: il testo che appare mentre il modulo sta elaborando l’invio (es. “Invio in corso…”)
• Stile del pulsante: colore di sfondo, colore del testo, bordi arrotondati, dimensioni
• Allineamento: sinistra, centro, destra o a larghezza piena

Impostazioni del Modulo

Prima di pubblicare il modulo, è fondamentale configurare le impostazioni. Clicca sull’icona Impostazioni e Integrazioni nella barra superiore dell’editor.

Conferma dopo l’Invio

Nella sezione Impostazioni del Form, puoi configurare cosa succede dopo che l’utente invia il modulo:

• Messaggio: mostra un messaggio di ringraziamento nella stessa pagina. Puoi personalizzare il testo con HTML e usare le variabili per inserire i dati del modulo
• Redirect: reindirizza l’utente a una pagina specifica (es. una pagina di ringraziamento personalizzata). Questa opzione è utile per il tracciamento delle conversioni con Google Ads o Analytics
• Mostra i dati: mostra all’utente un riepilogo dei dati che ha inserito

Impostazioni Anti-Spam

Nella stessa sezione puoi configurare le protezioni anti-spam per il modulo specifico:

• Attivare l’honeypot (consigliato sempre)
• Abilitare reCAPTCHA o hCaptcha
• Impostare un limite di invii (es. massimo 1 invio per IP ogni ora)
• Programmare la disponibilità del modulo (data e ora di inizio/fine)

Configurare le Notifiche Email

Vai nella sezione Notifiche Email per configurare le email che vengono inviate quando qualcuno compila il modulo. Per default, Fluent Forms crea una notifica per l’amministratore, ma puoi aggiungerne quante ne vuoi.

Notifica all’Amministratore

La notifica predefinita invia un’email all’amministratore con tutti i dati del modulo. Puoi personalizzare:

• Destinatario: uno o più indirizzi email, separati da virgola
• Oggetto: l’oggetto dell’email (puoi usare le variabili del form, es. “Nuovo messaggio da {inputs.nome}”)
• Corpo: il contenuto dell’email, personalizzabile con HTML e variabili
• CC/BCC: per inviare copie ad altri destinatari

Notifica all’Utente

Ti consigliamo di creare anche una notifica di conferma per l’utente che ha compilato il modulo. Clicca su Aggiungi Notifica e configura il destinatario con la variabile {inputs.email} per inviare automaticamente all’indirizzo email inserito nel form.

Inserire il Modulo nelle Pagine

Una volta salvato il modulo, hai diverse opzioni per inserirlo nelle pagine del tuo sito:

Shortcode

Ogni modulo ha uno shortcode unico del tipo [fluentform id=”1”] (dove 1 è l’ID del modulo). Puoi copiare questo shortcode e incollarlo in qualsiasi pagina, post o widget.

Blocco Gutenberg

Se usi l’editor a blocchi di WordPress (Gutenberg), cerca il blocco “Fluent Forms” e seleziona il modulo dal menu a tendina. Questo metodo è il più semplice e ti permette di vedere un’anteprima del modulo direttamente nell’editor.

Elementor Widget

Se usi Elementor come page builder, Fluent Forms è compatibile e offre un widget dedicato. Cerca “Fluent Forms” nella libreria dei widget di Elementor e trascinalo nella tua pagina.

Anteprima e Test

Prima di rendere il modulo pubblico, testa sempre il suo funzionamento. Usa il pulsante Anteprima nell’editor di Fluent Forms per vedere come apparirà il modulo nel frontend. Poi:

1. Compila tutti i campi con dati di test
2. Prova a inviare il modulo senza compilare i campi obbligatori per verificare che la validazione funzioni
3. Invia il modulo e verifica che le notifiche email arrivino correttamente
4. Controlla la submission nella sezione Entries di Fluent Forms

Suggerimenti per Moduli Efficaci

Per concludere, ecco alcuni suggerimenti basati sulla nostra esperienza per creare moduli che convertano:

• Meno è meglio: chiedi solo le informazioni strettamente necessarie. Ogni campo in più riduce il tasso di completamento
• Etichette chiare: usa etichette descrittive e in italiano. Evita termini tecnici o ambigui
• Placeholder utili: il placeholder deve dare un esempio concreto del dato richiesto (es. “mario.rossi@email.com”)
• Pulsante d’azione: il testo del pulsante deve indicare chiaramente cosa succederà (“Invia la Richiesta” è meglio di “Submit”)
• Feedback immediato: mostra un messaggio di conferma chiaro dopo l’invio

Conclusione

L’editor drag and drop di Fluent Forms rende la creazione di moduli un’esperienza piacevole e veloce. Non serve alcuna conoscenza di programmazione per creare moduli professionali, belli e funzionali. Nei prossimi articoli della serie approfondiremo tutti i campi disponibili, la logica condizionale e le funzionalità avanzate che rendono Fluent Forms uno dei migliori form builder per WordPress.

Se desideri assistenza nella creazione di moduli personalizzati per il tuo sito WordPress, o hai bisogno di una soluzione su misura per raccogliere dati, gestire prenotazioni o vendere prodotti online, contatta il team di G Tech Group. Ti aiuteremo a realizzare moduli professionali e ottimizzati per la massima conversione.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus