Come cambiare il colore del pulsante di invio con WPForms

Volete personalizzare il colore del pulsante di invio del vostro modulo per adattarlo al marchio del vostro sito web? Sebbene WPForms 1.8.1+ offra una personalizzazione del colore integrata attraverso l'editor di blocchi, è possibile ottenere questo risultato anche utilizzando CSS personalizzati per un controllo più preciso.

Questa guida mostra come modificare il colore del pulsante di invio utilizzando i CSS.

viene applicato lo stile predefinito al pulsante di invio

Con il rilascio di WPForms 1.8.1, è ora possibile cambiare facilmente il colore del pulsante di invio senza usare i CSS, semplicemente aggiungendo il modulo alla pagina con un editor di blocchi. Grazie a questa funzione di stile dei moduli, è possibile creare uno stile per i moduli senza scrivere alcun CSS. Per saperne di più, consultate questa utile documentazione.

Tuttavia, è possibile utilizzare anche CSS personalizzati per ottenere questo risultato e, in questo tutorial, questo è il metodo che utilizzeremo per modificare lo stile del colore del pulsante Invia.

Impostazione del modulo

Per iniziare, aprire il costruttore di moduli creando un nuovo modulo o modificando quello esistente. Aggiungere i campi del modulo desiderati, se necessario.

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

Aggiunta del codice CSS

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

Se avete bisogno di assistenza su come e dove aggiungere i CSS al vostro sito, consultate il nostro tutorial sull'aggiunta di stili CSS personalizzati.

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

I colori in questo CSS sono definiti utilizzando i codici esadecimali, che possono essere approfonditi in questa documentazione.

Ecco come abbiamo cambiato il colore del pulsante di invio

Nota: per ulteriori modifiche allo stile del pulsante di invio, come gli stili di passaggio, consultare il nostro tutorial sullo stile del pulsante di invio.

Personalizzazione del codice

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

Su linea 7, sostituire #066AAB con il colore del pulsante desiderato.

Su linea 8, sostituire #066AAB con lo stesso colore per abbinare il bordo.

Su linea 14, sostituire #04446E con il colore desiderato per l'hover (in genere una tonalità più scura del colore del pulsante).

Ad esempio, per creare un pulsante rosso si potrebbe usare:

colore di sfondo: #ff0000 !important;
colore dei bordi: #ff0000 !important;

Domande frequenti

D: Perché questo CSS non funziona per me?

A: Se non si vedono le modifiche, cancellare la cache del browser. Se ancora non funziona, il tema potrebbe sovrascrivere gli stili. Provare ad aggiungere !important alle regole CSS, come mostrato nel nostro esempio. Per maggiori informazioni, consultate il nostro Guida alla risoluzione dei problemi CSS.

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

R: Se si utilizza un campo Interruzione di pagina nel modulo e si utilizzano i pulsanti Avanti e Precedente per la navigazione, si utilizzerà un CSS che renderà tutti i pulsanti con lo stesso identico stile. È sufficiente copiare questo CSS nel vostro 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?

R: Se si desidera modificare un solo modulo, è sufficiente puntare l'ID del modulo nel CSS. In questo esempio, si punterà all'ID 999 del modulo per il pulsante Invia e per i pulsanti Avanti e Precedente del campo Interruzione di pagina.

È necessario aggiornare il 999 in modo che corrisponda all'ID del proprio modulo.

Se non si è sicuri di dove trovare l'ID del modulo, consultare la nostra guida per individuare l'ID del campo e del modulo.

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

Ed ecco fatto! Ora avete cambiato il colore del pulsante di invio. Ora volete usare i CSS per personalizzare il pulsante di invio in altri modi? Date un'occhiata al nostro tutorial sull'uso dei CSS per personalizzare il pulsante di invio.

Come modificare il colore del pulsante di invio