post

Formatando Colunas do Formulário CF7 com CSS

Publicado em: 19/06/2023

Categorias: BlogContact Form 7CSSWordpress

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.

Clique aqui e entre em contato


Comentários