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.

Create ora il vostro modulo a fisarmonica di WordPress

In questo articolo vi mostreremo il modo più semplice per progettare un modulo a fisarmonica per migliorare la funzionalità e l'esperienza utente del vostro sito web.

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 da fare è installare e attivare WPForms.

WPForms è un plugin avanzato e facile da usare per la creazione di tutti i tipi di moduli. È dotato di oltre 2.000 modelli di moduli WordPress e di un'infinità di funzioni per potenziare la funzionalità del vostro sito.

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

Avete bisogno di aiuto per installare WPForms sul vostro sito web? Consultate questo tutorial su come installare i plugin di WordPress.

Una volta installato il plugin, non dimenticate di attivarlo!

Una volta terminato questo passaggio, installeremo WPCode e aggiungeremo lo snippet di codice che rende possibile lo stile fisarmonica.

2. Installare WPCode e aggiungere lo snippet di codice della fisarmonica

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.

Se non avete installato WPCode, non vedrete l'opzione Code Snippets.

Scorrere o usare la funzione di ricerca per trovare lo snippetAccordion 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

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 verrà visualizzata un'anteprima modificabile del modulo. Se avete selezionato un modulo vuoto, non preoccupatevi che non ci sia nulla per iniziare. Potrete trascinare e rilasciare gli elementi del vostro modulo e non rimarrà vuoto per molto tempo!

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, è necessario aggiungere un campo divisore di sezione. Assegnare al campo il nome che si desidera dare alla sezione di informazioni.

Il nostro esempio è un modulo di candidatura, quindi inizieremo con le informazioni di contatto in alto.

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 si salta questo passaggio, la fisarmonica funzionerà comunque, ma ci sarà una barra di avanzamento inattiva nella parte superiore del modulo quando sarà attivo.

Dopo aver aggiunto l'interruzione di pagina, ripetere la procedura per tutte le sezioni che il modulo dovrà avere.

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. Aggiungere la classe CSS

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, fare clic sul pulsante Salva . Mentre siamo nelle impostazioni, aggiorniamo le notifiche e le conferme del modulo.

5. Configurare notifiche e conferme

È fondamentale impostare i messaggi e le notifiche che appariranno dopo che l'utente avrà compilato e inviato il modulo.

È facile da fare. Accedere alla scheda Impostazioni e selezionare 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

Una volta terminato l'aggiornamento delle conferme e delle notifiche del modulo, si è pronti a pubblicare!

Esistono diversi modi per incorporare un modulo in WordPress. Per il nostro tutorial utilizzeremo il pulsante di incorporamento, ma se volete provare un altro modo, date un'occhiata al nostro post sui 3 modi per incorporare un modulo nel vostro sito WordPress.

Con il modulo aperto nel costruttore di moduli, è sufficiente fare clic sul pulsante Incorpora in alto a destra.

Una finestra modale chiederà se si desidera incorporare il modulo in una pagina esistente o creare una nuova pagina.

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 siete pronti a pubblicare la vostra pagina e a diffondere il vostro modulo a fisarmonica nel mondo.

Dopo aver pubblicato il modulo a fisarmonica, non resta che assicurarsi che funzioni come previsto, testando il modulo incorporato.

Congratulazioni per aver completato il modulo a fisarmonica!

Domande frequenti sui moduli a fisarmonica

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:

Quali sono i pro e i contro dei moduli a fisarmonica rispetto a quelli a più pagine?

Un modulo a fisarmonica consente di inserire più contenuti in uno spazio ridotto, ma può risultare opprimente se non è progettato bene.

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

Utilizzate etichette concise e chiare. Utilizzate titoli e non utilizzate denominazioni come "Sezione 1".

Come si progettano i moduli a fisarmonica per desktop e mobile?

Per progettare moduli a fisarmonica che siano reattivi e funzionino senza problemi sia su desktop che su mobile, prendete in considerazione l'iscrizione a WPForms!

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.

Create ora il vostro modulo a fisarmonica di WordPress

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.