Come progettare un modulo ad fisarmonica in WordPress

Stai cercando un modo semplice per aggiungere un design di modulo ad fisarmonica al tuo sito web WordPress?

I moduli ad fisarmonica offrono un modo intuitivo e accessibile per presentare dati complessi mantenendo un aspetto pulito e organizzato.

In questo articolo, ti mostrerò il modo più semplice per progettare un modulo ad fisarmonica per migliorare la funzionalità e l'esperienza utente del tuo sito web.

Prima di optare per il design a fisarmonica, conta i tuoi campi totali. La formattazione a fisarmonica eccelle quando riduce la lunghezza percepita del modulo del 60% o più, rendendo gestibili moduli lunghi e intimidatori.

Come progettare un modulo ad fisarmonica in WordPress

Per creare un modulo di design a fisarmonica in WordPress, puoi affidarti alla semplicità e alla funzionalità di WPForms. Segui i passaggi seguenti per iniziare:

1. Installa e Attiva WPForms

La prima cosa che faremo è installare e attivare WPForms, un plugin avanzato e facile da usare per la creazione di moduli di ogni tipo.

Viene fornito con oltre 2.100 modelli di moduli WordPress e un sacco di funzionalità per potenziare il tuo sito.

Per iniziare, vai su WPForms e registrati. Tieni presente che per questo tutorial utilizzeremo una licenza Pro, ma puoi usare qualsiasi livello di licenza desideri.

Hai bisogno di aiuto per installare WPForms sul tuo sito web? Dai un'occhiata a questo tutorial su come installare plugin WordPress. Una volta installato il plugin, non dimenticare di attivarlo!

Dopo aver completato questo passaggio, installeremo WPCode e aggiungeremo lo snippet di codice che crea lo stile a fisarmonica.

2. Aggiungi lo snippet di codice per la fisarmonica

Per far funzionare la magia del modulo a fisarmonica, dobbiamo installare il plugin WPCode, che funziona con WPForms. Assicurati di completare entrambe le parti di questo passaggio: installare WPCode e aggiungere lo snippet di codice per la fisarmonica.

Quando installi il plugin WPCode su WordPress, avrai accesso a una libreria speciale di snippet di codice solo per gli utenti WPForms. Non dimenticare di attivare il plugin dopo averlo installato!

Dopo aver installato WPCode dal repository dei plugin di WordPress, torna a WPForms. Ora attiveremo uno snippet di codice in WPForms.

Dal tuo pannello di controllo WordPress, naviga su WPForms » Strumenti nella barra di navigazione laterale sinistra. In quella pagina, seleziona la scheda Snippet di codice.

Nota che se non hai WPCode installato, non vedrai l'opzione Snippet di codice. Scorri o usa la funzione di ricerca per individuare lo snippet Accordion Template Helper.

Fai clic sul pulsante Installa snippet .

Dopo aver fatto clic per installarlo, si aprirà una pagina che mostra lo snippet di codice. L'unica cosa che devi fare in questa pagina è attivare lo snippet e fare clic su Aggiorna.

Ora sei pronto per creare il tuo modulo!

3. Crea un nuovo modulo WordPress

Dal tuo pannello di amministrazione di WordPress, vai su WPForms e fai clic su Aggiungi nuovo dall'elenco delle opzioni.

Successivamente, dai un nome al tuo modulo. Puoi selezionare un modello esistente in base ai tuoi requisiti specifici, ma ai fini di questo tutorial, inizieremo con un modulo vuoto. Questo ti darà una migliore idea di come creare il formato accordion.

Verrai ora indirizzato alla schermata Campi, dove i campi disponibili appaiono nel pannello di sinistra. Quelli a cui hai accesso dipenderanno dal tuo livello di licenza.

Nel pannello di destra, vedrai un'anteprima modificabile del tuo modulo. Se hai selezionato un modulo vuoto, non preoccuparti che non ci sia nulla con cui iniziare. Trascinerai e rilascerai i tuoi elementi del modulo lì, e non rimarrà vuoto per molto tempo!

Costruisci il tuo modulo usando divisori di sezione

Mentre inizi a costruire il tuo modulo, pensa a come vuoi raggruppare le informazioni. Cioè, quali informazioni vuoi includere nel menu a discesa quando l'accordion del modulo viene aperto?

Per ciascuna di queste sezioni, devi aggiungere un campo divisore di sezione. Dai al campo il nome che desideri per quella sezione di informazioni. Il nostro esempio è un modulo di candidatura, quindi inizieremo con le informazioni di contatto in alto.

