Creare Form di Contatto con Elementor Pro: Guida al Form Builder

Il Form Builder di Elementor Pro è uno degli strumenti più completi per creare moduli di contatto, form di iscrizione alla newsletter, questionari e form di lead generation direttamente all’interno dell’editor visuale. In questa guida vedremo passo passo come creare, personalizzare e ottimizzare i form con Elementor, dalle basi alle funzionalità avanzate come la logica condizionale e i form multi-step.

Panoramica del Form Builder

Il Form Builder è una funzionalità esclusiva di Elementor Pro. A differenza dei plugin dedicati ai form (come Contact Form 7 o WPForms), il Form Builder di Elementor è completamente integrato nell’editor visuale: puoi progettare il form con lo stesso approccio drag-and-drop che usi per il resto della pagina, garantendo coerenza stilistica perfetta. Non dovrai più preoccuparti di shortcode, styling separato o incompatibilità tra il design del plugin form e il resto del sito.

Le principali funzionalità includono:

• Oltre 15 tipi di campi diversi per ogni esigenza di raccolta dati
• Azioni post-invio configurabili (email, redirect, webhook, integrazioni CRM)
• Personalizzazione completa dello stile con il pannello visuale
• Form multi-step con barra di progresso per questionari e form complessi
• Logica condizionale per mostrare e nascondere campi dinamicamente
• Protezione anti-spam integrata con reCAPTCHA e honeypot

Creare un Form di Contatto Base: Passo Passo

Iniziamo con un classico form di contatto con nome, email, messaggio e pulsante di invio. Questo tipo di form è il più comune sui siti web aziendali e rappresenta il punto di partenza ideale per familiarizzare con lo strumento:

1. Apri una pagina con l’editor Elementor (o crea un nuovo template). Assicurati di avere Elementor Pro attivo
2. Nel pannello widget a sinistra, cerca “Form” e trascina il widget nella posizione desiderata sulla pagina. Il widget Form si trova nella categoria “Pro” del pannello
3. Il form viene inserito con tre campi predefiniti: Name, Email e Message. Clicca sul widget per aprire il pannello di configurazione e personalizza le etichette in italiano: “Nome”, “Email”, “Messaggio”
4. Clicca su ogni campo per configurarne le proprietà: etichetta visibile, testo placeholder (suggerimento grigio dentro il campo), obbligatorietà (attiva il toggle “Required”), larghezza della colonna (50% per nome e email affiancati, 100% per il messaggio)
5. Per il campo “Messaggio”, assicurati che il tipo sia impostato su Textarea e configura un numero minimo di righe visibili (consiglio: 4-5 righe) per dare all’utente spazio sufficiente per scrivere
6. Scorri fino alla sezione del pulsante di invio e configura: testo del pulsante (“Invia Messaggio” o “Contattaci”), dimensione (media o grande), allineamento (centrato o a destra), colori sfondo e testo, e opzionalmente un’icona (es. freccia o busta)
7. Nella sezione Actions After Submit, aggiungi l’azione “Email” per ricevere una notifica ogni volta che qualcuno compila il form. Questa è l’azione fondamentale senza la quale non riceverai i messaggi

Tutti i Tipi di Campo Disponibili

Il Form Builder offre un’ampia gamma di tipi di campo per ogni esigenza. Conoscerli tutti ti permetterà di creare form sofisticati per qualsiasi scenario:

