Come Creare Moduli WordPress con Campi a Menu a Tendina (Metodo Facile)

I visitatori iniziano a compilare il tuo modulo di contatto, poi improvvisamente lo abbandonano a metà. È una delle esperienze più frustranti per qualsiasi proprietario di sito web, specialmente quando sai che quei lead potrebbero trasformare la tua attività.

La verità è che i moduli lunghi intimidiscono gli utenti e creano attriti inutili nel tuo processo di conversione.

Dopo anni di aiuto ai proprietari di siti WordPress nell'ottimizzazione dei loro moduli, abbiamo scoperto che l'uso di campi a menu a tendina può migliorare i tassi di completamento dei moduli.

Inoltre, questi semplici elementi non solo risparmiano prezioso spazio sullo schermo, ma guidano anche gli utenti a fornire esattamente le informazioni che devi sapere su di loro.

In questo tutorial, ti mostreremo il modo più semplice per creare moduli WordPress con campi a menu a tendina che i visitatori desiderano effettivamente completare.

Cosa Sono i Campi a Menu a Tendina e Perché Usarli?

Un campo a menu a tendina consente agli utenti di scegliere un'opzione da un elenco predefinito di diverse varianti. Gli utenti possono semplicemente fare clic sul campo per vedere tutte le opzioni a tendina.

Come proprietario di un sito web, puoi utilizzare i campi a menu a tendina per creare moduli web, come moduli di contatto, moduli di registrazione eventi, iscrizioni a newsletter via email o moduli di ordinazione prodotti.

I campi a discesa possono migliorare l'efficacia del tuo modulo. Ecco alcuni vantaggi:

• Coerenza. L'elenco fisso di opzioni mantiene coerenti i dati raccolti e previene inserimenti non validi. Ciò rende l'analisi dei dati più accurata.
• Campi dinamici. I campi a discesa facilitano l'impostazione della logica condizionale. L'elenco fisso di opzioni ti consente di mostrare campi aggiuntivi in base alla selezione dell'utente senza ostacoli non necessari.
• Lunghezza ridotta del modulo. Combinare più opzioni in un menu a discesa compatto rende il tuo modulo meno intimidatorio. Ciò può comportare una migliore esperienza utente.

Detto questo, diamo un'occhiata a come creare moduli con campi a discesa in WordPress. Ecco una rapida panoramica dei passaggi che tratteremo in questo tutorial:

• Passaggio 1: Installazione del miglior plugin per moduli di contatto
• Passaggio 2: Creazione di un nuovo modulo utilizzando WPForms
• Passaggio 3: Aggiunta del campo a discesa al tuo modulo
• Passaggio 4: Configurazione dei menu a discesa con opzioni e logica condizionale
• Passaggio 5: Personalizzazione delle notifiche e delle conferme del modulo
• Passaggio 6: Incorporamento del modulo in WordPress
• Passaggio 7: Pubblicazione del nuovo modulo sul tuo sito WordPress
• Suggerimento bonus: modi creativi per utilizzare i campi a discesa
• Domande frequenti: utilizzo dei campi a discesa nei moduli WordPress
• Risorse aggiuntive: padroneggia i tuoi moduli WordPress

Iniziamo!

Passaggio 1: Installazione del miglior plugin per moduli di contatto

WPForms è il miglior plugin per moduli di contatto per WordPress. Dispone di strumenti AI e oltre 2.000 modelli, che ti aiutano a creare moduli in pochi clic.

Noi di WPBeginner utilizziamo WPForms per creare i nostri moduli di contatto, sondaggi annuali degli utenti e richieste di migrazione, e non potremmo essere più soddisfatti!

Sentiti libero di scoprire tutte le sue funzionalità nella nostra recensione completa di WPForms.

Quindi, installiamo e attiviamo il plugin WPForms. Puoi andare su Plugin » Aggiungi Nuovo Plugin dalla tua bacheca di WordPress.

