### [Exibindo seu formulário em uma única linha](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/)

**Publicado:** 23 de novembro de 2023
**Autor:** Umair Majeed

**Resumo:** Aprenda a exibir todos os campos do seu formulário em uma única linha.

**Conteúdo:**

Você gostaria que os campos do seu formulário fossem exibidos em uma única linha? Ter seu formulário em um layout de linha única pode ajudá-lo a colocá-lo em áreas-chave do seu site (como a seção superior da sua página inicial) para obter o máximo de visibilidade.

Neste tutorial, mostraremos como exibir seu formulário em uma única linha.

![Formulário embutido](https://wpforms.com/wp-content/uploads/2023/06/inline-form.gif "Formulário embutido")**Observação:** Se você preferir uma opção simples de arrastar e soltar para personalizar o layout do seu formulário, sugerimos usar o [campo Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/). No entanto, a classe `inline-fields` abordada neste tutorial ainda é compatível e é recomendada se você quiser alinhar o botão de envio na mesma linha que os campos do formulário.

---

Para o nosso exemplo, criaremos um formulário com três campos: **Nome**, **Telefone** e **E-mail**.

Para exibir os campos do formulário em uma única linha, acesse **Configurações » Geral** no seu construtor de formulários e adicione a classe CSS `inline-fields` ao campo **Classe CSS do formulário**.

**Observação:** Esteja ciente de que o uso da classe `inline-fields` no WPForms pode, às vezes, entrar em conflito com os estilos do seu tema do WordPress. Como resultado, a aparência pode não corresponder às suas expectativas.

![CSS de campos inline](https://wpforms.com/wp-content/uploads/2021/07/Inline-fields-CSS.png)Em seguida, para reduzir a altura do seu formulário, abra a seção **Avançado** de cada campo e selecione a opção **Ocultar rótulo**.

![Ocultar rótulo do campo](https://wpforms.com/wp-content/uploads/2021/07/Hide-Label-for-field-1.png)Em seguida, vamos configurar um texto de preenchimento para orientar os usuários. Para o nosso exemplo, adicionaremos **E-mail** como texto de preenchimento para o nosso campo de e-mail.

![Adicionar texto de preenchimento](https://wpforms.com/wp-content/uploads/2021/07/add-placeholder-text.png)**Observação:** Se você quiser alterar a aparência do botão de envio para se adequar ao estilo do seu formulário, siga [nosso guia sobre como personalizar o botão de envio](https://wpforms.com/docs/how-to-customize-the-submit-button/).

Veja como o formulário ficará na interface do site:

Ative o JavaScript no seu navegador para preencher este formulário.

Nome

E-mail

Telefone

Enviar![Carregando](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 **Observação:** Se você estiver procurando outro exemplo ou um modelo pronto para uso para um formulário de linha única, confira nosso [Modelo de Formulário de Inscrição em Boletim Informativo Inline](https://wpforms.com/templates/inline-newsletter-signup-form/).

É isso! Agora você pode criar formulários que serão exibidos em uma única linha.

Em seguida, você gostaria de receber uma cópia das informações enviadas pelos usuários por meio dos seus formulários? Não deixe de conferir nosso tutorial sobre [como configurar notificações de formulário](https://wpforms.com/docs/setup-form-notification-wpforms/ "Como configurar notificações de formulário no WPForms") para obter mais detalhes.

**Categorias:** Estilo, Estilo e personalização

---