Personalizzazione dello stile dei singoli campi del modulo

Aggiornato:
Visualizza Markdown

Vuoi personalizzare campi specifici nei tuoi moduli, senza influenzare gli altri campi del modulo? Con il selettore CSS giusto, puoi cambiare gli stili di qualsiasi componente del modulo per adattarlo alle tue esigenze.

In questo tutorial, forniremo un elenco di quasi tutti i selettori di cui potresti aver bisogno per personalizzare i singoli campi sui tuoi moduli.

Nota: Questo tutorial è un po' più avanzato e richiede una certa conoscenza del CSS. Se preferisci non usare codice, puoi consultare la nostra guida su come personalizzare WPForms nell'editor a blocchi.

Come usare il codice sottostante

Di seguito è riportato un elenco dei selettori CSS di cui avrai bisogno per indirizzare i singoli campi del modulo con il tuo codice CSS.

Incluso di seguito, troverai anche gli stili predefiniti che WPForms applica automaticamente a tali selettori. Per personalizzare qualsiasi parte del tuo modulo, puoi iniziare copiando uno snippet CSS da questo tutorial sul tuo sito, quindi modificandolo secondo necessità.

Nota: Non sai come aggiungere CSS al tuo sito? Dai un'occhiata al tutorial di WPBeginner su come aggiungere CSS personalizzato al tuo sito WordPress.

Selettori e stili predefiniti di WPForms

Alcuni degli stili che vedi nel tuo modulo (come il font) proverranno dal tuo tema. WPForms include anche alcuni stili di base per aiutare i tuoi moduli ad apparire al meglio su qualsiasi tema. Indipendentemente da dove provenga lo stile iniziale, tuttavia, di solito può essere sovrascritto utilizzando selettori CSS molto specifici.

Nota: Quando aggiungi CSS al tuo sito, potrebbe essere necessario includere !important prima del punto e virgola per assicurarti che i tuoi stili personalizzati vengano applicati correttamente. Questo aiuterà a sovrascrivere qualsiasi CSS aggiunto dal tuo tema o da altri plugin. Dai un'occhiata alla nostra guida alla risoluzione dei problemi CSS per maggiori dettagli.

Di seguito è riportato un elenco di selettori CSS specifici per ogni parte di un modulo, nonché gli stili che saranno inclusi per impostazione predefinita tramite WPForms.

Titolo e descrizione del modulo

.wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Descrizione del modulo

.wpforms-form .wpforms-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Indicatore di avanzamento multipagina

Nota: Per cambiare il colore di riempimento verde dell'indicatore di avanzamento, utilizza le opzioni multipagina nel generatore di moduli.

Titolo della pagina dell'indicatore di avanzamento

span.wpforms-page-indicator-page-title {
    font-size: 18px;
}

Passaggi dell'indicatore di avanzamento

span.wpforms-page-indicator-steps {
    font-size: 18px;
}

Passaggio corrente dell'indicatore di avanzamento

span.wpforms-page-indicator-steps-current {
    font-size: 18px;
}

Barra di avanzamento dell'indicatore di avanzamento

Barra di avanzamento

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    display: block;
    width: 100%;
    background-color: #ddd;
    height: 18px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 5px 0 0;
}

Barra di avanzamento dell'indicatore di avanzamento (solo riempimento)

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

Indicatore di avanzamento: cerchi

Cerchi indicatore di avanzamento

Cerchi dei passaggi (i colori si applicano solo a quelli non attivi)

.wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 0;
    line-height: 40px;
    text-align: center;
    background-color: #ddd;
    color: #666;
}

Cerchio del passaggio corrente

.wpforms-form .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number {
    color: #fff;
}

Connettore Indicatore di Avanzamento

Connettore Indicatore di Avanzamento

Sezioni Passo

.wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
    float: left;
    text-align: center;
    font-style: 16px;
    line-height: 1.2;
}

Selettori globali dei campi del modulo

Etichette di Tutti i Campi

.wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Sottotitoli di Tutti i Campi

.wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Descrizioni di Tutti i Campi

.wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Riquadri Attorno a Tutti i Campi di Input

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Spaziatura tra Tutti i Campi

.wpforms-form .wpforms-field {
    padding: 10px 0;
    clear: both;
}

Tutti i Campi di Input Piccoli

.wpforms-container input.wpforms-field-small, .wpforms-container select.wpforms-field-small, .wpforms-container .wpforms-field-row.wpforms-field-small { 
   max-width: 25%;
}

Tutti i Campi di Input Medi

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium {
   max-width: 60%;
}

