Resumo de IA
Deseja converter um formulário com layout de várias colunas para uma única coluna quando visualizado em dispositivos móveis? Embora o uso de várias colunas possa ficar ótimo em telas maiores, a alteração para um layout de formulário de coluna única em telas menores fará com que seus formulários pareçam profissionais e fáceis de usar.
Este tutorial mostrará como transformar seus layouts de várias colunas em uma única coluna apenas para usuários que visitam seu site em um dispositivo móvel.
Observação: Recomendamos o uso 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 da tela dos usuários. No entanto, as classes CSS de layout abordadas neste tutorial ainda são suportadas.
Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado em seu site WordPress e que você tenha verificado sua licença. Em seguida, você pode criar um novo formulário ou editar um existente para acessar o construtor de formulários.
Criando um Layout de Formulário de Várias Colunas
Com o WPForms, você pode facilmente criar formulários com várias colunas. Para este exemplo, vamos criar um layout de duas colunas usando a seguinte classe CSS: wpforms-one-half. Aqui está um exemplo de como nosso formulário de várias colunas ficará.
Observação: O primeiro campo em cada linha na imagem acima também usa a classe wpforms-first (ou seja, wpforms-one-half wpforms-first. Essa classe informa ao campo que ele precisa iniciar uma nova linha.
Após criar um layout de formulário de duas colunas, queremos garantir que os campos do formulário sejam exibidos em uma única coluna apenas para usuários que visitam seu site em um dispositivo móvel.
Exibindo Campos em Uma Única Coluna no Celular
Para exibir os campos em uma única coluna em dispositivos móveis, precisaremos usar uma classe CSS predefinida. No construtor de formulários, clique em um campo para exibir as Opções do Campo. Em seguida, na seção Avançado, adicione a classe wpforms-mobile-full ao campo Classes CSS.
Por fim, faça o mesmo para os outros campos do formulário e lembre-se de clicar no botão Salvar para manter as alterações.
Agora, para visitantes de dispositivos móveis, seu layout de formulário de várias colunas será exibido como uma única coluna. Aqui está um exemplo de como o formulário ficaria em um dispositivo móvel:
Pronto! Agora você pode criar formulários que mudam de layouts de várias colunas para uma única coluna em dispositivos móveis.
Em seguida, deseja personalizar ainda mais a aparência do seu formulário? Então, confira nosso tutorial sobre como adicionar CSS personalizado ao seu formulário.