Come progettare un modulo a fisarmonica in WordPress

Siete alla ricerca di un modo semplice per aggiungere un modulo a fisarmonica al vostro sito WordPress?

I moduli a 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 a fisarmonica per migliorare la funzionalità e l'esperienza utente del tuo sito web.

Crea subito il tuo modulo WordPress a fisarmonica! 🙂

Come progettare un modulo a fisarmonica in WordPress

Per creare un modulo con design a fisarmonica in WordPress, potete affidarvi alla semplicità e alla funzionalità di WPForms. Seguite i passaggi seguenti per iniziare:

1. Installare e attivare WPForms

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

È dotato di oltre 2.000 modelli di moduli WordPress e di tantissime funzionalità per potenziare le funzionalità del tuo sito.

Per iniziare, visitate WPForms e registrate il vostro account. Per questo tutorial utilizzeremo una licenza Pro, ma potete utilizzare qualsiasi livello di licenza.

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

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

2. Aggiungi lo snippet di codice Accordion

Per far funzionare la magia del modulo a fisarmonica, dobbiamo installare il plugin WPCode, che funziona con WPForms. Assicuratevi di completare entrambe le parti di questo passaggio: l'installazione di WPCode e l' aggiunta dello snippet di codice della fisarmonica.

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

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

Dalla vostra dashboard di WordPress, andate su WPForms " Strumenti nella barra laterale di navigazione sinistra. In questa pagina, selezionate la scheda Code Snippets.

Si noti che se WPCode non è installato, l'opzione Code Snippets non sarà visibile. Scorrere o utilizzare la funzione di ricerca per individuare losnippetAccordion Template Helper.

Fare clic sul pulsante Installa snippet .

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

Ora siete pronti a creare il vostro modulo!

3. Creare un nuovo modulo WordPress

Dalla dashboard di amministrazione di WordPress, navigare in WPForms e fare clic su Aggiungi nuovo dall'elenco delle opzioni.

Quindi, dare un nome al modulo. È possibile selezionare un modello esistente in base alle proprie esigenze specifiche, ma per i nostri scopi in questa esercitazione, inizieremo con un modulo vuoto. Questo vi darà un'idea più precisa di come creare il formato a fisarmonica.

A questo punto si accede alla schermata Campi, dove i campi disponibili appaiono sul pannello di sinistra. Quelli a cui si ha accesso dipendono dal livello di licenza.

Nel pannello di destra vedrai un'anteprima modificabile del tuo modulo. Se hai selezionato un modulo vuoto, non preoccuparti se all'inizio non c'è nulla. Trascinerai lì gli elementi del modulo e non rimarrà vuoto a lungo!

Costruire il modulo utilizzando i divisori di sezione

Quando si inizia a costruire il modulo, si pensa a come si desidera raggruppare le informazioni. Ovvero, quali informazioni volete che siano incluse nel menu a tendina quando si apre la fisarmonica del modulo?

Per ciascuna di queste sezioni, è necessarioaggiungere un campo divisorio. Assegnareal campoil nomeche si desidera attribuire a quella sezione di informazioni. Il nostro esempio è un modulo di domanda, quindi inizieremo con le informazioni di contatto nella parte superiore.

Una volta posizionato il divisore di sezione, è possibile trascinare e rilasciare tutti gli elementi del modulo desiderati al di sotto di esso, nel modo desiderato.

Aggiungere interruzioni di pagina

Una volta che i campi sono tutti al loro posto, aggiungete un campo Interruzione di pagina in fondo a ciascuna sezione del modulo.

Nota: quando si aggiunge l'interruzione di pagina iniziale, fare clic su di essa per aprire le opzioni del campo. Sul lato sinistro è presente un menu a discesa che consente di modificare l'indicatore di avanzamento. Selezionare Nessuno. È necessario farlo solo una volta per ogni modulo.

Se salti questo passaggio, l'accordion funzionerà comunque, ma nella parte superiore del modulo sarà presente una barra di avanzamento inattiva quando sarà online. Dopo aver aggiunto l'interruzione di pagina, ripeti il processo per tutte le sezioni presenti nel modulo.

Se si visualizza l'anteprima in questo momento, sembrerà un modulo a più pagine e non una fisarmonica. Non preoccupatevi, stiamo per aggiungere l'ingrediente magico: una classe CSS!

4. Aggiungi la classe CSS al tuo modulo

A questo punto, si dovrebbe aver creato l'intero modulo. Ogni sezione del modulo deve iniziare con un divisore di sezione e terminare con un'interruzione di pagina. Queste sezioni sono quelle che diventeranno le tendine della fisarmonica.

Avete già attivato lo snippet di codice prima di avviare il modulo. Rimane solo una cosa semplicissima da fare. È necessario aggiungere la classe CSS che riunirà il tutto.

Innanzitutto, salvare il modulo. Con il costruttore di moduli ancora aperto, passare all'opzione Impostazioni nel menu di sinistra. Si aprirà di default la pagina Generale. Scorrere fino in fondo e fare clic su Avanzate.

