O layout padrão do Contact Form 7 é uma coluna vertical de campos. Nome, email, assunto, mensagem, empilhados uns sobre os outros, esticados a toda a largura. Parece desajeitado e ocupa espaço no ecrã, especialmente quando tem mais de três campos.

Mas o ponto é este: o editor do CF7 entende HTML. Isto significa que pode envolver os campos em contentores div, definir a sua largura e alinhá-los numa linha. Sem plugins, sem truques, apenas CSS puro.

Abaixo estão dois métodos funcionais para organizar os campos do Contact Form 7 em 2, 3 ou 4 colunas. O primeiro é universal (HTML + CSS), o segundo usa o sistema de shortcodes do seu tema. Ambos foram testados em sites ativos e não quebram os layouts em dispositivos móveis.

💡 Visão geral rápida:

• Veja como é um formulário CF7 padrão e porque é que o layout vertical é problemático
• Copie o CSS flexbox pronto a usar e cole-o no seu tema filho (método 1, sem plugins)
• Se o seu tema já suporta shortcodes de colunas, ative-os no CF7 e envolva os seus campos (método 2)
• Teste o resultado em desktop e mobile (media query incluída)

Como é um formulário Contact Form 7 padrão

Depois de criar um formulário através de "Contacto" → "Adicionar Novo", obtém a marcação padrão: campos de texto, email, mensagem e um botão de envio, estritamente empilhados uns sobre os outros. No editor, tem este aspeto:

No frontend, com o TwentySeventeen ou qualquer outro tema sem estilização de formulário personalizada, o resultado será vertical:

Os campos "Nome" e "Email" ocupam toda a largura disponível, mesmo que metade fosse suficiente para cada um. O resultado: o formulário parece volumoso, os utilizadores fazem mais scroll do que o necessário e as conversões caem.

O editor do CF7 foi concebido para aceitar marcação HTML dentro do modelo do formulário. É exatamente isso que vamos usar.

Método 1: HTML + CSS flexbox (recomendado)

A abordagem: envolva os campos do formulário em elementos <div> com classes CSS de coluna e, em seguida, defina essas classes uma vez no seu tema filho ou através de um plugin de CSS personalizado.

Não são necessários plugins de colunas adicionais, apenas o CF7 e algumas linhas de CSS.

Grelha CSS para 2 e 3 colunas

Abaixo está o CSS pronto a usar com flexbox. Ao contrário das soluções baseadas em float, o flex alinha automaticamente as colunas por altura e não requer hacks de clearfix:

1
/* Column row */
2
.cf7-row {
3
    display: flex;
4
    flex-wrap: wrap;
5
    gap: 4%;
6
    margin-bottom: 16px;
7
}
8
 
9
/* 2 columns */
10
.cf7-col-2 {
11
    flex: 0 0 48%;
12
}
13
 
14
/* 3 columns */
15
.cf7-col-3 {
16
    flex: 0 0 30.66%;
17
}
18
 
19
/* Mobile: columns stack vertically */
20
@media only screen and (max-width: 767px) {
21
    .cf7-col-2,
22
    .cf7-col-3 {
23
        flex: 0 0 100%;
24
    }
25
}

Coloque o CSS no seu tema filho (ficheiro style.css) ou através do plugin Simple Custom CSS, que adiciona um campo de estilos no painel de administração sem editar ficheiros.

Marcação dentro do CF7

Abra o editor do formulário (Contacto → o seu formulário) e envolva os campos em contentores div com as classes CSS acima. Para 2 colunas:

1
<div class="cf7-row">
2
  <div class="cf7-col-2">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-2">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
</div>
13
 
14
<label>Your message
15
  [textarea your-message]
16
</label>
17
 
18
[submit "Send"]

No site, o resultado terá este aspeto:

Três colunas, mesma lógica

Para três campos numa linha, altere as classes para cf7-col-3 e adicione um terceiro bloco:

1
<div class="cf7-row">
2
  <div class="cf7-col-3">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-3">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
  <div class="cf7-col-3">
13
    <label>Subject
14
      [text your-subject]
15
    </label>
16
  </div>
17
</div>
18
 
19
<label>Your message
20
  [textarea your-message]
21
</label>
22
 
23
[submit "Send"]

Resultado no frontend:

Os campos «Name», «Email» e «Subject» ficam agora alinhados numa única linha, enquanto a mensagem ocupa toda a largura abaixo deles. Em ecrãs com menos de 767px de largura, todas as colunas colapsam numa só, mantendo o formulário legível em telemóveis.

A vantagem do flexbox: se as alturas dos campos forem diferentes (por exemplo, um rótulo longo numa coluna), a linha não se parte. O flex alinha as colunas automaticamente. As grelhas baseadas em float não conseguem fazer isto sem truques como clearfix e margin-right.

Método 2: colunas com shortcodes do tema

Alguns temas WordPress, especialmente os comerciais como o GeneratePress, Kadence e Astra, incluem um sistema de shortcodes para colunas. Normalmente, aparece como um botão no editor que gera shortcodes do tipo [one_half]...[/one_half] ou [column grid="6"]...[/column].

