Personalizzare i pulsanti Precedente e Successivo nei moduli multipagina utilizzando i CSS

Vuoi personalizzare i pulsanti precedente e successivo nei tuoi moduli multipagina? La personalizzazione dei pulsanti dei tuoi moduli può essere un ottimo modo per aggiungere personalità e stile al tuo sito.

Questo tutorial spiegherà come personalizzare lo stile dei pulsanti precedente e successivo del tuo modulo multipagina.

Prima di iniziare, assicurati che WPForms sia installato e attivato sul tuo sito e che tu abbia verificato la tua licenza. Quindi, crea un modulo multipagina per aggiungere i pulsanti precedente e successivo.

Styling dei pulsanti precedente e successivo

CSS offre un'incredibile flessibilità per personalizzare i pulsanti precedente e successivo in WPForms e qualsiasi altro aspetto del tuo modulo.

Se sei nuovo al CSS o desideri un ripasso, il posto migliore per iniziare è la nostra guida introduttiva al CSS.

Ecco il CSS predefinito per i pulsanti precedente e successivo di WPForms, oltre a commenti per annotare cosa fa ogni riga di CSS:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Puoi modificare ciascuno di questi valori per stilizzare i tuoi pulsanti in modi diversi. Come esempio, inizieremo cambiando il colore di sfondo dei nostri pulsanti in arancione e il testo in bianco.

Innanzitutto, dovremo trovare i codici esadecimali per i colori che vogliamo usare. htmlcolorcodes.com e Adobe Color CC sono strumenti gratuiti utili che possono aiutarti a scegliere i tuoi colori.

Una volta ottenuti i codici esadecimali per i colori desiderati, possiamo aggiungerli al nostro CSS:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}

Successivamente, dobbiamo aggiungere questo CSS al nostro sito. Il modo più semplice per farlo è utilizzare l'editor CSS di WordPress. Per fare ciò, vai su Aspetto » Personalizza e seleziona CSS aggiuntivo.

Una volta aperta la sezione CSS aggiuntivo, puoi aggiungere il tuo nuovo CSS. Quindi fai clic sul pulsante Pubblica e il gioco è fatto!

Ecco come appariranno i nostri pulsanti ora, con il nostro CSS di esempio applicato:

Personalizzazione degli stili al passaggio del mouse

Il CSS ti consente inoltre di applicare stili completamente diversi quando gli utenti passano il cursore del mouse sopra un pulsante. Questa modifica aiuta a migliorare l'esperienza utente perché consente agli utenti di sapere che il pulsante è cliccabile.

Di seguito sono riportati i CSS predefiniti per gli stili di hover dei pulsanti di WPForms. Come indicato nei commenti, il colore di sfondo diventa leggermente più scuro e il colore del bordo diventa leggermente più chiaro:

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Potresti notare che si tratta di molti meno CSS rispetto a quelli che hai visto per il pulsante quando non è in stato di hover. Questo perché i CSS applicheranno tutti gli stili precedenti al tuo pulsante in stato di hover a meno che non venga indicato diversamente.

Ad esempio, se lasci inalterati gli stili predefiniti, il colore del testo rimarrà nero quando gli utenti passano il mouse sul pulsante. Questo perché il colore del testo del pulsante sarebbe normalmente nero e non gli abbiamo detto di cambiarlo al passaggio del mouse.

Come con il precedente esempio di CSS personalizzato, puoi modificare uno qualsiasi di questi valori per cambiare gli stili di hover del pulsante. Per il nostro esempio, daremo al pulsante uno sfondo arancione più scuro quando è in stato di hover.

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}

Ecco come appariranno i pulsanti con i CSS applicati:

Esempio CSS

Ora che abbiamo coperto le basi, esaminiamo un esempio completo di CSS personalizzato per i pulsanti precedente e successivo.

Ecco il CSS che aggiungeremo per questo esempio, che include modifiche di stile al passaggio del mouse:

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}

Di seguito è riportato come appariranno i nostri pulsanti personalizzati con questo CSS applicato:

Ed ecco come appariranno i nostri pulsanti quando ci si passa sopra il mouse. Ricorda, le uniche modifiche sono i colori di sfondo e del bordo:

Fatto! Ora puoi personalizzare i tuoi pulsanti precedente e successivo utilizzando CSS personalizzato.

Vuoi aggiungere ancora più stili personalizzati ai tuoi moduli? Dai un'occhiata al nostro tutorial su come personalizzare i singoli campi del modulo.