Resumo de IA
Gostaria que os campos do seu formulário fossem apresentados numa única linha? Ter o seu formulário numa disposição de linha única pode ajudá-lo a colocá-lo em áreas chave do seu site (como a secção superior da sua página inicial) para obter a máxima exposição.
Neste tutorial, vamos mostrar-lhe como apresentar o seu formulário numa única linha.
Nota: Se prefere uma opção simples de arrastar e largar para personalizar o layout do seu formulário, sugerimos a utilização do campo Layout. No entanto, a classe inline-fields abordada neste tutorial ainda é suportada e é recomendada se desejar alinhar o botão de envio na mesma linha que os campos do seu formulário.
Para o nosso exemplo, vamos criar um formulário com três campos: Nome, Telefone e Email.
Para apresentar os campos do formulário numa única linha, navegue até Definições » Geral no seu construtor de formulários e adicione a classe CSS inline-fields ao campo Classe CSS do Formulário.
Nota: Tenha em atenção que a utilização da classe inline-fields no WPForms pode, por 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 secção Avançadas de cada campo e selecione a opção Ocultar Rótulo.
Em seguida, vamos configurar algum texto de placeholder para fornecer orientação aos utilizadores. Para o nosso exemplo, adicionaremos Email como texto de placeholder para o nosso campo de Email.
Nota: Se desejar alterar a aparência do botão de envio para se adequar ao estilo do seu formulário, pode seguir o nosso guia sobre como personalizar o botão de envio.
Veja como o formulário ficará no frontend do site:
Nota: Se procura outro exemplo ou um modelo pronto a usar para um formulário de linha única, consulte o nosso Modelo de Formulário de Inscrição de Newsletter Inline.
É tudo! Agora pode criar formulários que serão apresentados numa única linha.
Em seguida, gostaria de receber uma cópia das informações enviadas pelos seus utilizadores através dos seus formulários? Certifique-se de que consulta o nosso tutorial sobre configuração de notificações de formulário para mais detalhes.