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 fanno sì che i visitatori se ne vadano senza completare il modulo.

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 discesa 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 scelte a discesa.

In qualità di proprietario di un sito Web, puoi utilizzare i campi a discesa per creare moduli Web, come moduli di contatto, moduli di registrazione eventi, iscrizioni alla newsletter via email o moduli d'ordine di 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 semplificano l'impostazione della logica condizionale. L'elenco predefinito di opzioni ti consente di mostrare campi aggiuntivi in base alla selezione dell'utente senza ostacoli non necessari.
• ✂️ Lunghezza del modulo ridotta. Combinare più opzioni in un menu a discesa compatto rende il tuo modulo meno intimidatorio. Ciò può comportare una migliore esperienza utente.

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

Iniziamo!

Passaggio 1: Installazione del plugin WPForms

WPForms è il miglior plugin per moduli di contatto per WordPress. Ha 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 Plugin dalla tua bacheca di WordPress.

Nella schermata successiva, puoi utilizzare la barra di ricerca per trovare il plugin WPForms.

Una volta trovato, puoi fare clic 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 costruttore 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, è ora di scegliere come costruirai 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 desideri utilizzare il generatore 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 dettagliate, consulta la nostra guida 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 'Dropdown' e rilascialo sul lato destro del modulo (Suggerimento Pro: se hai solo 2-3 scelte, considera invece l'utilizzo dei pulsanti radio per una migliore esperienza utente).

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:

A destra del pannello, sarai in grado di vedere un campo a discesa sul tuo modulo di contatto. Quando fai clic sul campo, puoi accedere alle sue impostazioni. Puoi anche passarci sopra il mouse per vedere opzioni come:

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

Ecco come potrebbe apparire sullo schermo:

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 semplicemente clic sul campo a discesa nel pannello di anteprima. Questo aprirà automaticamente la scheda 'Opzioni campo' sulla sinistra.

Nella scheda ‘Generale’, compila i dettagli necessari:

• Etichetta. Per i menu a discesa, le etichette sono solitamente domande come ‘Vuoi iscriverti alla nostra newsletter?’ Si consiglia inoltre di aggiungere un testo segnaposto come ‘Seleziona un’opzione,’ per garantire che gli utenti scelgano una risposta anziché inviare accidentalmente l’opzione predefinita.
• 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 ti consente di mostrare o nascondere campi in base alle risposte precedenti di un utente. Questo mantiene i tuoi moduli brevi e ordinati mostrando i campi solo quando sono pertinenti.

L'impostazione della 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.

Affinché la logica condizionale funzioni, abbiamo prima bisogno del campo che apparirà o scomparirà in base alla scelta dell’utente. Torna alla scheda ‘Aggiungi campi’ e fai clic su ‘Menu a 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 uno ‘Smart Tag’, che estrae automaticamente informazioni dalle impostazioni di WordPress o dai campi del modulo stessi. Detto questo, puoi regolare le impostazioni in base alle tue esigenze.

Ad esempio, il campo ‘Invia all’indirizzo email’ ha il tag intelligente {admin_email}. Per impostazione predefinita, questo sarà l'indirizzo email dell'amministratore del tuo sito WordPress. Pertanto, 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 desideri 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 destinatari multipli.

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.

Se vedi un messaggio di avviso qui, significa che la tua ‘Email mittente’ non corrisponde al dominio del tuo sito web (ad esempio, utilizzando un indirizzo @gmail.com invece di @tuodominio.com).

Per evitare che le tue email di notifica finiscano nella cartella ‘Spam’, assicurati che l’‘Email mittente’ corrisponda al dominio del tuo sito web.

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 ‘Rispondi a’, puoi impostare dove andrà la tua risposta se rispondi all'email di notifica. Di solito dovresti impostarlo all'indirizzo email del visitatore.

Fai semplicemente clic su ‘Mostra Smart Tag’ e seleziona il campo ‘Email’ dal tuo modulo.

Ora, quando ricevi un invio e fai clic su “Rispondi” nella tua casella di posta elettronica, il tuo messaggio andrà direttamente al visitatore che ha compilato il modulo.

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’. Le notifiche sono avvisi email inviati dopo che qualcuno ha inviato il modulo, mentre le conferme sono i messaggi visualizzati sullo schermo che gli utenti vedono subito.

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 all'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 di contatto in una pagina

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. 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 della pubblicazione per assicurarci che tutto sia perfetto. Nell'editor dei 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

I campi a discesa sono incredibilmente versatili e possono essere utilizzati per molto più di semplici moduli di contatto.

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 consente agli utenti di personalizzare i prodotti, come 'Scegli il tuo colore', 'Seleziona la taglia' o 'Scegli la finitura'. Questo è perfetto per le pagine di prodotto WooCommerce o per moduli d'ordine personalizzati.
• 📅 Pianificazione appuntamenti – Piccole imprese o siti web di servizi possono sfruttare i menu a discesa 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à mentre incorpori mappe nei tuoi moduli. Questo può essere molto utile per servizi di consegna o elenchi di attività locali.
• ✏️ Moduli quiz – I menu a discesa sono perfetti anche per le domande a scelta multipla. Se gestisci 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?

Consigliamo WPForms come l'opzione migliore. 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.

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 trovarci anche su Twitter e Facebook.