Contact Form 7 – Test dev

Publié le 21 juillet 202514 août 2025 par JF

Créer une liste déroulante multiselect dans Contact Form 7 où on peut cliquer plusieurs options sans utiliser Ctrl

Par défaut, Contact Form 7 permet les listes déroulantes avec sélection multiple, mais l’utilisateur doit maintenir Ctrl (ou Cmd sur Mac) pour sélectionner plusieurs éléments — ce qui n’est pas très ergonomique.

L’objectif de cet article est de créer une liste déroulante multiselect dans Contact Form 7 où on peut cliquer plusieurs options sans utiliser Ctrl (donc plus proche d’une checkbox stylisée ou d’un select amélioré).

Utiliser le plugin Select2 avec Contact Form 7

1. Créer le champ dans ton formulaire CF7

Voici un champ multiselect classique :

[select* my-multiselect multiple "Option 1" "Option 2" "Option 3"]

Le * signifie que le champ est requis, et multiple permet la sélection multiple.

Mais avec ce code, l’utilisateur devra utiliser Ctrl/Cmd. Donc, passons à la suite.

2. Activer Select2 sur ce champ

a. Ajouter un identifiant ou une classe à ton champ :

[select* my-multiselect class:cf7-select2 multiple "Option 1" "Option 2" "Option 3"]

b. Ajouter le script Select2

Tu dois charger Select2 JS + CSS dans ton thème. Voici comment faire :

Ajoute ce code dans le fichier functions.php de ton thème enfant :

function enqueue_select2_for_cf7() {
    if (is_page()) { // ou un autre test selon où se trouve ton formulaire
        wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
        wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', array('jquery'), null, true);

        wp_add_inline_script('select2-js', "
            jQuery(document).ready(function($) {
                $('.cf7-select2').select2({
                    width: '100%',
                    placeholder: 'Faites votre sélection',
                    closeOnSelect: false
                });
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'enqueue_select2_for_cf7');

Ce script appelle Select2 JS+CSS puis une fois la page est chargée, il cherche la class .cf7-select2 et remplace le fonctionnement initial.

Résultat :

Ton champ multiselect dans Contact Form 7 est stylisé.
L’utilisateur peut sélectionner plusieurs options sans appuyer sur la touche Ctrl.
L’expérience est bien meilleure sur desktop et mobile.

Publié le 13 décembre 202120 décembre 2021 par JF — Laisser un commentaire

Récupérer une variable dans Contact Form 7

Pour plusieurs raisons, vous aurez besoin de récupérer des variables et de les insérer dans vos formulaires de contact sur Contact Form 7.

Dans l’exemple ci-dessous, je vais vous montrer comment récupérer la page d’origine du click sur le bouton contact provenant d’un autre site.

Envoyer la valeur dans votre formulaire

Pour commencer il faut envoyer un POST via votre lien sur votre bouton.
Admettons une page test.htm avec un bouton contact.
Il faut envoyer via le href du lien, les données que vous souhaitez récupérer en GET sur votre formulaire.

<html>
	<head>
	<tilte>Test</title>
	</head>
	<body>
	<p>Ma page test</p>
	<a href="https://url_de_votre_site/page_contact?from=accueil">Nous contacter</a>
	</body>
</html>

Récupérer la valeur dans votre formulaire

Au click sur le lien, l’information ?from=accueil est envoyée et conservée par votre navigateur.
Pour récupérer et afficher cette information sur votre formulaire, vous aurez besoin de créer une fonction dans votre fichier functions.php de votre thème, car vous ne pouvez pas insérer directement du code php dans votre formulaire.

/* Add source to Contact Form */
/* ---------------------------------- */
function provenance() {
	// on déclare une source par défaut
	$defautprovenance = "Blog";
	// on récupérer la valeur de from du POST ?from=accueil
    $var=$_GET['from'];
	// Si le POST est vide alors on affiche la valeur par défaut
	if (empty($_GET)) {
    	return $defautprovenance;
	}
	// Sinon on affiche la valeur récupérée
	else {return $var;}
}
// on créée le shortcode pour CF7
add_shortcode('provenance', 'provenance');

Afficher la valeur dans votre formulaire

Ci-dessus, nous avons créé un shortcode [provenance] que nous pouvons appeler à différent endroit.

Quelques exemples :

<!-- Récupérer la valeur dans un input et le mettre en caché : -->
<input type="hidden" name="provenance" value="[provenance]"></input>
<!-- Afficher la valeur dans un bloc text -->
<textarea name="your-message" cols="40" rows="10">[provenance]</textarea>

Enfin, vous pouvez récupérer cette valeur et l’envoyer dans votre email

De : [your-name] <[your-email]>
Objet : [your-subject]
Source : [provenance]
Corps du message :
[your-message]