### [Estilizar os Rótulos do Formulário para Aparecerem ao Lado dos Campos](https://wpforms.com/developers/how-to-style-the-form-labels-beside-the-fields/)
**Publicado:** 8 de dezembro de 2021
**Autor:** Umair Majeed
**Resumo:** Este tutorial irá guiá-lo através da configuração e estilização dos seus rótulos de formulário para que flutuem ao lado dos seus campos de formulário.
**Conteúdo:**
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, você pode modificar facilmente este layout usando CSS para mostrar os rótulos e os campos lado a lado.
Este tutorial mostrará como alcançar este layout horizontal profissional.
Devido à marcação HTML em certos campos, esta estilização pode não funcionar perfeitamente com todos os tipos de campo. Recomendamos testar a aparência do seu formulário após implementar estas alterações.
## Configuração do Seu Formulário
Primeiro, você precisará 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](https://wpforms.com/docs/creating-first-form/).
Depois de criar o 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 permite-nos direcionar formulários específicos em vez de afetar todos os formulários no seu site.
## Adicionar a Estilização dos Rótulos
Agora é hora de adicionar o código CSS ao seu site. Se não tiver certeza de como adicionar CSS ao seu site, consulte este guia sobre [como adicionar estilos CSS personalizados](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
```
.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 seus campos de formulário.
E é isso! 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](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "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 você quiser isto 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**. Isto não seria necessário se você quisesse aplicar isto a todos os formulários.
```
.wpforms-container .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
```
É isso! Em seguida, gostaria de explorar mais opções de estilização de formulários? Dê uma olhada no nosso guia sobre [como estilizar o botão de envio com CSS](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/).
**Categorias:** Estilização
**Tags:** CSS
---