Como exibir seu formulário em uma única linha no WordPress (maneira fácil)

A criação de formulários que sejam atraentes e fáceis de usar é essencial para uma boa experiência do usuário.

A exibição de um formulário em uma única linha pode ser particularmente eficaz para espaços compactos, como cabeçalhos, rodapés ou barras laterais, mantendo o site com aparência limpa e profissional.

Isso significa que você pode adicionar facilmente formulários a áreas de alto tráfego do seu site e aumentar as conversões.

Ao longo dos anos, fizemos experiências com diferentes posicionamentos de formulários de contato para aperfeiçoar nosso processo de captura de leads. Essa experiência prática nos ensinou que campos simples, de uma única linha, podem levar 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?

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

Por exemplo, os formulários de inscrição em boletins informativos por e-mail geralmente são 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 do 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 o formulário de contato em uma única linha para economizar espaço no site do WordPress e tornar o 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 para criar um formulário de linha única, pois ele é um dos melhores plugins de geração de leads para WordPress, usado por mais de 6 milhões de sites.

Você pode usar o construtor de arrastar e soltar para criar rapidamente qualquer formulário do WordPress. Além disso, ele se integra a ferramentas populares de marketing por e-mail para que você possa aumentar facilmente sua lista de e-mails.

Para obter mais informações, consulte nossa análise completa do WPForms.

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

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

Selecionaremos o modelo “Opt-In Form”. Basta passar o mouse sobre o modelo e clicar no botão “Use Template” (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.

Todos os campos podem ser editados clicando neles e fazendo alterações na coluna da esquerda.

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

Quando terminar de personalizar os campos, você poderá exibir o formulário em uma única linha.

Para fazer isso, vá para a guia Configurações ” Geral no construtor de formulários e clique no menu suspenso “Avançado”.

Em seguida, digite “inline-fields” na caixa “Form CSS Class” (sem aspas).

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

Depois disso, você pode diminuir ainda mais o tamanho do formulário ocultando os rótulos dos campos.

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

Depois de fazer isso, selecione a opção de menu “Advanced” (Avançado) e clique no botão “Hide Label” (Ocultar rótulo) para ativá-lo.

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

Depois disso, na mesma seção “Advanced” (Avançado), você pode inserir texto na caixa “Placeholder” (Espaço reservado).

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

Quando terminar de personalizar o formulário, não se esqueça de clicar no botão “Save” (Salvar) para armazenar suas configurações.

Se você estiver usando o formulário para gerar leads, poderá conectá-lo ao seu provedor de marketing por e-mail. Para obter mais detalhes, consulte nosso guia sobre como criar um boletim informativo por e-mail da maneira correta.

Como adicionar 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, post 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 do WordPress.

Basta abrir a página em que você deseja o formulário de linha única e clicar no botão “Add Block” (+) 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 do próprio bloco.

Depois que você escolher o formulário, o plug-in carregará uma visualização do formulário no editor de conteúdo. Em seguida, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para tornar seu novo formulário ativo.

Agora, você pode visitar seu site para ver o 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 opt-in e banners no seu site para capturar leads de e-mail.

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

O OptinMonster permite que você crie belos formulários de opt-in que exibem informações personalizadas e relevantes com base no interesse do usuário e facilita muito a captura de leads.

Para obter instruções detalhadas, consulte 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, solicitando que os usuários se inscrevam e façam parte do seu boletim informativo.

Dessa forma, é possível capturar detalhes do usuário sem ocupar muito espaço no site ou incomodar os usuários.

Para obter detalhes, consulte nosso guia para iniciantes sobre como criar uma lista de e-mails com o OptinMonster.

Esperamos que este artigo o tenha ajudado a aprender como exibir seu formulário em uma única linha no WordPress. Talvez você também queira 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, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.