I moduli sono essenziali per qualsiasi sito web, dai semplici moduli di contatto ai complessi flussi di registrazione a più fasi. Elementor Pro include un widget Modulo integrato che elimina la necessità di un plugin per moduli separato in molti casi. In questa guida, trattiamo come creare moduli di contatto, moduli di registrazione e moduli a più fasi utilizzando Elementor Pro, insieme alle opzioni di integrazione per il marketing via email e i servizi CRM.
Questo tutorial richiede Elementor Pro. La versione gratuita di Elementor non include il widget Modulo.
Panoramica del Widget Modulo di Elementor
Il widget Modulo di Elementor supporta questi tipi di campo:
| Tipo di Campo | Caso d'Uso | Note |
|---|---|---|
| Testo | Nome, azienda, oggetto | Input di testo su una riga |
| Raccolta indirizzi email | Include la validazione del formato email | |
| Textarea | Corpo del messaggio, commenti, descrizioni | Testo su più righe con righe configurabili |
| Tel | Numeri di telefono | Attiva la tastiera numerica su mobile |
| Numero | Quantità, budget, valutazioni | Validazione min/max/passo |
| URL | Indirizzi web | Validazione del formato URL |
| Seleziona | Selezioni a discesa (paese, categoria) | Selezione singola o multipla |
| Radio | Scelta singola tra opzioni (tipo di servizio) | Opzioni visibili senza menu a discesa |
| Checkbox | Selezioni multiple (interessi, servizi) | Selezioni multiple consentite |
| Data | Data degli appuntamenti, date degli eventi | Selettore di data nativo |
| Ora | Pianificazione degli appuntamenti | Controllo di selezione dell'ora |
| Caricamento File | Invio di curriculum, documenti, immagini | Tipi di file e limiti di dimensione configurabili |
| Accettazione | Termini e condizioni, consenso GDPR | Checkbox obbligatoria con link |
| Nascosto | Dati di tracciamento (URL della pagina, referrer) | Non visibile all'utente |
| reCAPTCHA | Protezione dallo spam | Checkbox v2 o invisibile v3 |
| Honeypot | Anti-spam (invisibile agli esseri umani) | Campo nascosto che cattura i bot |
Creare un Modulo di Contatto
Passo 1: Aggiungere il Widget Modulo
- Apri qualsiasi pagina nell'editor di Elementor
- Cerca "Modulo" nel pannello dei widget
- Trascina il widget Modulo nel tuo layout
- Il modulo predefinito include i campi Nome, Email e Messaggio
Passo 2: Configurare i Campi del Modulo
Per un modulo di contatto standard, questa configurazione dei campi funziona bene:
- Nome (Campo di testo, obbligatorio) – Segnaposto: "Il tuo nome"
- Email (Campo email, obbligatorio) – Segnaposto: "[email protected]"
- Oggetto (Campo di testo, facoltativo) – Segnaposto: "Come possiamo aiutarti?"
- Messaggio (Campo textarea, obbligatorio) – Segnaposto: "Raccontaci del tuo progetto...", Righe: 5
- reCAPTCHA o Honeypot per protezione dallo spam
Passo 3: Configurare le Azioni Dopo l'Invio
Sotto la sezione "Azioni Dopo l'Invio", configura cosa succede quando un utente invia il modulo: For related information, see our guide on Elementor complete guide.
- Email: Invia i dati del modulo al tuo indirizzo email (o a più indirizzi)
- Reindirizza: Invia l'utente a una pagina di ringraziamento dopo l'invio
- Popup: Mostra un popup di conferma
- Webhook: Invia i dati del modulo a un URL esterno (Zapier, Make, API personalizzata)
- Mailchimp / ConvertKit / Drip: Aggiungi iscritti alle liste di marketing via email
- Slack: Invia notifiche a un canale Slack
- Discord: Invia notifiche a un webhook di Discord
Passo 4: Stilizzare il Modulo
Nella scheda Stile, personalizza l'aspetto visivo: For related information, see our guide on Elementor templates and kits.
- Layout del modulo
- Tipi di campo: Campi impilati (a larghezza intera) o in linea (affiancati)
- Stile dei campi: Bordo, colore di sfondo, padding, raggio del bordo, colore dello stato di focus
- Stile delle etichette: Famiglia di font, dimensione, colore, spaziatura
- Stile dei pulsanti: Colore di sfondo, colore del testo, bordo, effetti al passaggio del mouse, opzione a larghezza intera
- Messaggi: Colori e tipografia dei messaggi di successo e errore
Creazione di un Modulo Multi-Passo
I moduli multi-passo sono utili per moduli lunghi (registrazioni, domande, sondaggi) dove mostrare tutti i campi contemporaneamente può sopraffare gli utenti. Elementor Pro supporta nativamente i moduli multi-passo. For related information, see our guide on creating landing pages with Elementor.
Come Impostare i Passi
- Aggiungi un widget Modulo alla tua pagina
- Nell'elenco dei campi del modulo, aggiungi un campo di tipo "Passo" tra i gruppi di campi
- Ogni campo Passo crea un nuovo passo con un pulsante "Avanti" e "Indietro"
- Struttura di esempio:
- Passo 1: Nome, Email, Telefono (Informazioni Personali)
- Passo 2: Azienda, Budget, Tempistiche (Dettagli del Progetto)
- Passo 3: Messaggio, Caricamento File (Informazioni Aggiuntive)
I moduli multi-passo mostrano un indicatore di progresso che indica in quale passo si trova l'utente. Questo riduce la complessità percepita e migliora i tassi di completamento rispetto a mostrare tutti i campi contemporaneamente.
Creazione di un Modulo di Registrazione Utente
Elementor Pro può creare moduli di registrazione utenti WordPress senza un plugin separato:
- Aggiungi un widget Modulo e configura i campi (Nome Utente, Email, Password)
- Sotto "Azioni Dopo l'Invio", aggiungi l'azione "Registrati"
- Collega ogni campo del modulo al corrispondente campo utente di WordPress
- Imposta il ruolo utente predefinito per le nuove registrazioni
- Facoltativamente, reindirizza gli utenti alla loro pagina account dopo la registrazione
Nota: WordPress richiede che un amministratore approvi i nuovi utenti per impostazione predefinita. Puoi modificare questa impostazione in Impostazioni → Generale → Iscrizione se desideri che gli utenti si registrino liberamente.
Integrazione con Servizi di Email Marketing
Elementor Pro si integra direttamente con le piattaforme di email marketing più popolari:
Servizio Tipo di Integrazione Passi di Configurazione Mailchimp Nativo (integrato) Aggiungi chiave API → Seleziona lista → Collega campi ConvertKit Nativo (integrato) Aggiungi chiave API → Seleziona modulo → Collega campi ActiveCampaign Nativo (integrato) Aggiungi credenziali API → Seleziona lista → Collega campi Drip Nativo (integrato) Aggiungi token API → Seleziona account → Collega campi GetResponse Nativo (integrato) Aggiungi chiave API → Seleziona campagna → Collega campi MailerLite Nativo (integrato) Aggiungi chiave API → Seleziona gruppo → Collega campi HubSpot Via Webhook Crea connessione Zapier/Make con azione webhook Per ogni integrazione, il processo è: inserisci la chiave API del tuo servizio nelle impostazioni di integrazione di Elementor, quindi seleziona il servizio come "Azione Dopo l'Invio" nel tuo modulo. Collega i campi del tuo modulo ai campi del servizio, e gli iscritti verranno aggiunti automaticamente quando il modulo viene inviato.
Strategie di Protezione dallo Spam
I moduli di contatto attirano bot spam. Elementor Pro offre diverse opzioni di prevenzione dello spam:
- Google reCAPTCHA v3: Rilevamento spam invisibile che valuta le sottomissioni senza interazione dell'utente. Raccomandato per la maggior parte dei moduli
- reCAPTCHA v2: La casella di controllo "Non sono un robot". Più visibile ma può ridurre i completamenti del modulo
- Campo Honeypot: Un campo invisibile che i bot compilano. Se il campo contiene dati, la sottomissione viene rifiutata. Nessuna interazione dell'utente richiesta
- Campo di Accettazione: Una casella di controllo obbligatoria (consenso GDPR, accettazione dei termini) che funge anche da deterrente per i bot
Consigliamo di utilizzare reCAPTCHA v3 combinato con un campo Honeypot. Questo fornisce due livelli di protezione dallo spam senza alcun impatto visibile o
nella user experience.
Elementor Forms vs Plugin di Forme Dedicati
Caratteristica Elementor Forms Gravity Forms WPForms Costruttore Visivo All'interno dell'editor di Elementor Drag-and-drop separato Drag-and-drop separato Logica Condizionale Base (mostra/nascondi campi) Avanzata Avanzata Integrazione Pagamenti Pulsante PayPal Stripe, PayPal, Square Stripe, PayPal, Square Calcoli No Sì Sì (Pro) Multi-Passo Sì Sì Sì Caricamento File Sì Sì Sì Gestione Ingressi Via invii di Elementor Gestore ingressi completo Gestore ingressi completo Richiede Page Builder Sì (Elementor Pro) No No Elementor Forms è sufficiente per moduli di contatto, iscrizioni a newsletter e moduli di registrazione semplici. Per moduli complessi che richiedono elaborazione dei pagamenti, logica condizionale avanzata o gestione sofisticata degli ingressi, i plugin di moduli dedicati come Gravity Forms o WPForms sono più appropriati.
Domande Frequenti
Posso usare i moduli di Elementor senza Elementor Pro?
No. Il widget Form è esclusivo di Elementor Pro. Se hai bisogno di moduli con la versione gratuita di Elementor, utilizza un plugin di moduli separato come Contact Form 7 (gratuito), WPForms Lite (gratuito) o Gravity Forms (premium).
Dove vengono memorizzati gli invii dei moduli di Elementor?
Gli invii dei moduli sono memorizzati nel database di WordPress e accessibili sotto Elementor → Ingressi nel pannello di amministrazione. Puoi visualizzare, esportare (CSV) e eliminare gli invii. Gli invii vengono anche inviati agli indirizzi email che configuri nell'azione Email.
I moduli di Elementor possono accettare caricamenti di file?
Sì. Aggiungi un campo di tipo Caricamento File al tuo modulo. Puoi configurare i tipi di file accettati (PDF, JPG, PNG, DOCX, ecc.) e la dimensione massima del file. I file caricati sono memorizzati nella libreria media di WordPress e collegati all'invio del modulo.
Come aggiungo logica condizionale ai moduli di Elementor?
Elementor Pro supporta la logica condizionale di base: mostra o nascondi campi in base al valore di un altro campo. Nelle impostazioni del campo, abilita "Condizionale" e imposta le condizioni (ad esempio, mostra il campo "Azienda" solo quando è selezionato il pulsante di opzione "Sono un'azienda"). Per logica condizionale avanzata (calcoli, condizioni multi-livello), un plugin di moduli dedicato potrebbe essere più adatto.
Posso creare moduli popup con Elementor?
Sì. Crea un modello popup in Elementor, aggiungi un widget Form al suo interno e imposta le condizioni di attivazione (clic, percentuale di scorrimento, intenzione di uscita, ritardo di tempo). Questo è utile per iscrizioni a newsletter, lead magnet e offerte promozionali senza aggiungere un modulo al layout principale della pagina.
Come posso prevenire lo spam sui moduli di Elementor?
Utilizza Google reCAPTCHA v3 (invisibile) combinato con un campo Honeypot per una protezione a due livelli. Questo blocca i bot automatizzati senza aggiungere attrito per gli utenti reali. Per moduli con un alto volume di spam, considera di aggiungere un campo di Accettazione (checkbox obbligatoria) come terzo livello.
Ottieni Elementor Pro con il Costruttore di Moduli
Accedi al widget Form, Theme Builder, WooCommerce Builder e oltre 100 widget Pro. Crea moduli visivamente senza plugin aggiuntivi.
Esplora Elementor Pro →