Se o seu tema suportar isto, pode criar colunas no CF7 sem CSS. No entanto, precisa de permitir que o CF7 processe shortcodes dentro do formulário, uma vez que, por predefinição, ele ignora-os.

Passo 1: ativar shortcodes no editor do CF7

Instale o plugin Contact Form 7 Shortcode Enabler. É mínimo, pesa poucos kilobytes e faz exatamente uma coisa: passa os shortcodes através do CF7.

Alternativa sem plugin: adicione um filtro ao ficheiro functions.php do seu tema filho:

1
add_filter('wpcf7_form_elements', 'cf7_do_shortcode');
2
 
3
function cf7_do_shortcode($form) {
4
    return do_shortcode($form);
5
}

Passo 2: envolver os campos com shortcodes de colunas

O princípio é o mesmo das classes div, mas em vez de classes CSS, usa os shortcodes do tema. O botão de geração encontra-se normalmente no editor visual do WordPress:

Gere os shortcodes para o número de colunas pretendido e insira o conteúdo:

Resultado na página:

Agora transfira os shortcodes para o editor do CF7. Para 2 campos numa linha:

1
[one_half]
2
<label>Your name (required)
3
  [text* your-name]
4
</label>
5
[/one_half]
6
 
7
[one_half_last]
8
<label>Your Email (required)
9
  [email* your-email]
10
</label>
11
[/one_half_last]
12
 
13
<label>Your message
14
  [textarea your-message]
15
</label>
16
 
17
[submit "Send"]

O resultado no frontend são as mesmas duas colunas do método 1. Esta abordagem é conveniente quando o seu tema já dispõe de shortcodes para grelhas: não precisa de CSS e a responsividade funciona de raiz.

A desvantagem: fica dependente do tema. Se mudar de tema, as colunas dos shortcodes desaparecem, partindo o formulário. O método 1 com CSS funciona em qualquer tema.

Vídeo: configuração passo a passo de formulário com várias colunas

Um vídeo detalhado em inglês onde o autor demonstra ambas as abordagens, incluindo a configuração do flexbox e a adaptação para dispositivos móveis:

⁉️🤔 Perguntas frequentes

A marcação flexbox funciona em navegadores mais antigos?

O flexbox é suportado por todos os navegadores modernos há mais de dez anos: Chrome, Firefox, Safari e Edge têm compatibilidade total sem prefixos a partir das versões lançadas em 2015-2016. A única exceção é o Internet Explorer 11, onde o flexbox funciona com pequenos erros e requer o prefixo -ms-, mas a quota de tráfego global do IE11 caiu para valores estatisticamente insignificantes. Para sites em produção, o flexbox pode ser usado sem prefixos com toda a segurança.

Posso ter números diferentes de colunas em linhas diferentes do formulário?

Sim. O contentor flexbox .cf7-row isola cada linha: pode conter 2, 3 ou 4 colunas, enquanto a linha seguinte tem uma combinação diferente. Por exemplo, a primeira linha tem nome + email (2 colunas), a segunda tem empresa + telefone + cidade (3 colunas) e a terceira tem uma mensagem a ocupar a largura total. Apenas certifique-se de fechar um .cf7-row antes de abrir o seguinte.

E se as etiquetas dos campos tiverem comprimentos diferentes e as colunas se desalinharem?

Numa linha flexbox, as colunas esticam até à altura da mais alta por predefinição. Isto é ativado explicitamente com align-items: stretch (ativo por defeito no código acima). Se as etiquetas ainda parecerem visualmente desalinhadas, defina uma altura fixa para a etiqueta com label { min-height: 48px; display: block; } dentro do formulário.

Preciso de ativar shortcodes para o método 1 com CSS?

Não. O método 1 usa HTML puro (contentores div com classes) e o CF7 transmite a marcação HTML sem plugins adicionais. O plugin Shortcode Enabler só é necessário para o método 2, onde são usadas colunas de shortcode do tema dentro do formulário.

E se o meu tema usar o Gutenberg em vez de shortcodes?

As colunas do Gutenberg funcionam ao nível da página ou do artigo, mas não dentro do editor do CF7. O formulário CF7 em si é inserido através do shortcode [contact-form-7 id="..." title="..."] numa página e o Gutenberg não controla a disposição dos campos no seu interior. Para colunas dentro do formulário, use o método 1 (CSS flexbox), que é compatível com qualquer editor.

Vale a pena o esforço de configurar colunas?

Um formulário de coluna única funciona. Um formulário de duas colunas funciona e recolhe mais submissões porque parece mais organizado e exige menos deslocamento vertical. A diferença de conversão pode parecer trivial à primeira vista, mas ao longo do tempo acumula-se em dezenas de contactos.

O método flexbox resolve completamente o problema: 15 linhas de CSS, 5 minutos de configuração, zero plugins. Não está preso a nenhum tema, não se parte quando o CMS é atualizado e não cria dependências. Se o seu tema já suporta a divisão de conteúdo em colunas, a abordagem com shortcodes também funciona, apenas lembre-se do plugin shortcode enabler e de que as colunas desaparecerão se mudar de tema.

Ambos os métodos foram testados no CF7 versão 6.1 e superior, com WordPress 6.5+. Funcionam em produção sem surpresas.