Nella schermata successiva, puoi usare il pulsante di ricerca per trovare il plugin WPForms. Una volta trovato, puoi cliccare su ‘Installa Plugin’ e poi su ‘Attiva’.

Per istruzioni dettagliate, puoi leggere la nostra guida su come installare un plugin WordPress.

Passaggio 2: Creazione di un nuovo modulo utilizzando WPForms

Dopo l'attivazione, dovresti vedere un menu WPForms nella tua area di amministrazione di WordPress, in questo modo:

Ora sarai in grado di accedere all'interfaccia del builder di WPForms e creare moduli con campi a discesa.

Per iniziare a creare un nuovo modulo, puoi andare su WPForms » Aggiungi Nuovo.

Ora vedrai il pannello ‘Configurazione’ all'interno del builder di moduli WPForms. In questo pannello, la prima cosa che dovrai fare è dare un nome al tuo modulo.

Ad esempio, puoi digitare ‘Modulo di Contatto Semplice’ o semplicemente ‘Modulo di Contatto’ nel campo ‘Dai un nome al tuo modulo’.

Una volta fatto ciò, è ora di scegliere come costruire il tuo modulo WordPress.

Con WPForms, puoi creare da zero, scegliere un modello predefinito o utilizzare il builder di moduli basato sull'intelligenza artificiale.

Se vuoi usare il builder di moduli AI, tutto ciò che devi fare è inserire un semplice prompt. L'IA genererà quindi il modulo per te in pochi secondi.

Per questa guida, tuttavia, useremo ‘Modulo di Contatto Semplice’.

Per utilizzare un modello di modulo, tutto ciò che devi fare è passare il mouse su quello desiderato e fare clic su ‘Usa modello’.

Per istruzioni passo passo, consulta la nostra guida dettagliata su come creare un modulo di contatto in WordPress.

Passaggio 3: Aggiunta del campo a discesa al tuo modulo

Dopo aver completato il processo di configurazione, verrai reindirizzato al costruttore di moduli, dove c'è un elenco di campi a sinistra e un'anteprima live a destra.

Ora, vogliamo aggiungere un campo a discesa al nostro modulo di contatto.

Trascina semplicemente ‘A discesa’ e rilascialo sul lato destro del modulo.

A destra del pannello, potrai vedere un campo a discesa nel tuo modulo di contatto. Puoi passare il mouse sul campo per accedere alle sue impostazioni, che includono:

• Un pulsante di copia
• Un pulsante di eliminazione
• Un'istruzione ‘Fai clic per modificare’
• Un'istruzione ‘Trascina per riordinare’

Utilizzando la funzione di trascinamento, spostiamo il campo a discesa sopra ‘Commento o Messaggio’.

Avendo il campo paragrafo ‘Commento o Messaggio’ subito prima del pulsante di invio, offri un flusso migliore per il processo di completamento del modulo. Rende anche il tuo campo a discesa più visibile in modo che gli utenti non lo trascurino.

Passaggio 4: Configurazione dei menu a discesa con opzioni e logica condizionale

In questo passaggio, imposterai l'etichetta, le opzioni e la descrizione del tuo campo a discesa. Il tuo elenco di opzioni dovrebbe allinearsi con il tipo di modulo. Poiché stiamo creando un modulo di contatto, offriamo un'opzione di iscrizione alla newsletter.

Fai clic sul tuo campo a discesa e quindi vai su ‘Opzioni campo’.

Nella scheda ‘Generale’, compila i dettagli necessari:

• Etichetta. Nei campi a discesa, le etichette sono solitamente domande. Useremo ‘Vuoi iscriverti alla nostra newsletter?’ come esempio.
• Scelte. Aggiungiamo ‘Sì, grazie.’ e ‘No, grazie.’
• Descrizione. Puoi lasciare ‘Puoi disiscriverti in qualsiasi momento.’ in questo campo.
• Obbligatorio. Attiva questa opzione per richiedere ai visitatori di completare questo campo.

