Estilizando os Rótulos do Formulário para Aparecerem ao Lado dos Campos

Você gostaria de criar um layout de formulário mais compacto, exibindo os rótulos ao lado de seus campos em vez de acima deles? Embora o WPForms exiba os rótulos acima dos campos por padrão, você pode modificar facilmente este layout usando CSS para mostrar os rótulos e campos lado a lado.

Este tutorial mostrará como alcançar este layout horizontal profissional.

Configurando Seu Formulário

Primeiro, você precisará criar seu formulário e adicionar os campos desejados. Se precisar de ajuda, consulte este guia sobre como criar seu primeiro formulário.

Depois de criar seu formulário, clique em Configurações » Geral, clique na seta Avançado para abrir estas opções. Uma vez lá, dentro da Classe CSS do Formulário, adicione a classe wpforms-inline-labels.

Esta classe CSS nos permite direcionar formulários específicos em vez de afetar todos os formulários do seu site.

Adicionando o Estilo dos Rótulos

Agora é hora de adicionar o código CSS ao seu site. Se você não tem certeza de como adicionar CSS ao seu site, confira este guia sobre como adicionar estilos CSS personalizados.

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Após adicionar este CSS, você verá que os rótulos do seu formulário agora aparecem na mesma linha que os campos do seu formulário.

E é isso! Você gostaria de estilizar os rótulos do formulário para aparecerem dentro do campo do formulário? Confira nosso tutorial sobre Como Criar um Formulário com Rótulos Flutuantes.

Perguntas Frequentes

P: E se eu quisesse aplicar isso a todos os meus formulários?

R: Se você quiser isso para todos os seus formulários, use este CSS em vez disso e pule a etapa acima ao adicionar a Classe CSS do Formulário. Isso não seria necessário se você quisesse aplicar isso a todos os formulários.

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

É isso! Em seguida, você gostaria de explorar mais opções de estilo de formulário? Dê uma olhada em nosso guia sobre como estilizar o botão de envio com CSS.