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

**Excerto:** Este tutorial irá guiá-lo pelos passos necessários para utilizar PHP e CSS para personalizar o seu formulário de forma a utilizar rótulos flutuantes nos campos do formulário. 

**Conteúdo:**

Gostaria de dar aos seus formulários um aspeto moderno e interativo com rótulos flutuantes? Os rótulos flutuantes oferecem uma forma elegante de apresentar rótulos de campos que se animam quando os utilizadores interagem com os campos do seu formulário.

Este guia irá mostrar-lhe como implementar esta funcionalidade utilizando o WPForms.

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

## Criar o seu formulário

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

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

Terá também de adicionar texto **Placeholder** a cada campo. Este texto pode ser adicionado selecionando o campo e clicando no separador **Avançado** para adicionar o texto.

Se precisar de ajuda sobre como fazer isto, consulte o 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)## Adicionar classes CSS

A seguir, vamos adicionar uma classe CSS de `floating` aos campos para os quais queremos ter rótulos flutuantes.

Selecione cada campo um a um, clique no separador **Avançado** e adicione `floating` no campo **Classes CSS**.

Se utilizar mais do que uma classe CSS para um campo, certifique-se de que coloca um espaço entre cada nome de classe.

![No criador 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 irão remover o rótulo da parte superior dos campos do formulário, colocando-o logo abaixo dos campos do formulário.

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 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").

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 o nosso formulário está criado e os nossos snippets estão no lugar, precisamos de adicionar o CSS personalizado ao nosso site para juntar tudo isto.

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.

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

#### P: A validação do campo continuará a ser apresentada?

**R:** Claro que sim! 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: Porque é que isto não está a funcionar para mim?

**R:** Certifique-se de que repete os passos acima; se não tiver colocado o texto **Placeholder** nos campos, os rótulos não parecerão ter o efeito flutuante quando um utilizador clicar dentro do campo.

E é isso! Criou agora um formulário com rótulos flutuantes que aparecem quando o utilizador começa a escrever no campo. A seguir, gostaria de alterar a cor da mensagem de confirmação ou simplesmente removê-la por completo? Consulte o 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/ "Usar a ação wpforms_display_field_after")
- [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ "Utilizar a ação wpforms_display_field_before")

**Categorias:** Tutoriais

**Etiquetas:** CSS, PHP

---