### [Como Adicionar Material Design aos Campos do Seu Formulário Usando CSS](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/) **Publicado:** 26 de agosto de 2020 **Autor:** Umair Majeed **Resumo:** Este tutorial mostrar-lhe-á como usar PHP e CSS para adicionar Material Design aos seus campos de formulário. **Conteúdo:** Gostaria de adicionar Material Design aos seus campos WPForms? Este tipo de design é uma forma muito popular de adicionar um aspeto moderno e limpo aos seus campos de formulário. Usando um pequeno trecho de PHP juntamente com CSS, pode facilmente aplicar este visual aos seus WPForms. Neste tutorial, iremos guiá-lo passo a passo sobre como conseguir isto. Para mais informações sobre os princípios do Material Design, pode consultar a [documentação do Material Design do Google](https://m3.material.io/). ## Criação do Seu Formulário Primeiro, terá de criar o seu formulário e adicionar os campos que deseja. Se precisar de assistência na criação do seu formulário, [consulte este tutorial](https://wpforms.com/docs/creating-first-form/ "Como Criar o Seu Primeiro Formulário"). Para efeitos do tutorial, estamos apenas a criar um formulário de feedback simples. O nosso exemplo incluirá os campos de formulário **Nome**, **Email**, **Assunto** e **Texto de Parágrafo**. É importante lembrar que o nosso tutorial foca-se em adicionar este tipo de design **apenas** a campos que aceitam entrada de texto direta. Adicionar este tipo de design a todos os campos do formulário pode não ter o efeito desejado que espera, por isso lembre-se de testar o seu formulário primeiro para garantir que o visual é exatamente o que procura. ## Material Design – Trecho PHP Em seguida, vamos adicionar um pequeno trecho PHP. Precisamos de fazer isto para mover o rótulo do campo do formulário de antes do campo do formulário para depois. Para assistência sobre como adicionar um trecho de código ao seu site, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Como Adicionar PHP ou JavaScript Personalizado para WPForms"). Este trecho só será executado no ID de formulário **697**. Se o ID do formulário corresponder, a nossa primeira função **wpf\_dev\_display\_field\_before** removerá a ação PHP que define o rótulo do campo para ser exibido **antes** do campo do formulário. A próxima função forçará então o rótulo a aparecer **depois** do campo do formulário. ## Material Design – Trecho CSS O seu passo final é adicionar este CSS ao seu site que adicionará o visual de design Material a todos os nossos campos de formulário. Substitua **697** em todos os seletores pelo ID do seu formulário. Se precisar de ajuda para adicionar CSS ao seu site, [consulte este tutorial.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms") E é tudo! Já adicionou o visual de Material Design aos seus campos de formulário! Se quiser experimentar outras soluções CSS, dê uma vista de olhos em toda a nossa [Documentação de Estilização](https://wpforms.com/categories/docs/styling/ "Documentação de Estilização WPForms"). ## Ações de Referência - [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ "Usando a ação wpforms_display_field_after") - [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ "Usando a ação wpforms_display_field_before") **Categorias:** Tutoriais **Tags:** CSS, PHP ---