Resumo de IA
Pretende converter um layout de formulário de várias colunas para uma única coluna quando visualizado em dispositivos móveis? Embora a utilização de várias colunas possa ter um ótimo aspeto em ecrãs maiores, a alteração para um layout de formulário de coluna única em ecrãs mais pequenos fará com que os seus formulários pareçam profissionais e fáceis de usar.
Este tutorial irá mostrar-lhe como transformar os seus layouts de várias colunas numa única coluna apenas para utilizadores que visitem o seu site num dispositivo móvel.
Nota: Recomendamos a utilização do campo Layout para uma abordagem mais simples de arrastar e soltar na criação de layouts de formulário avançados que se ajustam automaticamente ao tamanho do ecrã dos utilizadores. No entanto, as classes CSS de layout abordadas neste tutorial ainda são suportadas.
Antes de começar, precisará primeiro de garantir que o WPForms está instalado e ativado no seu site WordPress e que verificou a sua licença. Depois, pode criar um novo formulário ou editar um existente para aceder ao construtor de formulários.
Criar um Layout de Formulário de Várias Colunas
Com o WPForms, pode facilmente criar formulários com várias colunas. Para este exemplo, vamos criar um layout de duas colunas utilizando a seguinte classe CSS: wpforms-one-half. Aqui está um exemplo de como o nosso formulário de várias colunas ficará.
Nota: O primeiro campo em cada linha na imagem acima também utiliza a classe wpforms-first (ou seja, wpforms-one-half wpforms-first. Esta classe indica ao campo que ele precisa de iniciar uma nova linha.
Após criar um layout de formulário de duas colunas, queremos garantir que os campos do formulário são exibidos numa única coluna apenas para os utilizadores que visitam o seu site num dispositivo móvel.
Exibir Campos Numa Única Coluna em Dispositivos Móveis
Para exibir campos numa única coluna em dispositivos móveis, precisaremos de usar uma classe CSS predefinida. No construtor de formulários, clique num campo para exibir as Opções do Campo. Em seguida, na secção Avançadas, adicione a classe wpforms-mobile-full ao campo Classes CSS.
Finalmente, faça o mesmo para os outros campos do formulário e lembre-se de clicar no botão Guardar para manter as alterações.
Agora, para os visitantes móveis, o seu layout de formulário de várias colunas será apresentado como uma única coluna. Eis um exemplo de como o formulário ficaria num dispositivo móvel:
É tudo! Pode agora criar formulários que mudam de layouts de várias colunas para uma única coluna em dispositivos móveis.
Em seguida, pretende personalizar ainda mais a aparência do seu formulário? Então, certifique-se de consultar o nosso tutorial sobre como adicionar CSS personalizado ao seu formulário.