Riassunto AI
Vuoi dare ai tuoi moduli un aspetto moderno e interattivo con etichette fluttuanti? Le etichette fluttuanti offrono un modo elegante per mostrare le etichette dei campi che si animano quando gli utenti interagiscono con i campi del tuo modulo.
Questa guida ti mostrerà come implementare questa funzionalità utilizzando WPForms.
Creazione del tuo modulo
Inizieremo creando un semplice modulo di contatto. Se hai bisogno di assistenza per la creazione di un modulo, consulta questa documentazione.
Se nel modulo è presente un campo Telefono, dovrai impostare il formato su US o Internazionale. Questo snippet non funzionerà con il formato Smart.
Dovrai anche aggiungere testo segnaposto a ciascun campo. Questo testo può essere aggiunto selezionando il campo e facendo clic sulla scheda Avanzate per aggiungere il testo.
Se hai bisogno di aiuto su come fare ciò, consulta la nostra guida su come aggiungere testo segnaposto a un campo.
Aggiunta di classi CSS
Successivamente, aggiungeremo una classe CSS di floating ai campi per i quali desideriamo etichette fluttuanti.
Seleziona ogni campo uno per uno e fai clic sulla scheda Avanzate e aggiungi floating nel campo Classi CSS.
Etichette fluttuanti – Snippet PHP
Aggiungeremo un paio di piccoli snippet PHP che rimuoveranno l'etichetta dalla posizione sopra i campi del modulo per posizionarla appena sotto i campi del modulo.
Se hai bisogno di assistenza su come e dove aggiungere snippet al tuo sito, consulta questo tutorial.
Ciò che questo snippet fa è rimuovere la posizione dell'etichetta del campo dall'essere visualizzata prima del campo e posizionarla dopo il campo.
Etichette fluttuanti – Snippet CSS
Ora che il nostro modulo è creato e i nostri snippet sono in posizione, dobbiamo aggiungere il CSS personalizzato al nostro sito per unire il tutto.
Per assistenza su come e dove aggiungere CSS personalizzato, consulta questo tutorial.
FAQ
D: La convalida del campo verrà ancora visualizzata?
R: Assolutamente! Gli errori di convalida manterranno lo stesso stile.
D: Perché non funziona per me?
A: Assicurati di ripercorrere i passaggi precedenti; se hai dimenticato di inserire il testo Placeholder nei campi, le etichette non avrebbero l'effetto fluttuante quando un utente fa clic all'interno del campo.
E questo è tutto! Ora hai creato un modulo con etichette fluttuanti che salgono quando l'utente inizia a digitare nel campo. Successivamente, desideri modificare il colore del messaggio di conferma o rimuoverlo completamente? Dai un'occhiata al nostro articolo su Come rimuovere lo stile della casella del messaggio di conferma.