### [Exibir Campos Numa Única Coluna em Dispositivos Móveis](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/) **Publicado:** 23 de novembro de 2023 **Autor:** David Ozokoye **Resumo:** Aprenda a usar classes CSS de layout para exibir os seus formulários numa única coluna em dispositivos móveis. **Conteúdo:** 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 bom 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 mostrar-lhe-á como transformar os seus layouts de várias colunas numa única coluna apenas para os utilizadores que visitam o seu site num dispositivo móvel. - [Criar um Layout de Formulário de Várias Colunas](#multi-column) - [Exibir Campos Numa Única Coluna em Dispositivos Móveis](#single-column-mobile) **Nota:** Recomendamos a utilização do [Campo de Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) para uma abordagem mais simples de arrastar e soltar para construir 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, terá primeiro de garantir que o WPForms está [instalado e ativado](https://wpforms.com/docs/install-wpforms-plugin/ "Como Instalar o Plugin WPForms") no seu site WordPress e que [verificou a sua licença](https://wpforms.com/docs/verify-wpforms-license/ "Como Verificar a Sua Licença WPForms"). Em seguida, pode [criar um novo formulário](https://wpforms.com/docs/creating-first-form/ "Como Criar o Seu Primeiro Formulário") ou editar um existente para aceder ao construtor de formulários. Veja o nosso [Modelo de Formulário Personalizável de Pedido de Orçamento com Várias Colunas](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) para começar facilmente. ## Criar um Layout de Formulário de Várias Colunas Com o WPForms, pode facilmente [criar formulários com várias colunas.](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "Como Criar Layouts de Formulário de Várias Colunas no WPForms") 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á exibido como uma única coluna. Aqui está um exemplo de como o formulário ficaria num dispositivo móvel: É tudo! Agora pode 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](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/ "Como Adicionar CSS Personalizado aos Seus WPForms") ao seu formulário. **Categorias:** Estilização, Estilização e Personalização ---