Quindi, immettere wpf-accordion-form nel campo Classe CSS del modulo. Dopo aver inserito il codice, clicca sul pulsante Risparmiare pulsante. Mentre siamo nelle impostazioni, aggiorniamo le notifiche e le conferme del nostro modulo.

5. Configurare notifiche e conferme

È fondamentale impostare i messaggi e le notifiche che appariranno dopo che un utente avrà compilato e inviato il modulo. È facile da fare. Vai alla scheda Impostazioni e seleziona Notifiche.

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

Quindi, nella scheda Impostazioni, selezionare Conferme per modificare il messaggio che i clienti riceveranno al completamento del modulo.

Si può anche usare l'impostazione Tipo di conferma in WPForms per visualizzare un messaggio, un link a un'altra pagina o per reindirizzare l'utente.

Pubblicare il modulo a fisarmonica

Dopo aver completato l'aggiornamento delle conferme e delle notifiche del modulo, sei pronto per pubblicarlo! Esistono diversi modi per incorporare un modulo in WordPress.

Per il nostro tutorial utilizzeremo il pulsante di incorporamento, ma se desideri provare un altro metodo, consulta il nostro post sui 3 modi per incorporare un modulo nel tuo sito WordPress.

Con il modulo aperto nel generatore di moduli, basta cliccare 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 si desidera selezionare una pagina esistente, sarà possibile scegliere quale. Se si crea una nuova pagina, verrà richiesto di assegnarle un nome.

Una volta effettuata la scelta, il modulo si aprirà in WordPress, in una bozza della pagina selezionata o creata. Se qui sembra ancora un modulo a più pagine, non preoccupatevi. Fate clic sull'anteprima della pagina e vedrete il vostro modulo a fisarmonica.

Ora sei pronto per pubblicare la tua pagina e rendere pubblico il tuo modulo a fisarmonica. Dopo aver pubblicato il modulo a fisarmonica, non ti resta che assicurarti 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 di usabilità molto popolare tra i nostri lettori. Ecco alcune risposte rapide ad alcune delle domande più frequenti:

Che cos'è un modulo a fisarmonica?

Un modulo a fisarmonica è un modulo composto da più sezioni, ciascuna delle quali può essere espansa o compressa cliccando sulle intestazioni delle sezioni.

Anziché mostrare tutti i campi contemporaneamente (il che può risultare opprimente nei moduli lunghi), i moduli a fisarmonica rivelano una sezione alla volta, rendendo i moduli complessi più gestibili.

Gli utenti cliccano sulle sezioni in sequenza, come se fossero schede o moduli multipagina, ma tutto all'interno di una singola pagina.

Come posso creare 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 Separatore di sezione, aggiungi i campi Interruzione di pagina dopo ogni sezione e aggiungi la classe CSS wpf-accordion-form nelle impostazioni Avanzate 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 sola pagina con funzionalità di espansione/compressione, consentendo agli utenti di passare facilmente da una sezione all'altra e vedere a colpo d'occhio lo stato di avanzamento complessivo.

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 alle sezioni precedenti, mentre i moduli multipagina riducono il carico cognitivo per i moduli molto lunghi mostrando solo i campi rilevanti.

Quando dovrei usare un design a fisarmonica?

Utilizza moduli a fisarmonica per domande, registrazioni dettagliate o sondaggi con più di 15 campi organizzati in 4-7 sezioni logiche.

Sono perfetti per le candidature di lavoro (informazioni di contatto, esperienze lavorative, referenze), le registrazioni agli eventi (dettagli sui partecipanti, preferenze alimentari, pagamento) o i moduli di ammissione completi.

Evita il design a fisarmonica per i moduli di contatto semplici a 5 campi, dove le sezioni a scomparsa aggiungono una complessità inutile.

Come posso aggiungere un accordion al mio sito WordPress?

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

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

Posso usare i moduli a fisarmonica in WPForms Lite?

La tecnica della forma a fisarmonica funziona con qualsiasi livello di licenza WPForms, incluso Lite, purché sia installato il plugin WPCode e sia 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 a fisarmonica.

Quali sono le migliori pratiche per le etichette dei moduli a fisarmonica?

Utilizza titoli chiari e descrittivi che indichino agli utenti esattamente quali informazioni contiene ogni sezione. Esempi validi: "Informazioni di contatto", "Esperienza lavorativa", "Formazione".

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

I moduli a fisarmonica funzionano sui dispositivi mobili?

Sì, i moduli a fisarmonica funzionano sui dispositivi mobili e migliorano effettivamente l'esperienza degli utenti mobili per i moduli lunghi.

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

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

Successivamente, imparate come richiedere un indirizzo e-mail per il download dei file.

Non sarebbe fantastico richiedere agli utenti di inviare il proprio indirizzo e-mail prima di scaricare un file dal vostro sito WordPress? Scoprite come incoraggiare gli utenti a condividere i loro indirizzi e-mail per scaricare un file dal vostro sito WordPress.

Crea subito il tuo modulo a fisarmonica! 🙂

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

Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.