Deseja que os campos do formulário sejam exibidos em uma única linha? Ter o formulário em um layout de linha única pode ajudá-lo a colocá-lo em áreas importantes do site (como a seção superior da página inicial) para obter o máximo de exposição.
Neste tutorial, mostraremos como exibir o formulário em uma única linha.
Observação: Se você preferir uma opção simples de arrastar e soltar para personalizar o layout do seu formulário, sugerimos usar a opção Campo de layout. No entanto, o inline-fields abordada neste tutorial ainda é compatível e é recomendada se você quiser alinhar o botão Enviar na mesma linha dos campos do formulário.
Em nosso exemplo, criaremos um formulário com três campos de formulário: Nome, Telefone e E-mail.
Para exibir os campos do formulário em uma única linha, navegue até Configurações " Geral em seu construtor de formulários e adicione a classe CSS inline-fields para o Classe CSS do formulário campo.
Observação: Lembre-se de que o uso do 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 estar alinhada com suas expectativas.
Em seguida, para reduzir a altura do formulário, abra a seção Advanced de cada campo e selecione a opção Hide Label (Ocultar rótulo ).
Em seguida, configuraremos um texto de espaço reservado para fornecer orientação aos usuários. Para o nosso exemplo, adicionaremos Email como texto de espaço reservado para o campo Email.
Observação: se quiser alterar a aparência do botão de envio para que se ajuste ao estilo do formulário, siga nosso guia sobre como personalizar o botão de envio.
Veja como o formulário será exibido no front-end do site:
Observação: se estiver procurando outro exemplo ou um modelo pronto para usar para um formulário de linha única, confira nosso modelo de formulário de assinatura de boletim informativo em linha.
É isso aí! Agora você pode criar formulários que serão exibidos em uma única linha.
Em seguida, gostaria de receber uma cópia das informações enviadas pelos usuários por meio dos formulários? Não deixe de conferir nosso tutorial sobre como configurar notificações de formulários para obter mais detalhes.