Personalizzazione dei pulsanti precedente e successivo nei moduli a più pagine con i CSS

Volete personalizzare i pulsanti precedente e successivo dei vostri moduli multipagina? La personalizzazione dei pulsanti dei moduli può essere un ottimo modo per aggiungere personalità e stile al vostro sito.

Questa esercitazione illustra come personalizzare lo stile dei pulsanti precedente e successivo del modulo a più pagine.

Prima di iniziare, assicuratevi che WPForms sia installato e attivato sul vostro sito e che abbiate verificato la vostra licenza. Quindi, create un modulo a più pagine per aggiungere i pulsanti precedente e successivo.

Stilizzazione dei pulsanti Precedente e Successivo

I CSS offrono un'incredibile flessibilità per personalizzare i pulsanti precedente e successivo di WPForms e qualsiasi altro aspetto del vostro modulo.

Se siete alle prime armi con i CSS o desiderate un ripasso, il miglior punto di partenza è la nostra guida introduttiva ai CSS.

Ecco il CSS predefinito per i pulsanti precedente e successivo di WPForms, oltre ai commenti per notare 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 */
}

È possibile modificare ciascuno di questi valori per dare ai pulsanti uno stile diverso. Per esempio, inizieremo cambiando il colore di sfondo dei pulsanti in arancione e il testo in bianco.

Per prima cosa, dobbiamo trovare i codici esadecimali dei colori che vogliamo utilizzare. htmlcolorcodes.com e Adobe Color CC sono utili strumenti gratuiti che possono aiutarvi a scegliere i colori.

Una volta ottenuti i codici esadecimali dei 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 farlo, andate su Aspetto " Personalizza e selezionate CSS aggiuntivi.

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

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

Personalizzazione degli stili Hover

I CSS consentono anche di applicare stili completamente diversi quando gli utenti passano il cursore su un pulsante. Questa modifica contribuisce a migliorare l'esperienza dell'utente, perché gli fa capire che il pulsante è cliccabile.

Di seguito è riportato il CSS predefinito per gli stili di passaggio dei pulsanti di WPForms. Come indicato nei commenti, il colore dello sfondo diventa un po' più scuro e il colore del bordo un po' 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 */
}

Si può notare che il CSS è molto inferiore a quello che si vede per il pulsante quando non viene sorvolato. Questo perché i CSS applicheranno tutti gli stili precedenti al pulsante che si è fermato, a meno che non venga detto diversamente.

Ad esempio, se si lasciano gli stili predefiniti, il colore del testo rimarrà nero quando gli utenti passeranno sopra il pulsante. Questo perché il colore del testo del pulsante è normalmente nero e non gli è stato detto di cambiare al passaggio del mouse.

Come nel precedente esempio di CSS personalizzato, è possibile modificare uno qualsiasi di questi valori per cambiare gli stili di passaggio del pulsante. Per il nostro esempio, daremo al pulsante uno sfondo arancione più scuro quando viene passato con il mouse.

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 di CSS

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

Ecco il CSS che aggiungeremo per questo esempio, che include i cambiamenti 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 */
}

Ecco come appariranno i nostri pulsanti personalizzati con questo CSS applicato:

Ecco come appariranno i nostri pulsanti al passaggio del mouse. Ricordate che gli unici cambiamenti sono i colori dello sfondo e del bordo:

Ecco fatto! Ora è possibile personalizzare i pulsanti precedente e successivo utilizzando CSS personalizzati.

Volete aggiungere altri stili personalizzati ai vostri moduli? Consultate il nostro tutorial su come personalizzare i singoli campi dei moduli.