Resumo de IA
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 ajudar você a colocá-lo em áreas-chave do seu site (como a seção superior da sua página inicial) para obter máxima exposição.
Neste tutorial, mostraremos como exibir seu formulário em uma única linha.
Observação: Se você prefere uma opção simples de arrastar e soltar para personalizar o layout do seu formulário, sugerimos usar o campo Layout. No entanto, a classe inline-fields abordada neste tutorial ainda é suportada e recomendada se você quiser alinhar o botão de envio na mesma linha dos campos do seu formulário.
Para 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, navegue até 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 WordPress. Como resultado, a aparência pode não corresponder às suas expectativas.
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.
Em seguida, configuraremos um texto de espaço reservado para fornecer orientação aos usuários. Para nosso exemplo, adicionaremos E-mail como texto de espaço reservado para nosso campo de E-mail.
Observação: Se você quiser alterar a aparência do botão de envio para se adequar ao estilo do seu formulário, pode seguir nosso guia sobre como personalizar o botão de envio.
Veja como o formulário ficará no frontend do site:
Observação: Se você estiver procurando outro exemplo ou um modelo pronto para uso de formulário de linha única, confira nosso Modelo de Formulário de Inscrição de Newsletter Inline.
Pronto! 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 por seus usuários através dos seus formulários? Certifique-se de conferir nosso tutorial sobre como configurar notificações de formulário para mais detalhes.