La mise en page standard de Contact Form 7 est une colonne verticale de champs. Nom, email, sujet, message, empilés les uns sous les autres, étirés sur toute la largeur. Le résultat est peu élégant et consomme de l'espace à l'écran, surtout lorsque vous avez plus de trois champs.

Mais voici l'astuce: l'éditeur de CF7 comprend le HTML. Cela signifie que vous pouvez envelopper les champs dans des conteneurs div, définir leur largeur et les aligner sur une même ligne. Pas de plugin, pas de bidouillage, juste du CSS pur.

Voici deux méthodes fonctionnelles pour disposer les champs de Contact Form 7 en 2, 3 ou 4 colonnes. La première est universelle (HTML + CSS), la seconde utilise le système de shortcodes de votre thème. Toutes deux ont été testées sur des sites en production et ne cassent pas l'affichage mobile.

💡 Aperçu rapide:

• Découvrez à quoi ressemble un formulaire CF7 par défaut et pourquoi la disposition verticale pose problème
• Copiez le CSS flexbox prêt à l'emploi et collez-le dans votre thème enfant (méthode 1, sans plugin)
• Si votre thème prend déjà en charge les shortcodes de colonnes, activez-les dans CF7 et enveloppez vos champs (méthode 2)
• Testez le résultat sur ordinateur et mobile (media query incluse)

À quoi ressemble un formulaire Contact Form 7 par défaut

Après avoir créé un formulaire via «Contact» → «Ajouter», vous obtenez un balisage standard: champs texte, email, message et un bouton d'envoi, strictement empilés les uns sous les autres. Dans l'éditeur, cela ressemble à ceci:

Sur le frontend, avec TwentySeventeen ou tout autre thème sans style de formulaire personnalisé, le rendu sera vertical:

Les champs «Nom» et «Email» occupent toute la largeur disponible, alors que la moitié suffirait pour chacun. Résultat: le formulaire paraît massif, les utilisateurs défilent plus que nécessaire et les conversions chutent.

L'éditeur de CF7 est conçu pour accepter du balisage HTML dans le modèle de formulaire. C'est exactement ce que nous allons utiliser.

Méthode 1: HTML + CSS flexbox (recommandée)

L'approche: enveloppez les champs du formulaire dans des éléments <div> avec des classes CSS de colonnes, puis définissez ces classes une seule fois dans votre thème enfant ou via un plugin de CSS personnalisé.

Aucun plugin de colonnes supplémentaire nécessaire, juste CF7 et quelques lignes de CSS.

Grille CSS pour 2 et 3 colonnes

Voici du CSS prêt à l'emploi utilisant flexbox. Contrairement aux solutions basées sur float, flex aligne automatiquement les colonnes en hauteur et ne nécessite pas d'astuces 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
}

Placez le CSS dans votre thème enfant (fichier style.css) ou via le plugin Simple Custom CSS, qui ajoute un champ de styles dans le panneau d'administration sans avoir à éditer les fichiers.

Balisage dans CF7

Ouvrez l'éditeur de formulaire (Contact → votre formulaire) et enveloppez les champs dans des conteneurs div avec les classes CSS ci-dessus. Pour 2 colonnes:

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"]

Sur le site, le résultat ressemblera à ceci:

Trois colonnes, même logique

Pour trois champs sur une ligne, remplacez les classes par cf7-col-3 et ajoutez un troisième bloc:

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"]

Rendu côté frontend:

Les champs «Nom», «Email» et «Objet» sont désormais alignés sur une seule ligne, tandis que le message occupe toute la largeur en dessous. Sur les écrans de moins de 767 px de large, toutes les colonnes se replient en une seule, ce qui garde le formulaire lisible sur mobile.

L’avantage de flexbox: si les hauteurs de champ diffèrent (par exemple, un libellé long dans une colonne), la ligne ne casse pas. Flex aligne automatiquement les colonnes. Les mises en page basées sur float ne peuvent pas faire cela sans recourir à des astuces comme clearfix et margin-right.

Méthode 2: colonnes par shortcode du thème

Certains thèmes WordPress, en particulier les thèmes commerciaux comme GeneratePress, Kadence et Astra, intègrent un système de shortcodes pour les colonnes. Cela se présente généralement sous la forme d’un bouton dans l’éditeur qui génère des shortcodes tels que [one_half]...[/one_half] ou [column grid="6"]...[/column].

Si votre thème le permet, vous pouvez créer des colonnes dans CF7 sans CSS. Vous devez toutefois autoriser CF7 à traiter les shortcodes à l’intérieur du formulaire, car il les ignore par défaut.

Étape 1: activer les shortcodes dans l’éditeur CF7

Installez l’extension Contact Form 7 Shortcode Enabler. Elle est légère, pèse quelques kilooctets et ne fait qu’une seule chose: transmettre les shortcodes à CF7.