• Text: campo di testo semplice su una riga, ideale per nome, cognome, azienda, indirizzo e qualsiasi informazione breve
• Email: campo con validazione automatica del formato email — Elementor verifica che l’indirizzo contenga @ e un dominio valido prima di permettere l’invio
• Tel: campo telefono con validazione del formato numerico, ottimo per raccogliere numeri di contatto con formattazione corretta
• Textarea: area di testo multiriga per messaggi lunghi, commenti e descrizioni dettagliate. Puoi configurare il numero di righe iniziali
• Select: menu a tendina con opzioni predefinite che l’utente può scegliere — perfetto per selezionare un servizio di interesse, una fascia di budget o un reparto
• Checkbox: caselle di spunta per selezioni multiple — l’utente può selezionare più opzioni contemporaneamente (es. “Quali servizi ti interessano?”)
• Radio: pulsanti di opzione per selezione singola esclusiva — l’utente può scegliere una sola opzione tra quelle disponibili
• Date: selettore di data con calendario popup interattivo, utile per prenotazioni e appuntamenti
• Time: selettore di orario con dropdown ore e minuti
• Upload: caricamento file con possibilità di impostare restrizioni su tipo di file accettato (PDF, JPG, PNG, DOC) e dimensione massima in MB
• Acceptance: checkbox singola per accettazione privacy policy e termini di servizio — essenziale per la conformità GDPR. Puoi inserire un link cliccabile alla tua informativa privacy
• Hidden: campo nascosto all’utente per raccogliere dati aggiuntivi automaticamente, come la pagina di provenienza ({page_url}), parametri UTM o l’ID di una campagna
• HTML: inserimento di codice HTML personalizzato all’interno del form per aggiungere testo formattato, avvisi o separatori visivi
• Step: divisore tra step per i form multi-passaggio — inserisci questo campo dove vuoi che il form passi alla schermata successiva
• Number: campo numerico con validazione min/max e incremento tramite frecce
• URL: campo per indirizzi web con validazione automatica del formato URL
• Password: campo con input mascherato da punti, utile per form di registrazione

Ogni campo supporta le seguenti proprietà comuni: etichetta personalizzata, testo placeholder, valore predefinito, larghezza colonna (25%, 33%, 50%, 66%, 75%, 100%), toggle di obbligatorietà e ID personalizzato per uso con CSS o JavaScript.

Azioni Dopo l’Invio (Actions After Submit)

Le Actions After Submit definiscono cosa succede quando l’utente compila e invia il form con successo. Puoi combinare più azioni contemporaneamente per automatizzare completamente il flusso di gestione dei contatti:

Email: Notifica all’Amministratore

Questa è l’azione fondamentale. Configura i seguenti campi: To (il tuo indirizzo email di ricezione, puoi inserire più indirizzi separati da virgola), Subject (es. “Nuovo contatto dal sito — [field id="name"]”), From Email (usa un indirizzo del tuo dominio per evitare problemi di deliverability), From Name (es. “Sito Web Aziendale”). Nel campo Message, usa gli shortcode dei campi per inserire tutti i dati compilati dall’utente: [field id="name"], [field id="email"], [field id="message"]. Puoi formattare il messaggio con HTML per renderlo più leggibile.

Email 2: Auto-Risposta all’Utente

Aggiungi una seconda azione Email per inviare una conferma automatica all’utente che ha compilato il form. Imposta il campo To con lo shortcode [field id="email"] per inviare l’email all’indirizzo inserito dall’utente, e scrivi un messaggio di ringraziamento personalizzato del tipo: “Grazie per averci contattato! Abbiamo ricevuto la tua richiesta e ti risponderemo entro 24 ore lavorative.” Questo migliora l’esperienza utente e conferma la ricezione del messaggio, riducendo le richieste duplicate.

Redirect

Reindirizza l’utente a una pagina di ringraziamento dedicata (thank you page) dopo l’invio del form. Questo è particolarmente utile per tracciare le conversioni con Google Analytics o Google Ads: puoi inserire il tag di conversione esclusivamente sulla pagina di thank you, garantendo che venga attivato solo al completamento effettivo del form.

Integrazioni CRM e Marketing

Il Form Builder si integra nativamente con numerose piattaforme di marketing automation e CRM per automatizzare la gestione dei lead:

