Come personalizzare i pulsanti di interruzione di pagina

Introduzione

Hai voglia di dare un tocco unico ai tuoi WPForms personalizzando i pulsanti di Pausa Pagina? Non cercare oltre! In questo tutorial, ti guideremo attraverso il processo di utilizzo del CSS per personalizzare l'aspetto dei tuoi pulsanti. Con una gamma di snippet CSS, puoi ottenere facilmente l'aspetto desiderato per un modulo più personalizzato e visivamente accattivante.

Creazione del tuo modulo multipagina

Iniziamo creando un modulo multipagina. Se non sei sicuro del processo e potresti aver bisogno di una guida, non esitare a consultare questa utile documentazione su Creazione di moduli multipagina.

Nel tutorial di oggi, ci concentreremo sulla creazione di un modulo progettato per raccogliere idee per post del blog.

Abilitazione di Visualizza Precedente

Dopo aver inserito i pulsanti di Pausa Pagina, non dimenticare di attivare l'opzione Visualizza Precedente su ciascuna di queste pause. Ciò garantisce che i tuoi visitatori possano tornare indietro per rivedere e apportare modifiche prima di finalizzare il modulo.

Quando si utilizzano i pulsanti Avanti e Indietro per il tuo modulo, per impostazione predefinita, questi pulsanti appariranno già sulla stessa riga.

Ma cosa succederebbe se volessimo centrarli, o renderli pulsanti più grandi? È qui che entra in gioco il CSS!

Centratura dei pulsanti

Aggiungiamo ora del CSS per centrare i pulsanti Avanti e Indietro sul nostro modulo.

Se non sei sicuro di dove o come aggiungere CSS al tuo sito, ti preghiamo di consultare questo tutorial.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

Questo CSS verrà applicato solo all'ID del modulo 605. Dovrai aggiornare questo ID del modulo per corrispondere al tuo. Se non sei sicuro di dove trovare il tuo ID del modulo, ti preghiamo di consultare questa guida.

Se volessi usare un CSS come questo per essere applicato a tutti i moduli, useresti questo CSS invece.

.wpforms-pagebreak-left {
text-align: center !important;
}

Creazione di pulsanti più grandi

Per questa sezione, renderemo i nostri pulsanti più grandi utilizzando anche il CSS sopra per mantenere i pulsanti centrati.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

Per apportare questa modifica a tutti i moduli, usa questo CSS invece.

.wpforms-pagebreak-left {
text-align: center !important;
}

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

Allineamento degli ultimi pulsanti

Con il modulo multipagina e l'uso dei pulsanti Indietro, l'ultima pagina del modulo mostrerà l'ultimo pulsante Indietro sopra il pulsante Invia. Per il nostro tutorial, vogliamo allineare questi pulsanti sulla stessa riga.

Quindi, usando tutto il CSS che abbiamo usato finora, mettiamo tutto insieme.

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}

form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}

E come con gli altri CSS sopra, se vuoi questo per tutti i moduli, useresti questo CSS.

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}

.wpforms-submit-container button {
width: 100% !important;
}

.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}

.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}

.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}

E questo è tutto ciò che ti serve per personalizzare l'aspetto dei pulsanti multipagina. Ti piacerebbe anche passare alla pagina successiva automaticamente in base a una domanda per il tuo modulo? Dai un'occhiata al nostro tutorial su Come passare automaticamente alla pagina successiva.