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

Introdução

Gostaria de personalizar o número de colunas apresentadas na vista móvel para campos de múltipla escolha? Por defeito, os campos de múltipla escolha no WPForms são apresentados em colunas únicas. No entanto, poderá personalizá-lo com um excerto de CSS personalizado.

Neste tutorial, vamos mostrar-lhe como usar uma apresentação de 2 colunas na vista móvel para os campos de múltipla escolha (Caixas de seleção e Escolha Múltipla) do WPForms.

Criar o Seu Formulário

Para acompanhar este tutorial, necessitará de criar um novo formulário ou editar um existente para aceder ao construtor de formulários. No construtor de formulários, certifique-se de que adiciona o campo Caixas de seleção ou Escolha Múltipla ao seu formulário.

Depois disso, clique no campo de múltipla escolha para aceder ao seu painel de Opções de Campo. Em seguida, navegue até ao separador Avançadas.

Aqui, selecione a opção Layout das Escolhas e escolha a opção Duas Colunas.

Quando visualizar o seu formulário, este será apresentado em 2 colunas para o campo Caixas de seleção ou Escolha Múltipla. No entanto, em dispositivos móveis, cada escolha será apresentada numa única coluna.

Neste tutorial, vamos mostrar-lhe como usar CSS personalizado para forçar os campos de Escolha Múltipla e Caixas de seleção a manterem o layout de colunas numa apresentação móvel.

Adicionar o Trecho

Para começar, vamos adicionar primeiro o excerto ao site. Se precisar de ajuda sobre como e onde adicionar excertos, certifique-se de que revê 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 que substitui #wpforms-form-2525 pelo ID do formulário específico ao qual deseja aplicar estas alterações. Veja o nosso tutorial para saber como obter o ID do Formulário e o ID do Campo se precisar de ajuda com isso.

Este excerto garantirá que os campos Caixas de seleção e Escolha Múltipla que utilizam o layout de 2 colunas mantêm o layout na vista móvel.

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

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