### [Criação de um formulário com rótulos flutuantes](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/)

**Publicado:** 31 de agosto de 2020
**Autor:** Umair Majeed

**Trecho:** Este tutorial irá guiá-lo pelas etapas de uso de PHP e CSS para personalizar seu formulário, utilizando rótulos flutuantes nos campos do formulário. 

**Conteúdo:**

Gostaria de dar aos seus formulários uma aparência moderna e interativa com rótulos flutuantes? Os rótulos flutuantes oferecem uma maneira elegante de exibir rótulos de campo que se animam quando os usuários interagem com os campos do formulário.

Este guia mostrará como implementar esse recurso usando o WPForms.

Para se inspirar em designs de rótulos flutuantes, você pode consultar a [documentação do Material Design](https://material.io/develop/web/supporting/floating-label) sobre campos de texto.

## Criando seu formulário

Começaremos criando um formulário de contato simples. Se precisar de ajuda para criar um formulário, [consulte esta documentação](https://wpforms.com/docs/creating-first-form/ "Criando seu primeiro formulário").

Se houver um campo **Telefone** no formulário, você precisará definir o formato como **EUA** ou **Internacional**. Este trecho de código não funcionará no formato **Smart**.

Você também precisará adicionar um texto **Placeholder** a cada campo. Esse texto pode ser adicionado selecionando o campo e clicando na guia **Avançado** para inserir o texto.

Se precisar de ajuda sobre como fazer isso, consulte nosso guia sobre [como adicionar texto de preenchimento a um campo](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/).

![lembre-se de adicionar texto de preenchimento a cada campo](https://wpforms.com/wp-content/uploads/2022/08/wpforms-float-labels-add-placeholder.jpg)## Adicionando classes CSS

Em seguida, vamos adicionar uma classe CSS de `floating` aos campos para os quais desejamos ter rótulos flutuantes.

Selecione cada campo um por um, clique na guia **Avançado** e adicione `floating` no campo **Classes CSS**.

Se estiver usando mais de uma classe CSS para um campo, certifique-se de colocar um espaço entre cada nome de classe.

![No construtor de formulários, em Opções de campo, adicione o nome da classe flutuante às Classes CSS](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-add-css-class.jpg)## Rótulos flutuantes – trecho de PHP

Vamos adicionar alguns pequenos trechos de PHP que farão com que o rótulo saia da parte superior dos campos do formulário e passe a ficar logo abaixo deles.

Substitua **1289** na **linha 10** e na **linha 28** pelo ID do seu formulário.

Se precisar de ajuda sobre como e onde adicionar trechos 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").

O que este snippet faz é remover a posição do rótulo do campo, que era exibido **antes** do campo, e colocá-lo **depois** do campo.

## Rótulos flutuantes – snippet CSS

Agora que nosso formulário está criado e nossos snippets estão no lugar, precisamos adicionar o CSS personalizado ao nosso site para integrar tudo isso.

Para obter ajuda sobre como e onde adicionar CSS personalizado, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como adicionar estilos CSS personalizados para o WPForms").

Substitua **1682** na **linha 1** e na **linha 4** pelo ID do seu formulário.

![Você adicionou rótulos flutuantes ao seu WPForms com sucesso](https://wpforms.com/wp-content/uploads/2022/08/wpforms-create-floating-label.jpg)## Perguntas frequentes

#### P: A validação de campo ainda será exibida?

**R:** Com certeza! Os erros de validação manterão o mesmo estilo.

![rótulos flutuantes com erro de validação de campo](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-labels-validation-error.jpg)#### P: Por que isso não está funcionando para mim?

**R:** Certifique-se de revisar as etapas acima; se você não tiver inserido o texto **Placeholder** nos campos, os rótulos não parecerão ter o efeito flutuante quando um usuário clicar dentro do campo.

E é isso! Você acabou de criar um formulário com rótulos flutuantes que aparecem quando o usuário começa a digitar no campo. Em seguida, você gostaria de alterar a cor da mensagem de confirmação ou simplesmente removê-la completamente? Dê uma olhada em nosso artigo sobre [Como remover o estilo da caixa de mensagem de confirmação](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "Como remover o estilo da caixa de mensagem de confirmação").

## 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

---