Resumo de IA
Gostaria de dar aos seus formulários um visual moderno e interativo com rótulos flutuantes? Rótulos flutuantes oferecem uma maneira elegante de exibir rótulos de campo que animam quando os usuários interagem com os campos do seu formulário.
Este guia mostrará como implementar este recurso usando WPForms.
Criando Seu Formulário
Começaremos criando um formulário de contato simples. Se precisar de alguma assistência para criar um formulário, por favor, revise esta documentação.
Se houver um campo Telefone no formulário, você precisará definir o formato como EUA ou Internacional. Este trecho não funcionará no formato Inteligente.
Você também precisará adicionar texto Placeholder a cada campo. Este texto pode ser adicionado selecionando o campo e clicando na aba Avançado para adicionar o texto.
Se precisar de ajuda sobre como fazer isso, confira nosso guia sobre como adicionar texto placeholder a um campo.
Adicionando Classes CSS
Em seguida, adicionaremos uma classe CSS de floating aos campos que desejamos que tenham rótulos flutuantes.
Selecione cada campo um por um e clique na aba Avançado e adicione floating dentro do campo Classes CSS.
Rótulos Flutuantes – Trecho PHP
Adicionaremos alguns pequenos trechos PHP que removerão o rótulo de estar acima dos campos do formulário para ficar logo abaixo dos campos do formulário.
Se precisar de assistência sobre como e onde adicionar trechos ao seu site, por favor, revise este tutorial.
O que este trecho está fazendo é remover a posição do rótulo do campo de ser exibido antes do campo e colocá-lo depois do campo.
Rótulos Flutuantes – Trecho CSS
Agora que nosso formulário está criado e nossos trechos estão no lugar, precisamos adicionar o CSS personalizado ao nosso site para juntar tudo isso.
Para obter assistência sobre como e onde adicionar CSS personalizado, por favor, revise este tutorial.
Perguntas Frequentes
P: A validação do campo ainda será exibida?
R: Com certeza! Os erros de validação manterão o mesmo estilo.
P: Por que isso não está funcionando para mim?
A: Certifique-se de rever os passos acima. Se você esqueceu de colocar o texto Placeholder nos campos, os rótulos não terão o efeito de flutuar quando um usuário clicar dentro do campo.
E é isso! Você criou um formulário com rótulos flutuantes que sobem quando o usuário começa a digitar no campo. Em seguida, você gostaria de alterar a cor da mensagem de confirmação ou apenas removê-la completamente? Dê uma olhada em nosso artigo sobre Como Remover a Estilização da Caixa de Mensagem de Confirmação.