Personalizzazione dello stile dei campi fantasiosi

Aggiornato:
Visualizza Markdown

Desideri personalizzare singoli campi nei tuoi moduli, senza influenzare gli altri campi del modulo? Con il selettore CSS corretto, puoi modificare gli stili di qualsiasi componente del modulo per adattarlo alle tue esigenze.

Questo tutorial fornisce un elenco di selettori che ti serviranno per personalizzare campi avanzati in WPForms.

Nota: I passaggi di questo tutorial sono avanzati e richiedono una certa conoscenza del CSS. Se preferisci non utilizzare alcun codice, puoi consultare la nostra guida su come personalizzare WPForms nell'editor a blocchi.

Utilizzo degli snippet di codice sottostanti

Di seguito è riportato un elenco dei selettori CSS che ti serviranno per selezionare campi avanzati specifici con il tuo codice CSS.

Abbiamo incluso anche gli stili predefiniti che WPForms applica automaticamente a tali selettori. Per personalizzare qualsiasi parte del tuo modulo, puoi copiare uno snippet CSS da questo tutorial nel tuo sito e quindi modificarlo 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.

Nota: Per saperne di più sull'utilizzo del codice sottostante, assicurati di consultare il nostro tutorial su come personalizzare lo stile dei campi standard e di altri elementi del modulo.

Campi Fantasia

Telefono

Campo telefono

Padding Telefono
.wpforms-form .wpforms-field.wpforms-field-phone {
    padding: 10px 0;
    clear: both;
}
Etichetta Telefono
.wpforms-form .wpforms-field.wpforms-field-phone .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Campo di inserimento Telefono
.wpforms-form .wpforms-field.wpforms-field-phone 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;    
}
Menu a discesa Elenco Paesi (Formato Intelligente)
.wpforms-form .wpforms-field.wpforms-field-phone .iti__country-list {
    position: absolute;
    z-index: 2;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
    background-color: white !important;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;  
}

Indirizzo (USA o Internazionale)

Campo indirizzo

Padding Indirizzo
.wpforms-form .wpforms-field.wpforms-field-address {
    padding: 10px 0;
    clear: both;
}
Etichetta Indirizzo
.wpforms-form .wpforms-field.wpforms-field-address .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Campi di inserimento Indirizzo
.wpforms-form .wpforms-field.wpforms-field-address 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;
}
Menu a discesa Indirizzo (Schema USA: Stato)
.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-state {
    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;
}
Menu a discesa Indirizzo (Schema Internazionale: Paese)
.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-country {
    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;
}

Data/Ora

Campo Data Ora

Padding Data/Ora
.wpforms-form .wpforms-field.wpforms-field-date-time {
    padding: 10px 0;
    clear: both;
}
Etichetta Data/Ora
.wpforms-form .wpforms-field.wpforms-field-date-time .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Campo di inserimento Data/Ora
.wpforms-form .wpforms-field.wpforms-field-date-time 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;    
}
Selettore Data Data/Ora: Calendario completo

Calendario selezionatore data

.flatpickr-calendar {
    background: transparent;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 293.75px;
    box-sizing: border-box;
    -webkit-transition: top .1s cubic-bezier(0,1,.5,1);
    transition: top .1s cubic-bezier(0,1,.5,1);
    z-index: 9999999999;
    background: #fff;
    box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,.08);
}
Selettore Data Data/Ora: Data corrente sul calendario
.flatpickr-day.today {
    border-color: #959ea9;
}
Selettore Data Data/Ora: Giorni del mese precedente e successivo sul calendario
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(57,57,57,.3);
    background: transparent;
    border-color: transparent;
    cursor: default;
}
Data/Ora: Selettore Ora

Selezionatore ora

.ui-timepicker-wrapper {
    overflow-y: auto;
    height: 142px;
    width: 6.5em;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    outline: none;
    z-index: 10001;
    margin: 0;
}

Caricamento file

Campo caricamento file

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

Sito web/URL

Campo URL sito web

