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

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

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

Configurar o Seu Formulário

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

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

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

Adicionar o Estilo do Rótulo

Agora é hora de adicionar o código CSS ao seu site. Se não tem a certeza de como adicionar CSS ao seu site, consulte 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, verá que os rótulos do seu formulário agora aparecem na mesma linha que os campos do seu formulário.

E é tudo! Gostaria de estilizar os rótulos do formulário para aparecerem dentro do campo do formulário? Consulte o nosso tutorial sobre Como Criar um Formulário com Rótulos Flutuantes.

Perguntas Frequentes

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

R: Se desejar isto para todos os seus formulários, use este CSS em vez disso e salte o passo acima ao adicionar a Classe CSS do Formulário. Isto não seria necessário se quisesse aplicar isto a todos os formulários.

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

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