Riassunto AI
Vuoi aggiungere Material Design ai tuoi campi WPForms? Questo tipo di design è un modo molto popolare per aggiungere un aspetto moderno e pulito ai tuoi campi modulo. Utilizzando un piccolo snippet PHP insieme a CSS puoi facilmente applicare questo look ai tuoi WPForms.
In questo tutorial, ti guideremo passo dopo passo su come ottenere questo risultato.
Creazione del tuo modulo
Innanzitutto, dovrai creare il tuo modulo e aggiungere i campi che desideri. Se hai bisogno di assistenza nella creazione del tuo modulo, consulta questo tutorial.
Ai fini del tutorial, stiamo creando solo 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 modulo potrebbe non avere l'effetto desiderato che speri, 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 modulo da prima del campo modulo a dopo.
Per assistenza su come aggiungere uno snippet di codice al tuo sito, consulta questo tutorial.
Questo snippet verrà eseguito solo sul modulo con 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 modulo. La funzione successiva forzerà quindi l'etichetta ad apparire dopo il campo modulo.
Material Design – Snippet CSS
Il tuo ultimo passo è aggiungere questo CSS al tuo sito che aggiungerà l'aspetto Material design a tutti i nostri campi modulo.
Se hai bisogno di aiuto nell'aggiungere CSS al tuo sito, consulta questo tutorial.
E questo è tutto! Ora hai aggiunto l'aspetto Material Design ai tuoi campi modulo! Se desideri provare altre soluzioni CSS, dai un'occhiata a tutta la nostra Documentazione sullo Stile.