Successivamente, impostiamo la logica condizionale.

La logica condizionale significa prendere decisioni con istruzioni ‘se’ e ‘allora’. Quando utilizzata nei moduli, decide cosa succede dopo in base alla risposta fornita da un utente.

Impostare la logica condizionale rende i moduli più facili da completare. Mostrando solo le opzioni pertinenti in base alle selezioni precedenti, il tuo modulo non sopraffà gli utenti con scelte non necessarie.

In questo esempio, visualizzeremo un campo aggiuntivo se gli utenti scelgono l'opzione ‘Sì, grazie.’. Permetteremo agli iscritti di scegliere la frequenza con cui desiderano ricevere email promozionali.

Prima di ciò, dovrai preparare un nuovo campo. Torna alla scheda ‘Aggiungi Campi’ e fai clic su ‘Discesa’ o su qualsiasi altro tipo di campo. Quindi, completa i dettagli del nuovo campo.

Ecco un esempio:

Ora che il nuovo campo è pronto, fai clic su di esso e naviga alla scheda ‘Logica Intelligente’.

Da qui, puoi attivare la logica condizionale attivando l'opzione ‘Abilita Logica Condizionale’.

Una volta attivata, puoi configurare la logica condizionale per il tuo nuovo campo.

Inizia scegliendo di ‘Mostrare’ o ‘Nascondere’ il nuovo campo. Quindi, seleziona un campo esistente e un input dell'utente.

Ecco la nostra configurazione come riferimento: ‘Mostra’ questo campo se ‘Desideri iscriverti alla nostra newsletter’ è ‘Sì, grazie’.

Passaggio 5: Personalizzazione delle notifiche e delle conferme del modulo

È ora di personalizzare il tuo nuovo modulo.

Puoi iniziare impostando notifiche email ogni volta che un nuovo utente invia un modulo. Vai su Impostazioni » Notifiche e attiva l'opzione 'Abilita notifiche'.

Quindi, scorri i dettagli della notifica predefinita del tuo modulo sotto l'interruttore.

Alcune voci nel campo 'Notifica predefinita' hanno 'Smart Tag'. Questo tag presuppone dove inviare le notifiche di invio del modulo, tra le altre cose. Detto questo, puoi regolare le impostazioni in base alle tue esigenze.

Ad esempio, il campo 'Indirizzo email inviato a' ha lo 'Smart Tag' {admin_email}. Per impostazione predefinita, questa sarà l'email dell'amministratore del tuo sito WordPress. Quindi, tutte le notifiche di invio del modulo andranno nella casella di posta dell'email dell'amministratore.

Puoi aggiungere altri destinatari, come il tuo specialista di email marketing. Assicurati solo di separare ogni email con una virgola.

Se vuoi imparare come inviare l'email del tuo modulo a più persone o a diversi reparti, leggi la nostra guida su come creare un modulo di contatto con più destinatari.

Successivamente, la copia predefinita per la tua 'Oggetto email' è 'Nuovo invio: Nome del tuo modulo'. Tuttavia, puoi cambiare l'oggetto a tuo piacimento purché sia facile da identificare.

Gli utenti che inviano un modulo dovrebbero ricevere una notifica nelle loro email. Il campo 'Nome mittente' informa gli utenti chi invia l'email di notifica.

Il campo successivo è 'Email mittente', e lo 'Smart Tag' per questo campo è {admin_email}.

Con questa impostazione predefinita, gli utenti riceveranno email di notifica dall'email dell'amministratore del tuo sito.

La parte evidenziata ti informa che l'indirizzo email dell'amministratore del tuo sito si trova su un dominio diverso, ad esempio @gmail.com. Ciò può causare problemi di recapito, come ad esempio che le email finiscano nella casella 'Spam'.

Puoi leggere la nostra guida su come configurare WP Mail SMTP per assicurarti che le tue email finiscano nella casella di posta dei lettori.

