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 sítio (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 preferir uma opção simples de arrastar e largar para personalizar a disposição do seu formulário, sugerimos que utilize a opção Campo de layout. No entanto, o inline-fields abordada neste tutorial ainda é suportada e é recomendada se pretender alinhar o botão de envio na mesma linha dos campos do formulário.
Para o nosso exemplo, vamos criar um formulário com três campos de formulário: 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 para o Classe CSS do formulário domínio.
Nota: Tenha em atenção que a utilização do inline-fields no WPForms pode, por vezes, entrar em conflito com os estilos do seu tema WordPress. Como resultado, o aspeto pode não corresponder às suas expectativas.
Depois, para reduzir a altura do formulário, abra a secção Avançadas de cada campo e selecione a opção Ocultar etiqueta.
Em seguida, definiremos um texto de marcador de posição para fornecer orientação aos utilizadores. Para o nosso exemplo, vamos adicionar Email como texto de marcador de posição para o nosso campo Email.
Nota: Se pretender alterar o aspeto 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.
Eis o aspeto do formulário no frontend do sítio:
Nota: Se estiver à procura de outro exemplo ou de um modelo pronto a utilizar para um formulário de linha única, consulte o nosso Modelo de formulário de registo de boletim informativo em linha.
É isso mesmo! 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? Não deixe de consultar o nosso tutorial sobre a configuração de notificações de formulários para obter mais informações.