post

Formatando Colunas do Formulário CF7 com CSS

Publicado em: 19/06/2023 / Atualizado 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>

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para 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 e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários