Como Exibir Seu Formulário em Uma Única Linha no WordPress (Maneira Fácil)

Exibir um formulário em uma única linha é uma ótima maneira de economizar espaço, ao mesmo tempo em que confere um visual limpo ao seu site.

Funciona especialmente bem em cabeçalhos, rodapés ou barras laterais, permitindo que você coloque formulários em áreas de alto tráfego e aumente as conversões.

Na WPBeginner, testamos diferentes posicionamentos de formulários de contato para otimizar nosso processo de captura de leads. Através dessa experiência, descobrimos que formulários simples geralmente levam a taxas de conclusão mais altas.

Neste artigo, mostraremos como exibir facilmente seu formulário em uma única linha no WordPress, passo a passo.

Por Que Exibir Formulários de Linha Única no WordPress?

Formulários de linha única oferecem mais flexibilidade ao escolher onde posicionar seus formulários. Como esse estilo de formulário é apenas uma linha, eles não ocupam muito espaço e podem ser facilmente integrados ao seu conteúdo existente em um blog WordPress.

Por exemplo, formulários de inscrição para newsletters por e-mail são frequentemente exibidos em uma única linha acima ou abaixo do conteúdo do post do blog. Esses tipos de formulários também funcionam bem em páginas de destino, páginas de contato e outras páginas importantes em seu site.

Além de gerar mais assinantes e leads, você pode transformar qualquer tipo de formulário em um formulário de linha única.

Por exemplo, pode fazer sentido exibir seu formulário de contato em uma única linha para economizar espaço no site WordPress e tornar seu formulário mais responsivo para dispositivos móveis.

Dito isso, vamos mostrar como exibir um formulário de linha única em seu site WordPress.

Como Criar um Formulário de Linha Única no WordPress

Para este tutorial, usaremos o plugin WPForms. Ele possui um construtor de arrastar e soltar que permite criar rapidamente qualquer formulário WordPress. Além disso, ele se integra a ferramentas de marketing por e-mail populares para que você possa expandir facilmente sua lista de e-mails.

Na WPBeginner, usamos essa ferramenta para criar formulários de contato e pesquisas anuais, e vimos ótimos resultados. Para mais informações, veja nossa análise completa do WPForms.

Primeiro, você precisa instalar e ativar o plugin WPForms. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress. 

Após a ativação, visite a página WPForms » Adicionar Novo na barra lateral de administração do seu WordPress e dê um nome ao seu formulário. Em seguida, você deve escolher o modelo do seu formulário.

Selecionaremos o modelo 'Formulário de Inscrição'. Simplesmente passe o mouse sobre o modelo e clique no botão 'Usar Modelo'.

Isso iniciará o construtor de formulários de arrastar e soltar do WPForms na tela.

Você verá que o modelo que escolhemos inclui automaticamente os campos de nome e e-mail e um botão de envio.

Cada campo pode ser editado clicando nele e fazendo alterações na coluna da esquerda.

Você também pode arrastar e soltar os campos para alterar sua ordem.

Assim que terminar de personalizar os campos, você pode exibir seu formulário em uma única linha.

Para fazer isso, mude para a aba Configurações » Geral no construtor de formulários e, em seguida, clique no menu suspenso 'Avançado'.

Em seguida, digite ‘inline-fields’ na caixa ‘Classe CSS do Formulário’ (sem aspas).

Isso aplicará essa classe CSS ao formulário. Como o WPForms inclui estilos para a classe ‘inline-fields’, ele mudará automaticamente todo o layout do seu formulário e o exibirá de forma agradável em uma única linha.

Depois disso, você pode tornar seu formulário ainda menor ocultando os rótulos dos campos.

Para fazer isso, basta clicar em um campo no formulário para abrir suas configurações na coluna da esquerda.

Depois de fazer isso, selecione a opção de menu ‘Avançado’ e clique no alternador ‘Ocultar Rótulo’ para ativá-lo.

Em seguida, você precisará fazer a mesma coisa para todos os rótulos dos campos do formulário.

Depois disso, na mesma seção ‘Avançado’, você pode inserir texto na caixa ‘Placeholder’. 

Isso informa aos seus usuários para que serve cada campo do formulário. 

Quando terminar de personalizar seu formulário, certifique-se de clicar no botão ‘Salvar’ para armazenar suas configurações. 

Se você estiver usando seu formulário para gerar leads, poderá conectar seu formulário ao seu provedor de marketing por e-mail. Para mais detalhes, consulte nosso guia sobre como criar uma newsletter por e-mail da maneira certa. 

Adicionando Seu Formulário de Linha Única ao Seu Site WordPress

Agora, é hora de adicionar seu formulário de linha única ao seu site WordPress. Você pode adicioná-lo a qualquer página, postagem ou área de widget.

Vamos adicioná-lo a uma página existente, mas o processo será semelhante se você estiver adicionando-o a outra área do seu blog WordPress.

Simplesmente abra a página onde você deseja o formulário de linha única e clique no botão ‘Adicionar Bloco’ (+) para abrir o menu de blocos.

Em seguida, clique no bloco ‘WPForms’ para adicioná-lo ao seu site.

Em seguida, escolha o formulário de linha única que você criou anteriormente no menu suspenso no próprio bloco.

Assim que você escolher seu formulário, o plugin carregará uma prévia do seu formulário dentro do editor de conteúdo. Em seguida, clique no botão ‘Atualizar’ ou ‘Publicar’ para tornar seu novo formulário ativo.

Agora, você pode visitar seu site para ver seu novo formulário em ação. 

Bônus: Use o OptinMonster para Criar Pop-ups e Banners

Além de criar formulários de linha única, você também pode criar formulários de contato flutuantes, pop-ups de inscrição e banners em seu site para capturar leads por e-mail.

Para fazer isso, você pode usar o OptinMonster, que é a melhor ferramenta de otimização de conversão para WordPress do mercado.

Nós o usamos consistentemente no WPBeginner para criar pop-ups e banners que promovem nossos serviços profissionais e newsletter, e nós adoramos. Para saber mais, veja nossa análise completa do OptinMonster.

A ferramenta permite que você crie formulários de inscrição atraentes que exibem informações personalizadas e relevantes com base no interesse do seu usuário e torna super fácil capturar leads.

Para instruções detalhadas, você pode querer ver nosso tutorial sobre como criar um pop-up de formulário de contato no WordPress.

Além disso, você também pode criar banners atraentes para o seu site, pedindo aos usuários para se inscreverem e fazerem parte da sua newsletter.

Dessa forma, você consegue capturar os detalhes do usuário sem ocupar muito espaço no site ou incomodar os usuários.

Para mais detalhes, consulte nosso guia para iniciantes sobre como criar uma lista de e-mail com OptinMonster.

Esperamos que este artigo tenha ajudado você a aprender como exibir seu formulário em uma única linha no WordPress. Você também pode querer ver nosso guia sobre como criar formulários mais interativos ou nossa seleção especializada das melhores alternativas ao Typeform.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.