Come personalizzare i pulsanti dell'interruzione di pagina

Introduzione

Volete dare un tocco unico al vostro WPForms personalizzando i pulsanti dell'interruzione di pagina? Non cercate oltre! In questo tutorial vi guideremo attraverso il processo di utilizzo dei CSS per personalizzare l'aspetto dei vostri pulsanti. Con una serie di snippet CSS, potrete facilmente ottenere l'aspetto che desiderate per un modulo più personalizzato e visivamente accattivante.

Creazione del modulo a più pagine

Cominciamo con la creazione di un modulo a più pagine. Se non siete sicuri del processo e avete bisogno di una guida, potete consultare questa pratica documentazione sulla creazione di moduli a più pagine.

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

Abilitazione della visualizzazione precedente

Dopo aver incorporato i pulsanti di interruzione di pagina, non dimenticate di attivare l'opzione Visualizza precedente su ciascuna di queste interruzioni. In questo modo, i visitatori potranno tornare indietro per rivedere e modificare il modulo prima di finalizzarlo.

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

Ma se volessimo centrarli o rendere i pulsanti più grandi? È qui che entrano in gioco i CSS!

Centratura dei pulsanti

Aggiungiamo ora alcuni CSS per centrare i pulsanti Avanti e Precedente sul nostro modulo.

Se non siete sicuri di dove o come aggiungere i CSS al vostro sito, consultate questo tutorial.

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

Questo CSS verrà applicato solo all'ID modulo 605. È necessario aggiornare l'ID del modulo in modo che corrisponda al proprio ID. Se non si sa dove trovare il proprio ID modulo, consultare questa guida.

Se si volesse utilizzare un CSS come questo da applicare a tutti i moduli, si dovrebbe utilizzare questo CSS.

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

Creare pulsanti più grandi

Per questa sezione, renderemo i pulsanti più grandi e utilizzeremo il CSS di cui 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, utilizzare invece questo CSS.

.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 a più pagine e l'uso dei pulsanti Precedente, l'ultima pagina del modulo mostrerà che l'ultimo pulsante Precedente si trova sopra il pulsante Invia. Per la nostra esercitazione, vogliamo allineare questi pulsanti sulla stessa linea.

Quindi, utilizzando tutti i CSS che abbiamo usato finora, mettiamo insieme tutto questo.

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%;
}

Come per l'altro CSS di cui sopra, se lo si vuole per tutti i moduli, si deve usare 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;
}

Questo è tutto ciò che serve per personalizzare l'aspetto dei pulsanti multipagina. Volete anche passare automaticamente alla pagina successiva in base a una domanda del vostro modulo? Date un'occhiata al nostro tutorial su Come passare automaticamente alla pagina successiva.