• Mailchimp: iscrivi automaticamente i contatti a una lista o audience specifica, con supporto per gruppi e tag
• ActiveCampaign: aggiungi contatti al CRM e assegna tag, liste e automazioni in base ai campi compilati
• HubSpot: crea contatti nel CRM con mapping dei campi personalizzato per alimentare le tue pipeline di vendita
• Slack: invia una notifica in tempo reale in un canale quando qualcuno compila il form — perfetto per team che monitorano i lead
• Discord: simile a Slack, per community e team che usano Discord come piattaforma di comunicazione
• Webhook: invia i dati del form in formato JSON a qualsiasi URL endpoint per integrazioni personalizzate con Zapier, Make (ex Integromat), n8n o servizi custom
• Drip: integrazione con la piattaforma di email marketing orientata all’e-commerce
• ConvertKit: per creator e newsletter, con supporto per tag e sequenze

Personalizzare lo Stile del Form

Nel tab Stile del widget Form puoi personalizzare ogni aspetto visivo per integrare perfettamente il form nel design del tuo sito:

• Form → Spacing: distanza tra i campi (consiglio: 15-20px per un look arioso e leggibile)
• Label: posizione dell’etichetta (sopra il campo, inline a sinistra, nascosta per un look minimal), colore, tipografia e spaziatura
• Field: sfondo dei campi, stile e colore del bordo, border-radius per angoli arrotondati, padding interno, colore del testo digitato e colore del placeholder
• Button: colore di sfondo, colore testo, tipografia, padding, stile bordo, effetti al passaggio del mouse (hover), larghezza del pulsante (consiglio: 100% su mobile per facilitare il tap)
• Messages: stile e colore dei messaggi di successo (“Messaggio inviato con successo!”) e di errore (“Compila tutti i campi obbligatori”)

Per garantire coerenza con il design del sito, utilizza i colori e stili globali di Elementor invece di inserire valori hardcoded: in questo modo, se cambi il colore primario del brand, tutti i form si aggiorneranno automaticamente.

Form Multi-Step: Guidare l’Utente Passo Passo

I form lunghi con molti campi possono intimidire gli utenti e causare abbandoni. I form multi-step risolvono questo problema suddividendo il form in passaggi gestibili e più piccoli, con un incremento del tasso di completamento che può arrivare fino al 300% rispetto a un form lungo tradizionale:

1. Aggiungi i campi del primo step (es. Nome, Email, Telefono — le informazioni essenziali di contatto)
2. Inserisci un campo di tipo Step — questo crea un separatore visivo e un punto di passaggio tra le sezioni
3. Aggiungi i campi del secondo step (es. Servizio richiesto, Budget stimato, Messaggio dettagliato)
4. Puoi aggiungere altri separatori Step per ulteriori passaggi, senza limiti tecnici
5. Nelle impostazioni di ogni Step, configura: etichetta dello step visibile all’utente, icona personalizzata, tipo di navigazione con pulsanti Avanti e Indietro chiaramente etichettati
6. Attiva la barra di progresso visiva nella parte superiore del form oppure la numerazione degli step per orientare l’utente e comunicare quanto manca al completamento

I form multi-step sono particolarmente efficaci per form di richiesta preventivo, questionari di qualificazione lead, processi di onboarding clienti e survey di feedback post-acquisto.

Logica Condizionale (Show/Hide Campi)

La logica condizionale ti permette di mostrare o nascondere campi dinamicamente in base alle risposte dell’utente, rendendo il form più snello e pertinente. Ecco alcuni esempi pratici:

• Se l’utente seleziona “Azienda” nel campo tipo cliente, mostra i campi “Ragione Sociale” e “Partita IVA” che altrimenti restano nascosti
• Se seleziona “Altro” nel menu a tendina dei servizi, mostra un campo testo libero per specificare la richiesta
• Se seleziona “Sì” alla checkbox newsletter, mostra un campo select per scegliere gli argomenti di interesse
• Se la data selezionata è nel weekend, mostra un avviso che il servizio è disponibile solo nei giorni lavorativi

