Aggiungere Classi CSS Personalizzate a WPForms

Vuoi personalizzare l'aspetto dei tuoi moduli WordPress? In WPForms, puoi facilmente aggiungere classi e stili CSS personalizzati per far sì che i tuoi moduli abbiano l'aspetto desiderato.

Questo tutorial ti mostrerà come aggiungere classi CSS personalizzate per stilizzare elementi specifici del modulo, nonché come aggiungere qualsiasi CSS personalizzato al tuo sito WordPress.

---

Cos'è una Classe CSS?

Le classi CSS sono un modo per selezionare gli elementi che desideri stilizzare sul tuo sito web.

In WPForms, ai campi vengono automaticamente assegnate diverse classi CSS. Ad esempio, se un campo è impostato su una Dimensione campo di Grande, gli verrà assegnata la classe CSS wpforms-field-large.

Aggiungendo una classe CSS personalizzata, puoi facilmente selezionare un campo modulo specifico o applicare gli stessi stili a più campi.

Aggiungere Classi CSS Personalizzate in WPForms

In WPForms, puoi aggiungere le tue classi CSS personalizzate a singoli campi del modulo, al pulsante di invio o al contenitore attorno al tuo modulo.

Aggiungere Classi CSS a Campi Modulo Individuali

Per aggiungere una classe CSS personalizzata a un campo modulo, dovrai creare un nuovo modulo o modificare un modulo esistente.

All'interno del pannello di anteprima del generatore di moduli, fai clic sul campo per aprire le sue Opzioni campo. Quindi, apri la scheda Avanzate e cerca il campo etichettato Classi CSS.

Quando si nomina una classe CSS, è possibile utilizzare solo lettere o numeri e non sono ammessi spazi. I nomi delle classi sono sensibili alle maiuscole, quindi si consiglia di utilizzare lettere minuscole. Se desideri che il nome della classe contenga più di una parola, includi un trattino (-) o un underscore (_) al posto di uno spazio.

Per evitare problemi, inizia sempre i nomi delle tue classi con una lettera.

Per questo esempio, chiameremo la nostra classe CSS wpf-blue-background.

Aggiungendo wpf- all'inizio delle nostre classi, è meno probabile che aggiungiamo un nome di classe già utilizzato dal tema del nostro sito. Ciò aiuterà a evitare conflitti di stile e renderà più probabile che i nostri stili vengano applicati con successo.

Quando sei pronto, aggiungi la classe CSS wpf-blue-background al campo Classi CSS.

Se lo desideri, puoi anche aggiungere classi aggiuntive a questo campo. Per farlo, aggiungi semplicemente uno spazio tra ogni nome di classe. Ad esempio:

wpf-sfondo-blu wpf-carattere-grassetto wpf-margine-xl

Aggiungere Classi CSS a un Contenitore Modulo o Pulsante di Invio

Per alcuni stili, può essere utile selezionare il contenitore del modulo o il suo pulsante di invio.

Ad esempio, potresti voler che i pulsanti di invio per tutti i moduli di iscrizione sul tuo sito siano stilizzati in un modo e che i pulsanti di invio in qualsiasi modulo di contatto generale siano stilizzati in un modo diverso. Un modo semplice per raggiungere questo obiettivo è aggiungere la stessa classe CSS a tutti i pulsanti di invio che desideri stilizzare allo stesso modo.

Per aggiungere un nome di classe CSS personalizzato per una delle due opzioni, apri il generatore di moduli e vai su Impostazioni » Generali. Da qui, vai alla sezione Avanzate e vedrai i campi per Classe CSS del modulo e Classe CSS del pulsante di invio.

Se desideri aggiungere più di un nome di classe, separa ciascuno con uno spazio.

Creare e Aggiungere Stili CSS per il Tuo Sito

Ora che hai aggiunto una classe CSS personalizzata a un campo nel tuo modulo, puoi creare gli stili che desideri applicare.

Creazione di stili CSS

CSS è uno strumento potente con un'ampia gamma di opzioni di stile disponibili. Per istruzioni su come iniziare a creare CSS, consulta la nostra Guida per principianti al CSS.

Per il nostro esempio, aggiungeremo semplicemente uno sfondo blu a qualsiasi campo con la classe wpf-blue-background. Quando si seleziona un nome di classe all'interno del CSS, deve sempre iniziare con un punto (.), ad esempio .wpf-blue-background.

Poiché molti stili sono già applicati al tuo modulo, è anche una buona idea rendere il tuo CSS più specifico. Per farlo, aggiungi semplicemente .wpforms-form davanti al nome della tua classe personalizzata.

Ecco il nostro esempio di CSS:

.wpforms-form .wpf-blue-background {
    background-color: #d1effd;
}

Se i tuoi stili personalizzati non vengono applicati correttamente, puoi includere !important prima del punto e virgola.

Aggiungere CSS al tuo sito WordPress

Un modo rapido e semplice per aggiungere CSS personalizzato al tuo sito è con il personalizzatore del tema di WordPress. Questa è un'opzione popolare perché è disponibile in quasi tutti i temi e dispone di un'area di anteprima live.

Per accedere all'area CSS del personalizzatore del tema, vai su Aspetto » Personalizza e quindi seleziona la scheda etichettata CSS aggiuntivo.

Successivamente, procedi e aggiungi il tuo snippet CSS personalizzato. Quando sei pronto, fai clic su Pubblica.

Ecco come appare ora il nostro modulo di esempio con la classe CSS e gli stili CSS applicati:

Un altro modo per aggiungere CSS personalizzato che rimanga coerente tra i cambi di tema è utilizzare WPCode. Per una guida su come applicare CSS personalizzato con WPCode, incluso l'utilizzo della sua libreria di snippet di codice CSS predefiniti, consulta la nostra guida su come utilizzare gli snippet di codice.

Se desideri vedere metodi aggiuntivi per aggiungere CSS, consulta il tutorial di WPBeginner su come aggiungere CSS personalizzato a WordPress.

Fatto! Ora puoi aggiungere classi CSS personalizzate per stilizzare aree specifiche dei tuoi moduli.

Desideri anche visualizzare e modificare gli stili dei moduli predefiniti? Dai un'occhiata al nostro tutorial sulla personalizzazione dei singoli campi del modulo per tutti i dettagli.