Personalizando Colunas do Campo de Múltipla Escolha em Dispositivos Móveis

Introdução

Gostaria de personalizar o número de colunas exibidas na visualização móvel para campos de múltipla escolha? Por padrão, os campos de múltipla escolha no WPForms são exibidos como colunas únicas. No entanto, você poderá personalizá-lo com um trecho de CSS personalizado.

Neste tutorial, mostraremos como usar uma exibição de 2 colunas na visualização móvel para campos de múltipla escolha (Caixas de seleção e Múltipla escolha) do WPForms.

Criando Seu Formulário

Para acompanhar este tutorial, você precisará criar um novo formulário ou editar um existente para acessar o construtor de formulários. No construtor de formulários, certifique-se de adicionar o campo Caixas de seleção ou Múltipla escolha ao seu formulário.

Depois disso, clique no campo de múltipla escolha para acessar seu painel de Opções de Campo. Em seguida, navegue até a guia Avançado.

Aqui, selecione a opção Layout de Escolha e escolha a opção Duas Colunas.

Ao visualizar seu formulário, ele será exibido em 2 colunas para o campo Caixas de seleção ou Múltipla escolha. No entanto, em dispositivos móveis, cada opção será exibida em uma única coluna.

Neste tutorial, mostraremos como usar CSS personalizado para forçar os campos de Múltipla escolha e Caixas de seleção a manterem o layout de colunas em uma exibição móvel.

Adicionando o Snippet

Para começar, vamos adicionar o trecho ao site primeiro. Se precisar de ajuda sobre como e onde adicionar trechos, certifique-se de revisar esta documentação útil.

/**
 * Customizing Multiple Choice Field Column on Mobile Display
 *
 * @link   https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
 */
 
 /* Checkboxes and Radio Buttons */
 @media screen and (max-width: 600px) {
    /* Target both checkbox and radio fields */
    #wpforms-form-2525 .wpforms-field-checkbox ul,
    #wpforms-form-2525 .wpforms-field-radio ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0; /* Reset any default margins */
        padding: 0; /* Reset any default padding */
    }

    /* Target list items in 2-column layouts */
    #wpforms-form-2525 .wpforms-list-2-columns ul li {
        width: calc(50% - var(--wpforms-field-size-input-spacing));
        margin-right: var(--wpforms-field-size-input-spacing);
        box-sizing: border-box; /* Ensure padding doesn't affect width */
    }

    /* Remove margin from every second item to prevent overflow */
    #wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
        margin-right: 0;
    }
}

Certifique-se de substituir #wpforms-form-2525 pelo ID do formulário específico ao qual deseja aplicar essas alterações. Veja nosso tutorial para saber como recuperar o ID do formulário e o ID do campo se precisar de ajuda com isso.

Este trecho garantirá que os campos de Caixas de seleção e Múltipla escolha que usam o layout de 2 colunas mantenham o layout na visualização móvel.

É isso! Agora você aprendeu como personalizar o layout de colunas para campos de múltipla escolha (Caixas de seleção e Múltipla escolha) na visualização móvel.

Quer aprender mais maneiras de personalizar campos do WPForms? Confira nosso tutorial sobre como adicionar uma opção Selecionar Tudo ao campo Caixas de seleção no WPForms.