### [Creazione di un modulo con etichette fluttuanti](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/)

**Pubblicato:** 31 agosto 2020
**Autore:** Umair Majeed

**Estratto:** Questo tutorial ti guiderà attraverso i passaggi necessari per utilizzare PHP e CSS per personalizzare il tuo modulo in modo da utilizzare etichette fluttuanti per i campi del modulo. 

**Contenuto:**

Ti piacerebbe dare ai tuoi moduli un aspetto moderno e interattivo con le 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 modulo.

Questa guida ti mostrerà come implementare questa funzionalità utilizzando WPForms.

Per trovare ispirazione sui design delle etichette fluttuanti, puoi consultare la [documentazione di Material Design](https://material.io/develop/web/supporting/floating-label) sui campi di testo.

## Creazione del modulo

Inizieremo creando un semplice modulo di contatto. Se hai bisogno di assistenza per la creazione di un modulo, [consulta questa documentazione](https://wpforms.com/docs/creating-first-form/ "Creazione del tuo primo modulo").

Se nel modulo è presente un campo **Telefono**, dovrai impostare il formato su **USA** o **Internazionale**. Questo snippet non funzionerà con il formato **Smart**.

Dovrai inoltre aggiungere un testo **Placeholder** a ciascun campo. Questo testo può essere aggiunto selezionando il campo e cliccando sulla scheda **Avanzate** per inserire il testo.

Se hai bisogno di aiuto su come farlo, consulta la nostra guida su [come aggiungere un testo di segnaposto a un campo](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/).

![ricordati di aggiungere un testo segnaposto a ciascun campo](https://wpforms.com/wp-content/uploads/2022/08/wpforms-float-labels-add-placeholder.jpg)## Aggiunta di classi CSS

Successivamente, aggiungeremo una classe CSS denominata `floating` ai campi per i quali desideriamo avere etichette fluttuanti.

Seleziona ogni campo uno per uno, clicca sulla scheda **Avanzate** e aggiungi `floating` nel campo **Classi CSS**.

Se utilizzi più di una classe CSS per un campo, assicurati di inserire uno spazio tra i nomi delle classi.

![All'interno del generatore di moduli, in Opzioni campo, aggiungi il nome della classe floating alle Classi CSS](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-add-css-class.jpg)## Etichette fluttuanti – Snippet PHP

Aggiungeremo un paio di piccoli snippet PHP che sposteranno l'etichetta dalla parte superiore dei campi del modulo a quella immediatamente sottostante.

Sostituisci **1289** alla **riga 10** e alla **riga 28** con l'ID del tuo modulo.

Se hai bisogno di assistenza su come e dove aggiungere gli snippet al tuo sito, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzati per WPForms").

Questo snippet rimuove la posizione dell'etichetta del campo dalla visualizzazione **prima** del campo e la posiziona **dopo** il campo.

## Etichette fluttuanti – snippet CSS

Ora che il nostro modulo è stato creato e i nostri snippet sono al loro posto, dobbiamo aggiungere il CSS personalizzato al nostro sito per mettere tutto insieme.

Per assistenza su come e dove aggiungere CSS personalizzati, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms").

Sostituisci **1682** alla **riga 1** e alla **riga 4** con l'ID del tuo modulo.

![Hai aggiunto con successo le etichette fluttuanti al tuo WPForms](https://wpforms.com/wp-content/uploads/2022/08/wpforms-create-floating-label.jpg)## Domande frequenti

#### D: La convalida dei campi verrà comunque visualizzata?

**R:** Assolutamente sì! Gli errori di convalida manterranno lo stesso stile.

![etichette fluttuanti con errore di convalida del campo](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-labels-validation-error.jpg)#### D: Perché non funziona?

**R:** Assicurati di ripercorrere i passaggi sopra indicati; se hai tralasciato di inserire il testo **Placeholder** nei campi, le etichette non appariranno con l'effetto fluttuante quando un utente clicca all'interno del campo.

E questo è tutto! Hai ora creato un modulo con etichette fluttuanti che appaiono quando l'utente inizia a digitare nel campo. Successivamente, desideri modificare il colore del messaggio di conferma o semplicemente rimuoverlo completamente? Dai un'occhiata al nostro articolo su [Come rimuovere lo stile della finestra di messaggio di conferma](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "Come rimuovere lo stile della finestra di messaggio di conferma").

## Azioni di riferimento

- [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ "Utilizzo dell'azione wpforms_display_field_after")
- [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ "Utilizzo dell'azione wpforms_display_field_before")

**Categorie:** Tutorial

**Tag:** CSS, PHP

---