### [Come aggiungere Material Design ai campi del tuo modulo utilizzando CSS](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/) **Pubblicato:** 26 agosto 2020 **Autore:** Umair Majeed **Estratto:** Questo tutorial ti mostrerà come utilizzare PHP e CSS per aggiungere Material Design ai campi del tuo modulo. **Contenuto:** Vuoi aggiungere Material Design ai tuoi campi WPForms? Questo tipo di design è un modo molto popolare per aggiungere un aspetto moderno e pulito ai campi del tuo modulo. Utilizzando un piccolo snippet PHP insieme a CSS, puoi facilmente applicare questo look ai tuoi WPForms. In questo tutorial, ti guideremo attraverso ogni passaggio su come ottenerlo. Per ulteriori informazioni sui principi di Material Design, puoi consultare la [documentazione di Material Design di Google](https://m3.material.io/). ## Creazione del tuo modulo Per prima cosa, dovrai creare il tuo modulo e aggiungere i campi che desideri. Se hai bisogno di assistenza nella creazione del tuo modulo, [ti preghiamo di consultare questo tutorial](https://wpforms.com/docs/creating-first-form/ "Come creare il tuo primo modulo"). Ai fini del tutorial, stiamo solo creando un semplice modulo di feedback. Il nostro esempio includerà i campi modulo **Nome**, **Email**, **Oggetto** e **Testo Paragrafo**. È importante ricordare che il nostro tutorial si concentra sull'aggiunta di questo tipo di design **solo** ai campi che accettano l'input di testo diretto. L'aggiunta di questo tipo di design a tutti i campi del modulo potrebbe non avere l'effetto desiderato, quindi ricorda di testare prima il tuo modulo per assicurarti che l'aspetto sia esattamente quello che stai cercando. ## Material Design – Snippet PHP Successivamente, aggiungeremo un piccolo snippet PHP. Dobbiamo farlo per spostare l'etichetta del campo del modulo da prima del campo del modulo a dopo. Per assistenza su come aggiungere uno snippet di codice al tuo sito, [ti preghiamo di consultare questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzato per WPForms"). Questo snippet verrà eseguito solo sul modulo ID **697**. Se l'ID del modulo corrisponde, la nostra prima funzione **wpf\_dev\_display\_field\_before** rimuoverà l'azione PHP che imposta l'etichetta del campo per essere visualizzata **prima** del campo del modulo. La funzione successiva forzerà quindi l'etichetta ad apparire **dopo** il campo del modulo. ## Material Design – Snippet CSS Il tuo ultimo passaggio è aggiungere questo CSS al tuo sito che aggiungerà l'aspetto Material Design a tutti i nostri campi modulo. Sostituisci **697** in tutti i selettori con l'ID del tuo modulo. Se hai bisogno di aiuto nell'aggiungere CSS al tuo sito, [ti preghiamo di consultare questo tutorial.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms") E questo è tutto! Ora hai aggiunto l'aspetto Material Design ai campi del tuo modulo! Se desideri provare altre soluzioni CSS, dai un'occhiata alla nostra [Documentazione sullo Stile](https://wpforms.com/categories/docs/styling/ "Documentazione sullo Stile di WPForms"). ## 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 ---