Per ogni email di notifica inviata, il destinatario ha anche la possibilità di rispondere ad essa.

Nel campo 'Reply-To' (Rispondi a), puoi impostare quale indirizzo email riceverà le risposte degli utenti. Il 'Tag Intelligente' di questo campo è {field_id= “1”}. Ciò significa che le risposte degli utenti verranno inviate allo stesso indirizzo email di quello presente nel campo 'Email Mittente' (From Email).

Infine, il campo ‘Messaggio e-mail’ ha il tag intelligente {all_fields}. Pertanto, il tuo messaggio e-mail conterrà i campi del modulo insieme alle risposte dell'utente.

Una volta terminate le personalizzazioni delle notifiche, vai su ‘Conferme’. In questa sezione, imposterai come visualizzare la conferma dopo l'invio del modulo.

Innanzitutto, puoi scegliere ‘Messaggi’, ‘Mostra pagina’ o ‘Vai a URL (Reindirizzamento)’ come tipo di conferma.

Se scegli ‘Messaggio’ come tipo di conferma, visualizzerai un messaggio di conferma per far sapere agli utenti che hai ricevuto le loro richieste di modulo.

Con questo tipo di conferma, puoi modificare il messaggio predefinito per adattarlo al tuo brand. Vai al campo ‘Messaggio di conferma’ e digita il tuo messaggio personalizzato nella casella di testo.

Se scegli ‘Mostra pagina’, dovrai selezionare una pagina esistente sul tuo sito WordPress. E se opti per ‘Vai a URL (Reindirizzamento)‘, inserirai un URL di pagina.

Prima di passare al passaggio successivo, fai clic su ‘Salva’ in modo da non perdere i tuoi progressi.

Fatto ciò, sei pronto per visualizzare il tuo nuovo modulo sul tuo sito WordPress.

Passaggio 6: Incorporamento del modulo in WordPress

Per visualizzare il tuo nuovo modulo sul tuo sito WordPress, puoi utilizzare la procedura guidata ‘Incorpora’ all'interno del costruttore di moduli WPForms.

Questo attiverà la finestra pop-up ‘Incorpora in una pagina’. Su di essa, puoi scegliere ‘Seleziona pagina esistente’ o ‘Crea nuova pagina’, a seconda di ciò che è pertinente per te.

In questo esempio, procediamo con ‘Selezione pagina esistente’.

Il passaggio successivo è scegliere la pagina in cui desideri visualizzare il tuo nuovo modulo.

Fai semplicemente clic sul menu a discesa e scegli una pagina web esistente. Una volta fatto ciò, fai clic su ‘Iniziamo!’.

Questo ti reindirizzerà all'editor a blocchi di WordPress.

Da qui, devi fare clic sul pulsante '+' per aggiungere un blocco WPForms.

Puoi digitare 'WPForms' nella barra di ricerca e dovresti vedere il blocco WPForms nei risultati di ricerca.

Continua e fai clic per aggiungerlo.

Dopo aver aggiunto il blocco WPForms, vedrai un menu a discesa sulla tua pagina.

Fai semplicemente clic sul menu a discesa e scegli un modulo dall'elenco. Selezioniamo 'Modulo di contatto' poiché è il modulo che abbiamo appena creato.

Passaggio 7: Pubblicazione del nuovo modulo sul tuo sito WordPress

In questa fase finale, visualizziamo in anteprima il modulo prima di pubblicarlo per assicurarci che tutto sia perfetto. Nell'editor di contenuti di WordPress, fai clic su Visualizza » Anteprima in una nuova scheda.

Se vuoi, puoi anche visualizzare in anteprima come appare il modulo su tablet e dispositivi mobili. Tutto quello che devi fare è fare clic su Visualizza » Tablet o Mobile » Anteprima in una nuova scheda.

Infine, se non sono necessarie ulteriori modifiche, puoi procedere e fare clic su 'Aggiorna'.

