Come centrare un modulo

Vuoi centrare i tuoi moduli nelle pagine di WordPress? Mentre i moduli WPForms sono impostati di default al 100% della larghezza del loro contenitore, puoi facilmente centrarli usando CSS personalizzato.

Questa guida ti mostrerà come centrare perfettamente i tuoi moduli e i loro elementi.

Impostazione del modulo

Innanzitutto, dovrai creare il tuo modulo. Se hai bisogno di aiuto con questo, puoi sempre consultare questa documentazione per assistenza.

Una volta creato il tuo modulo e aggiunti i campi, dovrai impostare ogni Dimensione campo su Grande.

Per farlo, fai clic sulla scheda Avanzate e seleziona Grande dal menu a discesa Dimensione campo.

Aggiunta della classe CSS

Dopo aver impostato la dimensione del campo su Grande, dovrai aggiungere una classe CSS speciale. Per farlo, apri il generatore di moduli e vai su Impostazioni » Generali. Scorri quindi verso il basso fino alla sezione Avanzate e individua il campo Classe CSS del modulo. Inserisci wpf-center in questo campo.

Aggiunta del codice CSS

Ecco il codice CSS di base per centrare il tuo modulo:

Questo codice:

• Centra il modulo usando margin: 0 auto
• Imposta una larghezza massima di 500px. Puoi giocare con questo valore finché non trovi quello che soddisfa le tue esigenze
• Garantisce la reattività mobile regolando la larghezza sugli schermi più piccoli

Centrare tutti gli elementi del modulo

Se vuoi centrare tutto all'interno del modulo (etichette, descrizioni, pulsanti), usa questa versione estesa:

Personalizzazione della larghezza

Per regolare la larghezza del modulo, modifica queste due righe nel CSS:

max-width: 500px !important;
width: 500px !important;

Sostituisci 500px con la larghezza desiderata. Ad esempio, per un modulo più largo:

max-width: 800px !important;
width: 800px !important;

Domande frequenti

D: Perché il CSS non funziona per me?

R: Innanzitutto, verifica di aver aggiunto il nome della classe wpf-center nella pagina Impostazioni » Generali del tuo modulo. Questo è il motivo più comune per cui il CSS non funziona. Se ancora non funziona, cancella la cache del tuo browser e aggiorna la pagina.

D: Come faccio a centrare solo il pulsante di invio?

R: Usa questo CSS semplificato e aggiungi la classe wpf-center-button (invece di wpf-center) al campo Classe CSS del tuo modulo:

Successivamente, aggiungi questo CSS al tuo sito.

.wpforms-container.wpf-center-button .wpforms-submit-container {
    text-align: center;
}

E questo è tutto ciò che ti serve per centrare il tuo modulo. Successivamente, vorresti poter cambiare il colore del pulsante di invio sui tuoi moduli? Dai un'occhiata al nostro articolo su come cambiare il colore del pulsante di invio.