Tutti i Campi di Input Grandi

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large { 
   max-width: 100%;
}

Messaggio di conferma

Messaggio di conferma

.wpforms-confirmation-container-full {
    color: #333;
    margin: 0 0 24px 0;
    background: #e0ffc7;
    border: 1px solid #b4d39b;
    padding: 15px 15px;
}

Campi obbligatori

Asterisco 'Obbligatorio'

Asterisco campo obbligatorio

.wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 400;
}

Errori di convalida

Errore di convalida

Riquadro Campo
.wpforms-form .wpforms-field input.wpforms-error, .wpforms-form .wpforms-field textarea.wpforms-error, .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}
Messaggio di Validazione
.wpforms-container em.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}
Icona di Errore di Validazione

Icona errore di convalida

 .wpforms-container-full .wpforms-form em.wpforms-error:before {
    content: '';
    position: relative;
    display: inline-block;
    right: 5px;
    top: 1.5px;
    width: 16px;
    height: 14px;
    background-color: var(--wpforms-label-error-color);
}

Campi standard

Testo a riga singola

Campo testo a riga singola

Spaziatura Testo Riga Singola
.wpforms-form  .wpforms-field.wpforms-field-text {
    padding: 10px 0;
    clear: both;
}
Etichetta Testo Riga Singola
.wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Riquadro Input Testo Riga Singola
.wpforms-form .wpforms-field.wpforms-field-text input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Testo paragrafo

Campo testo paragrafo

Spaziatura Testo Paragrafo
.wpforms-form .wpforms-field.wpforms-field-textarea {
    padding: 10px 0;
    clear: both;
}
Etichetta Testo Paragrafo
.wpforms-form .wpforms-field.wpforms-field-textarea .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Riquadro Input Testo Paragrafo
.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Campo menu a discesa

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .wpforms-valid {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Campo menu a discesa

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Scelta multipla

Campo a scelta multipla

Spaziatura Campo Scelta Multipla
.wpforms-form .wpforms-field.wpforms-field-radio {
    padding: 10px 0;
    clear: both;
}
Etichetta Campo Scelta Multipla
.wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Etichette Opzioni Scelta Multipla
.wpforms-form .wpforms-field.wpforms-field-radio ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Caselle di controllo

Campo caselle di controllo

Spaziatura Caselle di Controllo
.wpforms-form .wpforms-field.wpforms-field-checkbox {
    padding: 10px 0;
    clear: both;
}
Etichetta Caselle di Controllo
.wpforms-form .wpforms-field.wpforms-field-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Etichette Opzioni Caselle di Controllo
.wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Numeri

Campo numerico

Spaziatura Numeri
.wpforms-form .wpforms-field.wpforms-field-number {
    padding: 10px 0;
    clear: both;
}
Etichetta Numeri
.wpforms-form .wpforms-field.wpforms-field-number .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Casella di inserimento numeri
.wpforms-form .wpforms-field.wpforms-field-number input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Nome

Campo nome

Casella di inserimento nome
.wpforms-form input[type=text].wpforms-field-name-first {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Casella di inserimento secondo nome
.wpforms-form input[type=text].wpforms-field-name-middle {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Casella di inserimento cognome
.wpforms-form input[type=text].wpforms-field-name-last {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Email

Campo email

Padding email
.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}
Etichetta email
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Casella di inserimento email (solo primaria)
.wpforms-form input[type=email].wpforms-field-email-primary {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Casella di inserimento email (solo conferma email)
.wpforms-form input[type=email].wpforms-field-email-confirmation {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Sottoetichette email
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Cursore numerico

Campo slider numerico

Padding cursore numerico
.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}
Etichetta cursore numerico
.wpforms-form .wpforms-field.wpforms-field-number-slider .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Barra cursore numerico
.wpforms-form .wpforms-field.wpforms-field-number-slider input[type=range] {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Accordo GDPR

Campo accordo GDPR

Padding accordo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}
Etichetta accordo GDPR
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Fatto! Ora puoi usare questi selettori per applicare CSS personalizzato ai campi standard nei tuoi moduli.

Successivamente, desideri stilizzare altri campi in WPForms? Assicurati di consultare i nostri tutorial sulla personalizzazione dello stile dei campi avanzati e dei campi di pagamento.

Ancora bloccato? Come possiamo aiutarti?
Ultimo aggiornamento il 04 giugno 2024

Il miglior plugin per la creazione di moduli drag and drop per WordPress

Facile, veloce e sicuro. Unisciti a oltre 6 milioni di proprietari di siti web che si affidano a WPForms.