Padding Sito Web/URL 
.wpforms-form .wpforms-field.wpforms-field-url {
    padding: 10px 0;
    clear: both;
}
Etichetta Sito Web/URL
.wpforms-form .wpforms-field.wpforms-field-url .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Campo di inserimento Sito Web/URL
.wpforms-form .wpforms-field.wpforms-field-url 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;
}

Password

Campo password

Padding password

.wpforms-form .wpforms-field.wpforms-field-password {
    padding: 10px 0;
    clear: both;
}
Etichetta password
.wpforms-form .wpforms-field.wpforms-field-password .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 password
.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}
Casella di inserimento password
.wpforms-form .wpforms-field.wpforms-field-password 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;    
}

Ripetitore

Campo ripetitore

Pulsanti Aggiungi e Rimuovi Blocco

Pulsanti blocco

.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}
Pulsante Aggiungi Blocco

Aggiungi pulsante

.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-add {
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 33px;
    max-width: 33%;
    padding: 6px 12px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    transition: opacity 0.2s ease;
    outline: none;
}
Pulsante Rimuovi Blocco

Rimuovi pulsante

.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-remove {
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 33px;
    max-width: 33%;
    padding: 6px 12px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    transition: opacity 0.2s ease;
    outline: none; 
}
Pulsanti Aggiungi e Rimuovi Riga

Pulsanti aggiungi e rimuovi riga

.wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons {
    position: absolute;
    right: 10px;
    left: unset;
    padding: 0;
    display: none;
    gap: 8px;
}

Interruzione di pagina

Pulsante Avanti

Pulsante successivo

.wpforms-form .wpforms-page-button.wpforms-page-next {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 10px 15px;
}
Pulsante Indietro

Pulsante precedente

.wpforms-form .wpforms-page-button.wpforms-page-prev {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 10px 15px;
}

Divisore di sezione

Campo divisore sezione

Padding separatore di sezione
.wpforms-form .wpforms-field.wpforms-field-divider {
    padding: 10px 0;
    clear: both;
}
Titolo separatore di sezione
.wpforms-form .wpforms-field.wpforms-field-divider h3 {
    font-size: 24px;
}
Descrizione separatore di sezione
.wpforms-form .wpforms-field.wpforms-field-divider .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Anteprima inserimento

Anteprima voce

Padding anteprima voce
.wpforms-form .wpforms-field.wpforms-field-entry-preview {
    padding: 10px 0;
    clear: both;
}
Avviso anteprima voce

Avviso anteprima voce

.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-notice {
    box-sizing: border-box;
    padding: 15px;
    background: #fef8ee;
    border: 1px solid #f0b849;
    display: block;
    width: 100%;
    word-break: break-word;
}
Tabella anteprima voce

Tabella di anteprima della voce

.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-basic {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}

HTML

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

Contenuto

Casella di inserimento contenuto
.wpforms-form .wpforms-field.wpforms-field-content {
    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: 20px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Valutazione

Stelle campo valutazione

Padding valutazione
.wpforms-form .wpforms-field.wpforms-field-rating {
    padding: 10px 0;
    clear: both;
}
Etichetta valutazione
.wpforms-form .wpforms-field.wpforms-field-rating .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Padding elemento valutazione
.wpforms-form .wpforms-field-rating-item {
    padding-right: 6px;
}

Captcha personalizzato

Campo Captcha

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

Testo formattato

Campo Rich Text

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

Firma

Campo firma

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

Scala Likert

Campo Scala Likert

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

Net Promoter Score

Campo Net Promoter Score

Padding Net Promoter Score
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score {
    padding: 10px 0;
    clear: both;
}
Etichetta Net Promoter Score
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Tabella Net Promoter Score
.wpforms-form .wpforms-field.wpforms-field-net_promoter_score table {
    width: 100%;
    line-height: 1.4;
    border-collapse: initial;
}

Questo è tutto! Ora sai come usare questi selettori per applicare CSS personalizzato ai campi avanzati nei tuoi moduli.

Successivamente, vuoi applicare stili al tema per cambiare il design generale del tuo modulo? Il nostro tutorial su come usare i temi dei moduli copre tutti i passaggi in dettaglio.

Ancora bloccato? Come possiamo aiutarti?
Ultimo aggiornamento il 10 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.