Per configurare la logica condizionale: clicca sul campo che vuoi rendere condizionale, vai nella sezione Avanzato del campo, attiva il toggle Conditional Logic e imposta le condizioni specificando: campo di riferimento, operatore (uguale, diverso, contiene, vuoto, non vuoto) e valore atteso. Puoi aggiungere condizioni multiple combinandole con operatori AND (tutte devono essere vere) o OR (almeno una deve essere vera).

Protezione Anti-Spam

Lo spam è un problema serio per qualsiasi form online. Il Form Builder include diverse opzioni per prevenire le compilazioni automatiche da parte dei bot:

• reCAPTCHA v2: il classico widget “Non sono un robot” con checkbox visibile. Semplice ma efficace, richiede un’interazione esplicita dell’utente
• reCAPTCHA v3: protezione completamente invisibile basata su un punteggio di rischio calcolato da Google, senza alcuna interazione richiesta all’utente — è la soluzione consigliata per non impattare l’esperienza utente
• Honeypot: un campo nascosto tramite CSS che solo i bot compilano, poiché i bot tendono a riempire tutti i campi disponibili. Leggero, invisibile agli utenti reali e senza dipendenze esterne

Per attivare reCAPTCHA, vai su Elementor → Impostazioni → Integrazioni e inserisci le chiavi API (Site Key e Secret Key) ottenute dalla console Google reCAPTCHA. Ti consigliamo di utilizzare sia reCAPTCHA v3 che Honeypot insieme per ottenere la massima protezione contro lo spam con il minimo impatto sull’esperienza utente.

Problemi Comuni e Debugging dei Form

Ecco i problemi più frequenti con i form Elementor e le soluzioni testate per risolverli rapidamente:

• Le email non arrivano: questo è il problema più comune. Prima controlla la cartella spam del tuo provider email. Se le email non arrivano nemmeno nello spam, il problema è probabilmente nel server che invia le email. La soluzione definitiva è configurare un plugin SMTP come WP Mail SMTP o FluentSMTP per inviare le email tramite un server SMTP autenticato (Gmail, SendGrid, Brevo) invece della funzione nativa wp_mail() di PHP, che molti hosting bloccano o limitano
• Errore “Questo modulo non può essere inviato”: spesso causato da conflitti con plugin di cache che memorizzano il token CSRF del form. Soluzione: escludi la pagina contenente il form dalla cache del plugin, oppure disabilita completamente la cache per le pagine con form attivi
• I file caricati non arrivano: controlla che i permessi della cartella wp-content/uploads/elementor/forms siano impostati correttamente (755 per le cartelle, 644 per i file). Verifica anche il limite di upload PHP nelle impostazioni del server (upload_max_filesize e post_max_size)
• Le integrazioni CRM non funzionano: verifica che le chiavi API siano corrette e aggiornate nelle Impostazioni di Elementor (Integrazioni) e controlla che i campi del form siano mappati correttamente ai campi del CRM di destinazione
• Il pulsante di invio non risponde: apri la console del browser (F12 → Console) per verificare se ci sono errori JavaScript. Spesso è causato da un conflitto con plugin di minificazione JS — prova a escludere gli script di Elementor dalla minificazione

Guide Correlate

Per approfondire le tematiche correlate ai form e alla lead generation con Elementor:

• Le Impostazioni di Elementor: Configurazione Completa
• Tutti i Widget di Elementor: Guida Completa
• Elementor e SEO: Ottimizzare le Pagine
• Design Responsive con Elementor
• Elementor Pro vs Free: Differenze e Upgrade

Hai bisogno di un form personalizzato per il tuo sito o di integrazioni avanzate con il tuo CRM? Il team di G Tech Group è specializzato nella realizzazione di siti web con Elementor. Contattaci per una consulenza gratuita e scopriremo insieme la soluzione migliore per le tue esigenze di lead generation.