post
Formatando Colunas do Formulário CF7 com CSS
Publicado em: 19/06/2023
Para customizar as colunas dos campos, para que seja possível adicionar 2 campos na mesma linha, podemos adicionar um pouco de CSS personalizado, como exemplo abaixo:

Para isso estou usando um ID (identificador único) com nome de brc-container-form-1, e para os campos, vamos usar brc-col1 para os campos com largura de 100% e brc-col2 para os campos com 50% de largura.
Segue exemplo abaixo:
<!-- Exemplo de estrutura HTML para CF7 --> <div id="brc-container-form-1"><div class="brc-col2"><label>Nome[text* your-name class:input-field placeholder"Digite seu nome e sobrenome"]</label></div> <div class="brc-col2"><label>E-mail[text* your-email class:input-field placeholder"Digite seu E-mail"]</label></div> <div class="brc-col2"><label>Telefone[tel* telefone class:input-field placeholder"Digite seu telefone com DDD"]</label></div> <div class="brc-col2"><label>Empresa[text* empresa class:input-field placeholder"Digite o nome da sua empresa"]</label></div> <div class="brc-col2"><label>Cargo[select* cargo class:input-field include_blank "Sócio/Dono" "Diretor/C-level" "Síndico" "Gerente/Coordenador" "Subsíndico" "Analista" "Outro"]</label></div> <div class="brc-col2"><label>Segmento[select* segmento class:input-field include_blank "Outros"]</label></div> <div class="brc-col1"><label>Tamanho da empresa[select* tamanho-da-empresa class:input-field include_blank "Microempresa: até 19 colaboradores" "Pequena empresa: de 20 a 99 colaboradores" "Média empresa: de 100 a 499 colaboradores" "Grande empresa: acima de 500 colaboradores"]</label></div> <div class="brc-col1"><label>Mensagem[textarea* your-message class:input-field x5 placeholder"Mensagem"]</label></div> <div class="brc-col1">[submit class:btn-with-arrow class:px-5 "Enviar"]</div></div> <!-- CSS para customização das colunas --> <style> #brc-container-form-1 label { width: 100%; } #brc-container-form-1 .brc-col2 { width: 50%; float: left; box-sizing: border-box; padding-right: 10px; } #brc-container-form-1 .brc-col1 { width: 100%; float: left; box-sizing: border-box; } #brc-container-form-1 [class*="brc-col"] { padding-right: 10px; padding-left: 10px; } #brc-container-form-1 { margin-left: -10px; margin-right: -10px; } @media (max-width: 767px) { #brc-container-form-1 [class*="brc-col"] { width: 100%; padding-right: 0; padding-left: 0; } #brc-container-form-1 { margin-left: 0; margin-right: 0; } } </style>
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/2910
ID de Referência: 2910
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.