Como Adicionar CSS ao Foco do Campo do Formulário

Gostaria de realçar a aparência dos seus campos de formulário quando os utilizadores interagem com eles? Quando um utilizador clica num campo de formulário, este entra no que é chamado de “estado de foco” em CSS.

Este guia mostrar-lhe-á como adicionar efeitos visuais atraentes que fazem com que os seus campos de formulário se destaquem ligeiramente da página quando os utilizadores interagem com eles.

Compreender o Foco dos Campos de Formulário

Por defeito, o WPForms adiciona uma borda simples em volta dos campos quando estes estão em foco (quando um utilizador clica ou navega para eles). Podemos realçar este comportamento padrão com CSS personalizado para criar um feedback visual mais envolvente.

Configurar o Seu Formulário

Primeiro, crie o seu formulário e adicione os campos desejados. Se precisar de ajuda para criar um formulário, consulte o nosso guia sobre como criar o seu primeiro formulário.

Adicionar CSS Para Efeitos de Foco Personalizados

Para adicionar efeitos de foco personalizados, precisará de adicionar CSS ao seu site. Se não tem a certeza de como adicionar CSS personalizado, consulte o nosso guia sobre como adicionar CSS personalizado ao seu site.

Aqui está o código CSS para criar um efeito de foco apelativo:

O que Este CSS Faz:

• Adiciona um efeito subtil de sombra quando os campos estão em foco
• Cria uma animação de transição suave
• Realça o botão de envio com efeitos de passagem do rato

Personalizar o Código

Terá de atualizar o seletor CSS para corresponder ao ID do seu formulário. Substitua form#wpforms-form-1000 pelo ID real do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso guia sobre como encontrar IDs de formulário e campo.

Opções de Personalização

Pode modificar vários aspetos do efeito de foco:

Intensidade da Sombra

Ajuste a sombra alterando os valores em box-shadow:

box-shadow: 5px 5px 10px #ccc; /* horizontal, vertical, blur, color */

Velocidade da Animação

Altere o tempo da transição:

transition: box-shadow 0.3s ease-in-out; /* property, duration, timing function */

Cores e Estilos

Personalize as cores e as bordas:

button[type=submit]:hover {
    background-color: #eee; /* Change hover background color */
    border: 1px solid #ccc; /* Change border style */
}

Perguntas Frequentes

P: Como posso adicionar autofocus ao meu formulário?

R: Se desejar que o seu formulário foque automaticamente no primeiro campo quando a página carrega, consulte o nosso guia sobre como adicionar autofocus aos seus formulários.

E é tudo! Adicionou com sucesso o CSS necessário para alterar o foco dos campos do formulário. Se desejar experimentar outros tutoriais de CSS sobre como alterar a aparência dos seus campos de formulário, consulte o nosso artigo sobre adicionar design material aos seus formulários.