Congratulazioni! Hai aggiunto con successo il tuo nuovo modulo di contatto con campi a discesa sul tuo sito web WordPress.

Ecco come appariva sul nostro sito demo:

Suggerimento bonus: Modi creativi per utilizzare i campi a discesa

Sai cosa c'è di incredibile nei campi a discesa? Sono molto più versatili di quanto la maggior parte delle persone pensi!

Dopo anni di creazione di siti web, abbiamo scoperto alcuni modi davvero intelligenti per utilizzare i menu a discesa che vanno oltre i soliti moduli di contatto. Ecco alcuni dei nostri casi d'uso creativi preferiti per trarre ispirazione:

🛍️ Configuratori di Prodotti – Questo permette agli utenti di personalizzare i prodotti, come ‘Scegli il tuo colore’, ‘Seleziona la taglia’ o ‘Scegli una finitura’. È perfetto per le pagine prodotto di WooCommerce o per moduli d'ordine personalizzati.

📅 Pianificazione Appuntamenti – Piccole imprese o siti web di servizi possono sfruttare i menu a tendina a cascata per fasce orarie e date. Questo è particolarmente utile per sistemi di prenotazione o richieste di consulenza.

🗺️ Servizi basati sulla posizione – Puoi aggiungere menu a discesa per la selezione di paese, stato e città durante l'incorporamento di mappe nei tuoi moduli. Questo può essere super utile per servizi di consegna o directory di attività locali.

✏️ Moduli per quiz – I menu a discesa sono perfetti anche per le domande a scelta multipla. Se stai gestendo un corso online, puoi utilizzare questi campi per mantenere tutto ordinato e organizzato!

Soprattutto, puoi sempre personalizzare e stilizzare ulteriormente i tuoi moduli WordPress, in modo che si integrino con il design del tuo sito web.

Domande frequenti: utilizzo dei campi a discesa nei moduli WordPress

Ecco le risposte ad alcune delle domande più comuni sull'utilizzo dei campi a discesa in WordPress.

Qual è il miglior plugin per creare moduli con campi a discesa?

Raccomandiamo WPForms come la migliore opzione. I suoi strumenti AI velocizzano il processo, il costruttore drag-and-drop è super facile da usare e il campo a discesa è incluso anche nella versione gratuita WPForms Lite.

Per funzionalità avanzate come la logica condizionale, la versione WPForms Pro è un ottimo aggiornamento.

Posso aggiungere campi a discesa ai miei moduli gratuitamente?

Sì! Il plugin gratuito WPForms Lite include il campo a discesa standard, che ti consente di creare moduli organizzati e facili da usare senza spendere un centesimo.

I campi a discesa sono ottimizzati per dispositivi mobili?

Assolutamente. Quando utilizzi un plugin di qualità come WPForms, tutti i campi del modulo sono completamente reattivi. Ciò significa che i menu a discesa si adattano automaticamente per apparire al meglio e funzionare senza problemi su desktop, tablet e smartphone.

Posso usare immagini come scelte nei miei campi modulo?

WPForms Pro include una funzionalità 'Scelte di immagini' per pulsanti radio e caselle di controllo. Sebbene questa opzione non sia disponibile per i menu a discesa, consente agli utenti di scegliere tra opzioni visive, perfetta per la selezione di prodotti e moduli simili.

Risorse aggiuntive: padroneggia i tuoi moduli WordPress

Speriamo che questa guida ti abbia aiutato a imparare come creare moduli WordPress con campi a discesa. Se l'hai trovata utile, ecco alcune guide selezionate per aiutarti a ottenere di più da essi:

• Come personalizzare e stilizzare i tuoi moduli WordPress
• Come usare un modulo di contatto per far crescere la tua lista email
• Come bloccare lo spam dei moduli di contatto in WordPress 
• Come monitorare e ridurre l'abbandono dei moduli in WordPress
• Guida definitiva all'uso dei moduli WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.