Una volta che il divisore di sezione è in posizione, puoi trascinare e rilasciare tutti gli elementi del modulo desiderati sotto di esso nel modo che preferisci.

Aggiungi interruzioni di pagina

Una volta che tutti i tuoi campi sono al loro posto, aggiungi un campo Interruzione di pagina alla fine di ciascuna delle tue sezioni del modulo.

Nota: quando aggiungi l'interruzione di pagina iniziale, fai clic su di essa per aprire le opzioni del campo. Sul lato sinistro, vedrai un menu a discesa dove puoi apportare modifiche all'indicatore di progresso. Seleziona Nessuno. Devi farlo solo una volta per modulo.

Se perdi questo passaggio, l'accordion funzionerà comunque, ma ci sarà una barra di avanzamento inattiva nella parte superiore del modulo quando sarà attiva. Dopo aver aggiunto l'interruzione di pagina, ripeti il processo per tutte le sezioni che il tuo modulo avrà.

Se lo visualizzi in anteprima adesso, sembrerà un modulo multipagina e non un accordion.  Non preoccuparti; stiamo per aggiungere l'ingrediente magico: una classe CSS!

4. Aggiungi la classe CSS al tuo modulo

A questo punto, dovresti aver creato l'intero modulo. Ogni sezione del tuo modulo dovrebbe iniziare con un divisore di sezione e terminare con un'interruzione di pagina. Queste sezioni diventeranno i menu a discesa nell'fisarmonica.

Hai già attivato lo snippet di codice prima di iniziare il modulo. C'è solo una cosa super facile da fare. Devi aggiungere la classe CSS che unirà tutto.

Innanzitutto, salva il tuo modulo. Con il generatore di moduli ancora aperto, naviga nell'opzione Impostazioni nel menu di sinistra. Si aprirà per impostazione predefinita la pagina Generale. Scorri fino in fondo e fai clic su Avanzate.

Successivamente, inserisci wpf-accordion-form nel campo Classe CSS del modulo. Dopo aver inserito questo codice, fai clic sul pulsante Salva. Mentre siamo nelle impostazioni, aggiorniamo le notifiche e le conferme del nostro modulo.

5. Configura notifiche e conferme

È fondamentale impostare i messaggi e le notifiche che appariranno dopo che un utente ha compilato e inviato il modulo. È facile farlo. Naviga nella scheda Impostazioni e seleziona Notifiche.

Gli amministratori riceveranno avvisi automaticamente. Tuttavia, il titolo, il corpo e l'elenco dei destinatari dell'email possono essere modificati, se necessario.

Successivamente, nella scheda Impostazioni, seleziona Conferme per modificare il messaggio che i tuoi clienti riceveranno al completamento del modulo.

Puoi anche utilizzare l'impostazione Tipo di conferma in WPForms per visualizzare un messaggio, collegarti a un'altra pagina o reindirizzare l'utente.

Pubblica il tuo modulo fisarmonica

Dopo aver finito di aggiornare le conferme e le notifiche del tuo modulo, sei pronto per pubblicare! Ci sono diversi modi per incorporare un modulo in WordPress.

Utilizzeremo il pulsante di incorporamento per il nostro tutorial, ma se desideri provare un altro modo, consulta il nostro post su 3 modi per incorporare un modulo sul tuo sito WordPress.

Con il tuo modulo aperto nel generatore di moduli, fai semplicemente clic sul pulsante Incorpora in alto a destra. Una finestra modale ti chiederà se desideri incorporare il modulo in una pagina esistente o crearne una nuova.

Se desideri selezionare una pagina esistente, potrai scegliere quale. Se crei una nuova pagina, ti verrà chiesto di darle un nome.

Una volta fatta la tua scelta, il tuo modulo si aprirà in WordPress, in una bozza della pagina che hai selezionato o creato. Se qui sembra ancora un modulo multipagina, non preoccuparti. Fai clic per visualizzare l'anteprima della pagina e dovresti vedere il tuo modulo a fisarmonica.

Ora sei pronto per pubblicare la tua pagina e far conoscere il tuo modulo a fisarmonica al mondo. Dopo aver pubblicato il modulo a fisarmonica, tutto ciò che resta da fare è assicurarsi che funzioni come previsto testando il modulo incorporato.

Domande frequenti su come progettare un modulo a fisarmonica in WordPress

La creazione di moduli a fisarmonica è un argomento popolare di usabilità tra i nostri lettori. Ecco alcune risposte rapide ad alcune delle domande più frequenti:

Cos'è un modulo a fisarmonica?