Alternative sans extension: ajoutez un filtre dans le fichier functions.php de votre thème enfant:

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

Étape 2: envelopper les champs avec les shortcodes de colonnes

Le principe est le même qu’avec les classes div, mais au lieu de classes CSS, vous utilisez les shortcodes du thème. Le bouton de génération se trouve généralement dans l’éditeur visuel de WordPress:

Générez les shortcodes pour le nombre de colonnes souhaité et insérez le contenu:

Rendu de la page:

Transférez maintenant les shortcodes dans l’éditeur de CF7. Pour 2 champs sur une même ligne:

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"]

Le résultat en frontend donne les mêmes deux colonnes qu’avec la méthode 1. Cette approche est pratique quand votre thème propose déjà des shortcodes de grille: aucun CSS n’est nécessaire et le responsive fonctionne directement.

L’inconvénient: vous êtes lié à votre thème. Changez de thème et les colonnes en shortcode disparaissent, ce qui casse votre formulaire. La méthode 1 avec CSS se transfère d’un thème à l’autre sans problème.

Vidéo: mise en place pas à pas d’un formulaire multi-colonnes

Un tutoriel vidéo détaillé en anglais où l’auteur montre les deux approches, y compris la mise en place du flexbox et l’adaptation mobile:

⁉️🤔 Foire aux questions

Le balisage flexbox fonctionne-t-il sur les anciens navigateurs?

Flexbox est pris en charge par tous les navigateurs modernes depuis plus de dix ans: Chrome, Firefox, Safari et Edge sont entièrement compatibles sans préfixes à partir des versions sorties en 2015-2016. La seule exception est Internet Explorer 11, où flexbox fonctionne avec des bugs mineurs et nécessite le préfixe -ms-, mais la part de trafic mondial d’IE11 est devenue statistiquement négligeable. Pour des sites en production, vous pouvez utiliser flexbox sans préfixes en toute sécurité.

Puis-je avoir un nombre de colonnes différent selon les lignes du formulaire?

Oui. Le conteneur flexbox .cf7-row isole chaque ligne: il peut contenir 2, 3 ou 4 colonnes, tandis que la ligne suivante aura une combinaison différente. Par exemple, la première ligne comporte nom + email (2 colonnes), la deuxième société + téléphone + ville (3 colonnes) et la troisième un message sur toute la largeur. Veillez simplement à fermer un .cf7-row avant d’ouvrir le suivant.

Que faire si les libellés des champs ont des longueurs différentes et que les colonnes se décalent?

Dans une ligne flexbox, les colonnes s’étirent par défaut à la hauteur de la plus haute. Ce comportement est explicitement activé par align-items: stretch (actif par défaut dans le code ci-dessus). Si les libellés semblent encore visuellement mal alignés, définissez une hauteur fixe pour les libellés avec label { min-height: 48px; display: block; } à l’intérieur du formulaire.

Dois-je activer les shortcodes pour la méthode 1 avec CSS?

Non. La méthode 1 utilise du HTML pur (des conteneurs div avec des classes) et CF7 transmet le balisage HTML sans plugin supplémentaire. Le plugin Shortcode Enabler n’est nécessaire que pour la méthode 2, lorsque vous utilisez des shortcodes de colonnes du thème à l’intérieur du formulaire.

Que faire si mon thème utilise Gutenberg plutôt que des shortcodes?

Les colonnes Gutenberg fonctionnent au niveau de la page ou de l’article, mais pas dans l’éditeur CF7. Le formulaire CF7 lui-même est inséré via le shortcode [contact-form-7 id="..." title="..."] sur une page, et Gutenberg ne contrôle pas la disposition des champs à l’intérieur. Pour des colonnes dans le formulaire, utilisez la méthode 1 (CSS flexbox), qui est compatible avec n’importe quel éditeur.

Est-ce que cela vaut la peine de mettre en place des colonnes?

Un formulaire sur une seule colonne fonctionne. Un formulaire sur deux colonnes fonctionne et recueille plus de soumissions parce qu’il paraît plus soigné et demande moins de défilement. La différence de conversion peut sembler anodine au premier abord, mais avec le temps elle représente des dizaines de prospects supplémentaires.

La méthode flexbox résout complètement le problème: 15 lignes de CSS, 5 minutes de mise en place, zéro plugin. Elle n’est liée à aucun thème, ne casse pas lors des mises à jour du CMS et ne crée aucune dépendance. Si votre thème prend déjà en charge la division du contenu en colonnes, l’approche par shortcode fonctionne aussi, gardez simplement en tête le plugin d’activation des shortcodes et le fait que les colonnes disparaîtront si vous changez de thème.

Les deux méthodes ont été testées sur CF7 version 6.1 et supérieure, avec WordPress 6.5+. Elles fonctionnent en production sans mauvaise surprise.