How to Change the Submit Button Color with WPForms

Visualizza Markdown

Desideri personalizzare il colore del pulsante di invio del tuo modulo per adattarlo al marchio del tuo sito web? Mentre WPForms 1.8.1+ offre la personalizzazione del colore integrata tramite l'editor a blocchi, puoi anche ottenerlo utilizzando CSS personalizzato per un controllo più preciso.

Questa guida ti mostrerà come cambiare il colore del pulsante di invio utilizzando il CSS.

viene applicato lo stile predefinito al pulsante di invio

Con il rilascio di WPForms 1.8.1, ora puoi cambiare facilmente il colore del pulsante di invio senza usare il CSS semplicemente aggiungendo il modulo alla tua pagina utilizzando un editor a blocchi. Con questa funzionalità di stile dei moduli, puoi stilizzare i tuoi moduli senza scrivere alcun CSS. Per saperne di più, controlla questa utile documentazione.

Tuttavia, puoi anche usare il CSS personalizzato per ottenere questo risultato e per questo tutorial, questo è il metodo che useremo per cambiare lo stile del colore del pulsante Invia.

Impostazione del modulo

Per iniziare, apri il generatore di moduli creando un nuovo modulo o modificando quello esistente. Aggiungi i campi del modulo desiderati secondo necessità.

Per assistenza nella creazione di un modulo, consulta la nostra guida completa su come creare il tuo primo modulo.

Aggiunta del codice CSS

Il seguente snippet CSS cambierà il colore del tuo pulsante di invio:

Se hai bisogno di assistenza su come e dove aggiungere CSS al tuo sito, consulta il nostro tutorial su come aggiungere stili CSS personalizzati.

Il CSS sopra cambierà lo sfondo del colore del pulsante di invio in blu (#066AAB) con testo bianco su tutti i pulsanti Invia di WPForms sul tuo sito.

I colori in questo CSS sono definiti utilizzando codici esadecimali, di cui puoi leggere di più in questa documentazione

questo è come abbiamo cambiato il colore del pulsante di invio

Nota: per ulteriori modifiche di stile al pulsante di invio, come gli stili al passaggio del mouse, consulta il nostro tutorial sullo stile dei pulsanti di invio.

Personalizzazione del codice

Per utilizzare colori diversi, sostituisci i codici esadecimali nel codice:

Alla riga 7, sostituisci #066AAB con il colore del pulsante desiderato.

Alla riga 8, sostituisci #066AAB con lo stesso colore per abbinare il bordo.

Alla riga 14, sostituisci #04446E con il colore desiderato al passaggio del mouse (tipicamente una tonalità più scura del colore del tuo pulsante).

Ad esempio, per creare un pulsante rosso potresti usare:

background-color: #ff0000 !important;
border-color: #ff0000 !important;

Domande frequenti

D: Perché questo CSS non funziona per me?

R: Se non vedi le tue modifiche, prima cancella la cache del tuo browser. Se ancora non funziona, il tuo tema potrebbe sovrascrivere gli stili. Prova ad aggiungere !important alle tue regole CSS come mostrato nel nostro esempio. Per ulteriore aiuto, consulta la nostra guida alla risoluzione dei problemi CSS.

D: Funzionerà anche per i pulsanti Avanti e Indietro?

R: Se stai utilizzando un campo Interruzione di pagina nel tuo modulo e stai utilizzando i pulsanti Avanti e Indietro per la navigazione, useremo del CSS che renderà tutti questi pulsanti con lo stesso stile esatto. Copia semplicemente questo CSS sul tuo sito.

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color: #022B57 !important;
}

D: Posso indirizzare solo uno dei miei moduli?

A: Se si desidera modificare solo un modulo, è sufficiente selezionare l'ID del modulo nel CSS. In questo esempio, selezioneremo l'ID modulo 999 per il pulsante Invia, nonché per i pulsanti Avanti e Indietro dal campo Interruzione di pagina.

Dovrai aggiornare il 999 per corrispondere al tuo ID modulo.

Se non sei sicuro di dove trovare l'ID del tuo modulo, consulta la nostra guida su come trovare l'ID di campi e moduli.

button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
    background-color: #024488;
    border-color: #024488;
    color: #fff;
    transition: background 0.3s ease-in-out;
}

button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
    background-color: #022B57;
}

E questo è tutto! Ora hai cambiato il colore del tuo pulsante di invio. Successivamente, desideri utilizzare il CSS per personalizzare il pulsante Invia in altri modi? Dai un'occhiata al nostro tutorial su come utilizzare il CSS per personalizzare il pulsante di invio.

Come cambiare il colore del pulsante di invio

Riassunto AI