Un modulo a fisarmonica è un modulo a più sezioni in cui ogni sezione può essere espansa o compressa facendo clic sulle intestazioni delle sezioni.

Invece di mostrare tutti i campi contemporaneamente (il che può essere opprimente per moduli lunghi), i moduli a fisarmonica rivelano una sezione alla volta, rendendo i moduli complessi più gestibili.

Gli utenti fondamentalmente fanno clic attraverso le sezioni in sequenza, simili a schede o moduli multipagina, ma il tutto all'interno di una singola pagina.

Come creo un modulo a fisarmonica in WordPress?

Installa WPForms Pro e il plugin WPCode. In WPCode, attiva lo snippet Accordion Template Helper.

Quindi crea il tuo modulo in WPForms, organizza i campi in sezioni utilizzando i campi Section Divider, aggiungi i campi Page Break dopo ogni sezione e aggiungi la classe CSS wpf-accordion-form nelle impostazioni Advanced del tuo modulo.

Lo stile a fisarmonica verrà applicato automaticamente al tuo modulo.

Qual è la differenza tra moduli a fisarmonica e moduli multipagina?

I moduli a fisarmonica mostrano tutte le sezioni su una pagina con funzionalità di espansione/compressione, consentendo agli utenti di passare facilmente tra le sezioni e vedere i progressi generali a colpo d'occhio.

I moduli multipagina visualizzano una sezione alla volta su pagine separate con navigazione avanti/indietro. I moduli a fisarmonica funzionano meglio quando gli utenti devono fare riferimento a sezioni precedenti, mentre i moduli multipagina riducono il carico cognitivo per moduli molto lunghi mostrando solo i campi pertinenti.

Quando dovrei usare un design di modulo a fisarmonica?

Usa moduli a fisarmonica per candidature, registrazioni dettagliate o sondaggi con oltre 15 campi organizzati in 4-7 sezioni logiche.

Sono perfetti per candidature di lavoro (informazioni di contatto, cronologia lavorativa, referenze), registrazioni di eventi (dettagli partecipanti, preferenze pasti, pagamento) o moduli di ammissione completi.

Evita il design a fisarmonica per semplici moduli di contatto di 5 campi in cui le sezioni comprimibili aggiungono complessità non necessaria.

Come aggiungo una fisarmonica al mio sito WordPress?

Per i moduli fisarmonica in particolare, usa WPForms con lo snippet di codice fisarmonica come descritto in questa guida.

Per contenuti fisarmonica (come le FAQ), usa un plugin fisarmonica dedicato o il modulo fisarmonica del tuo page builder. Il metodo fisarmonica di WPForms funziona solo per i moduli, non per i contenuti generali della pagina.

Posso usare moduli fisarmonica in WPForms Lite?

La tecnica del modulo fisarmonica funziona con qualsiasi livello di licenza WPForms, incluso Lite, purché tu abbia installato il plugin WPCode e attivato lo snippet Accordion Template Helper.

Tuttavia, WPForms Pro ti dà accesso a funzionalità più avanzate come la logica condizionale e l'integrazione dei pagamenti che migliorano significativamente i moduli fisarmonica.

Quali sono le best practice per le etichette dei moduli fisarmonica?

Usa titoli di sezione chiari e descrittivi che indichino esattamente agli utenti quali informazioni contiene quella sezione. Buoni esempi: "Le tue informazioni di contatto", "Storia lavorativa", "Background formativo".

Evita etichette vaghe come "Sezione 1" o "Dettagli". Rendi i titoli delle sezioni facilmente scansionabili in modo che gli utenti possano trovare ed espandere rapidamente la sezione che devono rivedere o modificare.

I moduli fisarmonica funzionano sui dispositivi mobili?

Sì, i moduli fisarmonica funzionano sui dispositivi mobili e migliorano l'esperienza utente mobile per i moduli lunghi.

Invece di scorrere oltre 30 campi su uno schermo piccolo, gli utenti vedono sezioni comprimibili che possono espandere una alla volta.

Tuttavia, testa sempre il tuo modulo fisarmonica su dispositivi mobili reali per assicurarti che le sezioni si espandano senza problemi e non richiedano uno scorrimento eccessivo all'interno di ciascuna sezione.

Successivamente, scopri come richiedere un indirizzo email per il download di file

Non sarebbe fantastico richiedere agli utenti di inviare il proprio indirizzo email prima di scaricare un file dal tuo sito WordPress? Scopri come incoraggiare gli utenti a condividere i propri indirizzi email per scaricare un file dal tuo sito WordPress.

Crea subito il tuo modulo fisarmonica! :)

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.