### [Como adicionar o 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á como usar PHP e CSS para adicionar o Material Design aos campos do seu formulário. 

**Conteúdo:**

Gostaria de adicionar o Material Design aos campos do seu WPForms? Esse tipo de design é uma maneira muito popular de dar uma aparência moderna e clean aos campos do seu formulário. Usando um pequeno trecho de código PHP junto com CSS, você pode aplicar facilmente essa aparência ao seu WPForms.

Neste tutorial, vamos guiá-lo passo a passo para que você consiga fazer isso.

Para mais informações sobre os princípios do Material Design, você pode consultar a [documentação do Material Design do Google](https://m3.material.io/).

## Criando seu formulário

Primeiro, você precisará criar seu formulário e adicionar os campos que deseja incluir. Se precisar de ajuda para criar seu formulário, [consulte este tutorial](https://wpforms.com/docs/creating-first-form/ "Como criar seu primeiro formulário").

Para fins deste tutorial, vamos criar apenas um formulário de feedback simples. Nosso exemplo incluirá os campos de formulário **Nome**, **E-mail**, **Assunto** e **Texto do parágrafo**.

![Crie seu formulário e adicione seus campos](https://wpforms.com/wp-content/uploads/2020/08/wpforms-material-design-create-form.jpg)É importante lembrar que nosso tutorial se concentra em adicionar esse tipo de design **apenas** a campos que aceitam entrada direta de texto. Adicionar esse tipo de design a todos os campos do formulário pode não ter o efeito desejado que você espera, portanto, lembre-se de testar seu formulário primeiro para garantir que a aparência seja exatamente a que você deseja.

## Material Design – trecho de código PHP

Em seguida, vamos adicionar um pequeno trecho de código PHP. Precisamos fazer isso para mover o rótulo do campo do formulário de antes do campo para depois.

Para obter ajuda 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 o WPForms").

Este trecho será executado apenas no formulário com ID **697**. Se o ID do formulário corresponder, 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 função seguinte forçará então o rótulo a aparecer **depois** do campo do formulário.

## Material Design – Trecho de CSS

Sua etapa final é adicionar este CSS ao seu site, o que dará a aparência do Material Design a todos os campos do 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 o WPForms")

![Você acabou de adicionar o Material Design ao seu formulário](https://wpforms.com/wp-content/uploads/2020/08/wpforms-material-design.jpg)E pronto! Você adicionou o visual do Material Design aos campos do seu formulário! Se quiser experimentar outras soluções CSS, dê uma olhada em toda a nossa [Documentação de Estilo](https://wpforms.com/categories/docs/styling/ "Documentação de Estilo do 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

---