Resumo de IA
Gostaria de dar aos seus formulários um aspeto moderno e interativo com rótulos flutuantes? Os rótulos flutuantes fornecem uma forma elegante de mostrar rótulos de campo que animam quando os utilizadores interagem com os seus campos de formulário.
Este guia irá mostrar-lhe como implementar esta funcionalidade utilizando o WPForms.
Criar o Seu Formulário
Começaremos por criar um formulário de contacto simples. Se precisar de alguma assistência na criação de um formulário, por favor, reveja esta documentação.
Se existir um campo Telefone no formulário, terá de definir o formato como EUA ou Internacional. Este trecho não funcionará no formato Inteligente.
Também terá de adicionar texto Placeholder a cada campo. Este texto pode ser adicionado selecionando o campo e clicando no separador Avançadas para adicionar o texto.
Se precisar de ajuda sobre como fazer isto, consulte o nosso guia sobre adicionar texto placeholder a um campo.
Adicionar 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 a um e clique no separador Avançadas e adicione floating no campo Classes CSS.
Rótulos Flutuantes – Trecho PHP
Vamos adicionar alguns pequenos trechos PHP que removerão o rótulo de estar em cima 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, reveja este tutorial.
O que este trecho está a fazer é 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 o nosso formulário está criado e os nossos trechos estão no lugar, precisamos de adicionar o CSS personalizado ao nosso site para juntar tudo isto.
Para assistência sobre como e onde adicionar CSS personalizado, por favor, reveja este tutorial.
FAQ
P: A validação do campo ainda será exibida?
R: Absolutamente! Os erros de validação manterão o mesmo estilo.
P: Por que isto não está a funcionar para mim?
R: Certifique-se de rever os passos acima, se se esqueceu de colocar o texto Placeholder nos campos, os rótulos não parecerão ter o efeito flutuante quando um utilizador clicar dentro do campo.
E é tudo! Criou agora um formulário com rótulos flutuantes que sobem quando o utilizador começa a digitar no campo. Em seguida, gostaria de alterar a cor da mensagem de confirmação ou apenas removê-la completamente? Dê uma vista de olhos ao nosso artigo sobre Como Remover o Estilo da Caixa de Mensagem de Confirmação.