Come regolare lo spazio tra i campi del modulo in WPForms

La spaziatura è una parte cruciale del design del modulo e in WPForms, la spaziatura tra i campi, i titoli e altri aspetti è impostata per impostazione predefinita per offrire l'esperienza ottimale ai visitatori del tuo sito.

Detto questo, ogni sito web è unico. Quindi, se vuoi impostare spazi personalizzati tra i campi per un migliore allineamento con il tuo stile specifico, sei nel posto giusto.

In questo articolo, ti mostrerò passo dopo passo come forzare lo spazio tra i campi in WPForms. Anche se dovrai lavorare un po' con il codice, non è necessaria alcuna conoscenza di programmazione pregressa per seguire il mio metodo.

Come regolare lo spazio tra i campi del modulo in WPForms

Ogni modifica dello spazio in questa guida segue la stessa forma. Decidi quale parte del modulo vuoi spostare, copia il CSS corrispondente e poi scegli dove incollarlo in base al fatto che la modifica debba interessare una pagina, un modulo o ogni modulo sul tuo sito.

Passaggio 1: Installa il plugin WPForms

Per chi inizia da zero, WPForms è un costruttore di moduli drag-and-drop con oltre 2.100 modelli pronti all'uso, quindi di solito puoi partire da qualcosa di vicino a ciò di cui hai bisogno piuttosto che da una tela vuota.

Se non ne hai mai creato uno prima, questa guida su come creare un semplice modulo di contatto è il modo più veloce. Quello che mi piace di più di WPForms per questo particolare lavoro è quanto puoi cambiare prima ancora di toccare il codice.

I controlli di stile visivo gestiscono colori, bordi, dimensioni dei campi e spaziatura dei contenitori, il che copre una quantità sorprendente di ciò che le persone pensano richieda CSS.

Per iniziare, acquista la licenza Pro. Quindi, installa WPForms sul tuo sito web. Se hai bisogno di aiuto, segui queste istruzioni su come aggiungere un plugin a WordPress.

Aggiorna subito a WPForms Pro!

Per gli esempi seguenti sto usando questo modello di modulo di sondaggio pronto all'uso, che ha abbastanza campi per rendere evidenti le modifiche allo spazio.

Passaggio 2: Prova prima i controlli di spaziatura integrati

Prima di scrivere qualsiasi CSS, vale la pena verificare se i controlli visivi fanno già quello che vuoi. Apri il tuo modulo e vai su Impostazioni » Temi nell'editor, oppure fai clic sul modulo all'interno dell'editor di blocchi per aprire lo stesso pannello lì.

Tre di queste impostazioni modificano direttamente lo spazio:

• Stili campo » Dimensione: Questo modifica l'altezza del campo e, più utilmente qui, lo spazio tra un'etichetta e il suo input. Passa tra Piccolo, Medio e Grande.
• Stili etichetta » Dimensione: Regola la dimensione del testo dell'etichetta, il che influisce sulla quantità di spazio occupata da ciascuna etichetta sopra il suo campo.
• Stili contenitore » Spaziatura: Imposta lo spazio all'interno del bordo esterno del modulo. Aumentalo quando il modulo sembra premuto contro uno sfondo o un bordo.

C'è una limitazione onesta da segnalare qui, tuttavia, poiché nessuno di questi controlli imposta lo spazio verticale tra una riga di campi e la successiva, che è la cosa più comune che le persone vogliono cambiare.

Questo spazio è fisso a 15px sopra e sotto ogni campo, e il CSS è l'unico modo per modificarlo. Se i controlli integrati ti hanno portato abbastanza vicino, puoi fermarti qui. Se le righe stesse sono ancora troppo vicine o troppo lontane, continua a leggere.

Passaggio 3: Copia il CSS per la spaziatura che desideri modificare

Ogni snippet qui sotto è disponibile in due forme, una che si applica a ogni modulo WPForms sul tuo sito e una che si rivolge a un singolo modulo tramite il suo ID, che ti servirà quando un modulo necessita di uno spazio diverso dal resto.

Per trovare l'ID di un modulo, vai su WPForms » Tutti i moduli e passa il mouse sul nome del modulo. Oppure, puoi anche aprire il modulo specifico, fare clic su incorpora e copiare direttamente lo shortcode del modulo dall'editor.

WPForms applica già i propri stili a questi elementi, quindi spesso avrai bisogno di !important affinché i tuoi valori prevalgano. L'ho incluso negli snippet qui sotto dove è veramente necessario.

Spazio tra i campi (spazio verticale)

Questo è quello che la maggior parte delle persone cerca. WPForms conferisce a ogni campo 15px di padding in alto e in basso, quindi i campi adiacenti si trovano a 30px di distanza. Ecco lo spazio predefinito sul mio modulo di sondaggio:

Per cambiarlo su tutti i tuoi moduli:

.wpforms-container .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Aumenta entrambi i valori per allontanare i campi in modo uniforme, o diminuiscili per stringere il modulo. Se vuoi solo aumentare lo spazio in una direzione, imposta solo padding-top e lascia invariato il padding inferiore.

Per un singolo modulo, aggiungi l'ID:

#wpforms-2294 .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Spazio sotto il titolo del modulo

Per impostazione predefinita, l'H1 della tua pagina si trova sopra il modulo anziché al suo interno. WPForms inserisce 35px sotto il titolo del modulo prima che inizi il primo campo.

È un po' più di spazio rispetto al divario tra i campi, il che è intenzionale, perché il titolo è un'intestazione e le intestazioni meritano più spazio del contenuto sottostante.

Se preferisci che il titolo risieda all'interno del contenitore del modulo, fai clic sul modulo incorporato nel tuo editor e attiva Mostra titolo nel pannello di destra.

Probabilmente vorrai nascondere l'H1 della pagina a quel punto in modo che il titolo non appaia due volte. Fai clic sull'H1 e premi l'icona dell'occhio che appare.

Ecco lo spazio del titolo prima di qualsiasi modifica:

Per controllarlo, azzera il padding del contenitore e imposta il margine del titolo a quello che desideri effettivamente:

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

.wpforms-container-full .wpforms-title {
	margin-bottom: 15px !important;
}

Lascia padding-bottom a 0 e cambia solo margin-bottom.

Impostarlo a 15px fa sì che il titolo si trovi alla stessa distanza dal primo campo di quanto i campi si trovino l'uno dall'altro.

Questo sembra ordinato quando vuoi che il modulo venga letto come un unico blocco uniforme. Ed ecco il risultato sul mio modulo di sondaggio:

La versione per modulo singolo, con il # su entrambi i selettori:

#wpforms-2294 .wpforms-head-container {
	padding-bottom: 0 !important;
}

#wpforms-2294 .wpforms-title {
	margin-bottom: 15px !important;
}

Spazio tra un'etichetta e il suo campo

Questo spazio confonde le persone perché sembra lo spazio tra i campi, ma è controllato separatamente.

Con il markup moderno, WPForms lo imposta tramite una variabile CSS chiamata --wpforms-field-size-input-spacing, che per impostazione predefinita è 15px.

Sovrascrivere la variabile è più pulito che combattere direttamente con il margine dell'etichetta, poiché mantiene intatta la logica di dimensionamento di WPForms:

.wpforms-container-full {
	--wpforms-field-size-input-spacing: 8px;
}

Abbassalo a circa 8px e ogni etichetta si avvicina al suo input, il che lega visivamente i due insieme.

Questo è veramente utile nei moduli più lunghi, perché uno spazio ridotto tra etichetta e campo, abbinato a spazi più ampi tra le righe, rende molto più facile capire quale etichetta appartiene a quale casella.

Se preferisci non toccare il CSS per questo, il controllo Stili campo » Dimensione dal Passaggio 2 modifica la stessa variabile.

Spazio tra campi affiancati

Quando posizioni i campi uno accanto all'altro usando il campo Layout o le classi di colonna di WPForms, sono separati da una canaletta di 20px. Cambiarla richiede un po' di attenzione, perché la canaletta è costruita da due valori che devono concordare.

Ogni colonna a larghezza dimezzata è impostata su calc(50% - 10px) con un margine sinistro di 20px. Cambia solo il margine e le tue colonne tracimeranno dalla loro riga. Modifica entrambi insieme:

.wpforms-container .wpforms-one-half {
	width: calc(50% - 20px) !important;
	margin-left: 40px !important;
}

La regola è che la sottrazione della larghezza dovrebbe essere la metà della tua grondaia. Una grondaia da 40px significa sottrarre 20px, una grondaia da 30px significa sottrarre 15px, e così via.

Per saperne di più su come creare queste righe in primo luogo, consulta la guida ai layout di moduli multicolonna.

Spazio sopra il pulsante di invio

Il markup moderno controlla il margine superiore del pulsante di invio con la sua variabile, --wpforms-button-size-margin-top, che è impostata su 10px per impostazione predefinita e appare così sul mio modulo:

Quindi puoi impostare il tuo valore e lasciare tutto il resto invariato:

.wpforms-container-full {
	--wpforms-button-size-margin-top: 30px;
}

Dare al pulsante più spazio di quanto ne abbiano i campi è solitamente la scelta giusta, poiché separa l'azione dalle cose che vengono compilate, e la differenza si nota immediatamente:

Riduzione o rimozione dello spazio extra

Ora, tutto quanto sopra funziona al contrario, e chiudere gli spazi è una richiesta comune quanto aprirli. Per stringere le righe, riduci il padding del campo al di sotto del suo valore predefinito di 15px:

.wpforms-container .wpforms-field {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

Se lo spazio che stai combattendo si trova tra il modulo e il contenuto circostante piuttosto che all'interno del modulo, il colpevole è solitamente il contenitore piuttosto che i campi. Imposta il padding del contenitore a zero e rimuovi lo spazio del titolo:

.wpforms-container-full {
	--wpforms-container-padding: 0px;
}

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

Fai attenzione a non stringere troppo, perché una volta che le righe si avvicinano più dello spazio tra un'etichetta e il suo campo, le persone iniziano a leggere male quale etichetta appartiene a quale input, e questo si traduce in dati errati piuttosto che in lamentele. Consiglierei di mantenere almeno 8px di padding su ogni campo.

Passaggio 4: Scegli dove aggiungere il tuo CSS

Lo stesso CSS si comporta in modo diverso a seconda di dove lo incolli, e scegliere il posto giusto ti evita di ripeterti su ogni pagina o di ridisegnare accidentalmente moduli che intendevi lasciare invariati.

Dove lo aggiungi	Cosa influisce
WPForms Builder	Quel modulo, ovunque sia incorporato
Editor a blocchi	Quell'incorporamento, in quella pagina
WPCode	Ogni modulo sul tuo sito

Metodo 1: Il generatore di WPForms

Apri il tuo modulo e vai su Impostazioni » Temi, quindi passa alla scheda Avanzate. Lì troverai una casella CSS personalizzato. Incolla il tuo snippet, quindi fai clic su Salva.

Gli stili aggiunti qui sono memorizzati con il modulo stesso, quindi lo seguono in ogni pagina. Ciò vale sia che tu lo incorpori con il blocco WPForms, lo shortcode o il modulo Divi.

Per la maggior parte delle persone questa è l'impostazione predefinita corretta, perché significa una modifica invece di una modifica per pagina. L'intero set di opzioni è trattato nella documentazione su come stilizzare i tuoi moduli nel generatore di moduli.

Metodo 2: L'editor a blocchi

Fai clic sul blocco del modulo nella tua pagina o post per aprire il pannello di stile sulla destra, quindi apri la sezione Avanzate e aggiungi il tuo CSS lì.

Pubblica o aggiorna la pagina per applicarlo. La differenza qui è la portata, poiché qualsiasi cosa aggiungi nell'editor di blocchi influisce solo su quell'incorporamento specifico.

Puoi eseguire un modulo di contatto su tutto il sito con spaziatura ampia su una pagina di contatto dedicata e spaziatura più stretta in una barra laterale, senza duplicare il modulo.

Nota che questo pannello appare solo per i moduli incorporati con il blocco WPForms, quindi un modulo inserito tramite shortcode non lo avrà. La documentazione su come stilizzare i tuoi moduli nell'editor a blocchi illustra il resto dei controlli.

Metodo 3: WPCode (per tutto il sito)

I due metodi sopra sono limitati a un singolo modulo o a un singolo incorporamento, che è esattamente ciò che desideri nella maggior parte dei casi. Ma se stai standardizzando lo spazio su una dozzina di moduli, impostarlo una volta a livello di sito è meglio che aprirli singolarmente.

Il CSS a livello di sito sopravvive anche a un cambio di tema, cosa che il CSS aggiunto tramite il personalizzatore del tuo tema non fa. WPCode è un plugin gratuito che rende questo processo semplice. Dal menu di amministrazione di WordPress, vai su Plugin » Aggiungi Nuovo.

Cerca WPCode, quindi fai clic su Installa ora accanto ad esso nei risultati. Una volta terminata l'installazione, il pulsante cambia in Attiva. Fai clic su di esso.

Con WPCode attivo, vai su Frammenti di codice » + Aggiungi frammento.

Fai clic su Usa frammento sotto l'opzione Aggiungi il tuo codice personalizzato (Nuovo frammento).

Dai un nome al tuo frammento, quindi scegli Frammento CSS dal menu a discesa Tipo di codice. Questo è importante, perché WPCode non applicherà correttamente il codice se è ancora impostato su PHP.

Incolla il tuo CSS e lascia le impostazioni di inserimento sotto l'Anteprima del codice ai loro valori predefiniti. Nessuno dei frammenti in questa guida necessita di impostazioni diverse.

Salva il frammento, quindi attivalo con l'interruttore in alto a destra. Nulla cambia sul tuo sito finché quell'interruttore non è attivo, il che inganna quasi tutti la prima volta.

Poiché questo si applica a ogni modulo, usa la versione con ID del modulo del tuo frammento se desideri escluderne alcuni. Puoi anche aggiungere i tuoi nomi di classe a campi specifici e puntare a quelli invece, cosa trattata nella documentazione sulle classi CSS personalizzate.

Quanto spazio dovresti mettere tra i campi del modulo?

Il principio principale è la prossimità, il che significa che un'etichetta dovrebbe essere più vicina al proprio campo rispetto a quanto quel campo sia vicino al successivo.

Uno spazio uguale ovunque lascia le persone a indovinare quale etichetta appartiene a quale casella, ed è esattamente per questo che la variabile etichetta-campo predefinita è di 15px mentre i campi adiacenti sono distanti 30px.

Una linea guida comune tra i sistemi di progettazione è quella di distanziare i campi dal 50% al 75% dell'altezza del campo. I campi WPForms sono alti 43px nella dimensione Media, il che colloca l'intervallo consigliato tra circa 21px e 32px.

Il valore predefinito di 30px si colloca comodamente al suo interno, quindi se non sei sicuro se cambiare qualcosa, la risposta è probabilmente no. Alcune altre cose da tenere a mente:

• Dai alle sezioni più spazio rispetto ai campi: Quando un modulo ha gruppi distinti come dettagli di contatto e dettagli di pagamento, raddoppia o triplica lo spazio tra i gruppi in modo che la struttura sia visibile a colpo d'occhio.
• Mantieni la coerenza tra mobile e desktop: WPForms gestisce già lo spazio reattivo, quindi resisti all'aggiunta di spazi specifici per dispositivi mobili a meno che qualcosa non sia veramente rotto.
• Modifica un valore alla volta: I problemi di spaziatura sono solitamente un colpevole, non cinque. Regola il padding dei campi, guarda il modulo, poi vai avanti.

Per saperne di più sul lato progettuale, la nostra guida alle migliori pratiche di progettazione dei moduli approfondisce il layout e l'ordine dei campi.

Domande frequenti sulla spaziatura dei moduli in WPForms

La spaziatura dei moduli in WPForms viene spesso discussa nel supporto, solitamente riguardo a spazi che sembrano troppo ampi o CSS che non vengono applicati. Ecco le domande che vedo più spesso.

Come posso ridurre lo spazio tra i campi in WPForms?

Riduci il padding dei campi al di sotto del suo valore predefinito di 15px. Usa .wpforms-container .wpforms-field { padding-top: 5px !important; padding-bottom: 5px !important; } e regola da lì. Mantieni almeno 8px in modo che le etichette rimangano visivamente collegate ai propri input.

Perché c'è così tanto spazio tra i miei campi del modulo?

Ogni campo ha 15px di padding sopra e sotto, quindi i campi adiacenti si trovano a 30px di distanza prima che il tuo tema aggiunga altro. Se lo spazio sembra maggiore, è probabile che il tuo tema stia applicando i propri margini agli elementi del modulo o ai paragrafi all'interno del contenitore del modulo.

Posso cambiare lo spazio del modulo senza usare CSS?

In parte. Stili Campo » Dimensione modifica la spaziatura tra etichetta e campo e Stili Contenitore » Padding modifica lo spazio all'interno del bordo del modulo, entrambi senza codice. Lo spazio verticale tra le righe dei campi non ha un controllo visivo, quindi quello richiede CSS.

Come posso aggiungere spazio tra due campi sulla stessa riga?

I campi affiancati utilizzano una canaletta (gutter) di 20px creata da una larghezza calc() e un margine sinistro corrispondente. Modifica entrambi insieme, mantenendo la sottrazione della larghezza a metà della canaletta, o le colonne tracimeranno dalla loro riga.

Perché il mio CSS di spaziatura non funziona?

Il più delle volte è un # mancante sul selettore dell'ID del modulo, o gli stili di WPForms che hanno la priorità. Aggiungi !important prima del punto e virgola e conferma che il tuo selettore corrisponda al modulo. La nostra guida alla risoluzione dei problemi CSS che non funzionano copre il resto.

Come posso centrare un modulo in WPForms?

Questa è una questione di larghezza del contenitore piuttosto che di spaziatura, quindi gli snippet qui non lo faranno. Impostare una max-width sul contenitore del modulo con margin: 0 auto è l'approccio usuale.

Successivamente, personalizza il resto del design del tuo modulo

La spaziatura tra campi ed etichette è una delle poche parti della progettazione dei moduli che beneficia ancora di una o due righe di CSS, ma quasi tutto il resto è punta e clicca nello stesso pannello Impostazioni » Temi che hai usato sopra. La nostra guida allo styling dei moduli con l'editor a blocchi illustra l'intero set di controlli.

Se stai ripensando il layout piuttosto che solo la spaziatura, la progettazione dei layout dei moduli copre la struttura delle colonne e l'ordine dei campi, e come stilizzare i moduli di contatto in WordPress è una buona lettura successiva specificamente per i moduli di contatto.

Stilizza i tuoi moduli WordPress ora

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.