Addon WordPress pour Contact Form 7
3DIS Multistep Addon CF7 transforme un formulaire long en parcours clair, progressif et responsive. Il répartit les champs en plusieurs étapes, contrôle les informations avant d’avancer et affiche une progression compréhensible sur ordinateur, tablette et mobile.
Rendre les formulaires longs plus simples à compléter
Un formulaire qui rassemble les coordonnées, les informations d’une société, une adresse, des choix commerciaux et un paiement devient rapidement difficile à lire. Les visiteurs ne savent pas toujours combien de temps sera nécessaire, peuvent oublier un champ et découvrent parfois toutes les erreurs seulement à la fin. 3DIS Multistep Addon CF7 répond à ce problème en organisant le même formulaire Contact Form 7 en écrans successifs.
L’addon conserve Contact Form 7 comme moteur de formulaire. Il ajoute la navigation, l’affichage des étapes, la barre de progression et la validation adaptée au passage d’un écran au suivant. L’administrateur continue donc à utiliser les balises et les notifications de CF7. Il n’a pas à reconstruire son formulaire dans un outil fermé ou à migrer ses données vers un autre système.
Parcours découpé
Regroupez les champs par sujet : coordonnées, société, adresse, choix puis confirmation ou paiement.
Validation par étape
Les champs de l’écran courant sont contrôlés au moment pertinent, avant que le visiteur poursuive.
Progression visible
Les boutons précédent et suivant ainsi que la barre de progression rendent le chemin immédiatement compréhensible.
Cas d’usage
3DIS Multistep Addon CF7 convient aux demandes de devis détaillées, inscriptions, réservations, dossiers de candidature, questionnaires, commandes et parcours d’achat. Il est utile dès que les informations peuvent être réparties en groupes logiques. Une première étape peut demander l’identité, une deuxième les données professionnelles, une troisième l’adresse et une dernière le choix d’une offre.
Pour une vente, l’addon peut être combiné avec 3DIS PAYMENT. Le formulaire collecte alors les données nécessaires et la dernière étape présente le montant et le moyen de paiement. Avec 3DIS Shop, la formule sélectionnée depuis la fiche produit peut alimenter le parcours. Chaque extension conserve néanmoins son rôle : Multistep organise l’expérience, PAYMENT traite l’encaissement et Shop présente le catalogue.
Fonctionnement avec Contact Form 7
Le formulaire reste créé dans l’administration Contact Form 7. Les champs sont entourés par les marqueurs d’étape prévus par l’addon. Chaque groupe reçoit un ordre et peut être représenté dans la progression. Le visiteur voit uniquement l’étape active, tandis que les autres restent masquées jusqu’à la navigation.
Au clic sur « Suivant », l’addon demande à Contact Form 7 de contrôler les champs concernés. Si une valeur obligatoire manque ou si son format est invalide, le passage est bloqué et le message correspondant apparaît à proximité du champ. Les erreurs ne doivent pas être affichées au chargement initial : elles deviennent utiles après une interaction ou une tentative de navigation. Cette règle évite de présenter un formulaire vide comme s’il était déjà en erreur.
- Préparer le formulaire. Créez les champs CF7 et vérifiez leurs noms, leurs types et leur caractère obligatoire.
- Définir les étapes. Regroupez les champs qui appartiennent au même moment du parcours et donnez un libellé court à chaque étape.
- Configurer la navigation. Ajoutez les boutons précédent et suivant, puis contrôlez leur ordre et leur visibilité.
- Personnaliser la progression. Choisissez les intitulés et l’apparence qui restent lisibles sur les différentes tailles d’écran.
- Tester chaque chemin. Vérifiez les champs valides, les erreurs, le retour en arrière et la soumission finale.
Validation au bon moment
La qualité d’un formulaire multi-étapes dépend fortement de sa validation. Un champ ne doit pas afficher « Veuillez renseigner ce champ » simplement parce que la page vient d’être ouverte. À l’inverse, l’utilisateur ne doit pas pouvoir avancer sans fournir une information obligatoire. La validation doit donc être déclenchée après une tentative de passage à l’étape suivante, après une interaction pertinente ou lors de la soumission finale.
Point de contrôle : testez le formulaire dans une session privée et sans données préremplies. Rechargez la page, attendez quelques secondes et vérifiez qu’aucune erreur n’apparaît. Cliquez ensuite sur « Suivant » avec des champs vides : les messages attendus doivent alors s’afficher uniquement pour l’étape active.
Personnalisation visuelle et responsive
L’addon prévoit une barre de progression et des commandes de navigation personnalisables. Le style doit rester cohérent avec le site : couleurs, arrondis, espacements et typographie. Les étapes déjà parcourues, l’étape active et les étapes à venir doivent être reconnaissables sans reposer uniquement sur la couleur. Des numéros ou libellés explicites améliorent l’accessibilité.
Sur mobile, une progression horizontale trop large peut devenir illisible. Il faut donc vérifier le comportement à petite largeur, raccourcir les libellés et autoriser une présentation verticale ou compacte si nécessaire. Les boutons doivent rester suffisamment grands pour être utilisés au toucher. Aucun champ ne doit sortir du conteneur ou nécessiter un défilement horizontal.
Prérequis, installation et activation
Prérequis
Un site WordPress compatible, Contact Form 7 actif, un accès administrateur et une sauvegarde avant installation.
Installation
Téléversez le ZIP depuis Extensions, activez l’addon puis vérifiez que ses réglages apparaissent dans l’éditeur CF7.
Licence
Saisissez la clé fournie après l’achat, activez le domaine et contrôlez l’état de la licence avant la mise en production.
La formule de licence détermine le nombre de sites pouvant utiliser l’addon. Les mises à jour et le support sont fournis pendant la durée annoncée dans la formule commerciale. Avant une mise à jour majeure, vérifiez le journal de version et testez le formulaire critique du site.
Intégration dans un parcours d’achat
Dans un parcours associé à 3DIS PAYMENT, les informations de formule, quantité et facturation doivent utiliser les noms de champs attendus par le profil de paiement. La dernière étape peut afficher le montant HT, la TVA, le montant TTC et le composant de paiement. Un test complet doit être réalisé depuis la fiche produit jusqu’au statut final de la transaction.
L’affichage multi-étapes n’autorise pas à faire confiance au navigateur pour le montant. Les données commerciales doivent être recalculées et contrôlées côté serveur par le système de paiement. Multistep améliore l’interface, mais la sécurité financière reste assurée par le profil et le fournisseur de paiement.
Formules commerciales
| Formule | Prix HT/an | Usage |
|---|---|---|
| Solo | 39 € | 1 site WordPress |
| Business | 79 € | Petit parc de sites |
| Agence | 129 € | Sites clients selon les conditions de licence |
Chaque formule donne accès aux fonctions de création d’étapes, de progression et de validation. La différence porte sur le nombre d’activations autorisées et le niveau de support associé. L’addon est également inclus dans le Pack PAYMENT + Shop + Multistep et dans le Pack 3DIS Business Suite.
FAQ commerciale et technique
Contact Form 7 est-il obligatoire ?
Oui. 3DIS Multistep Addon CF7 complète Contact Form 7 et ne constitue pas un moteur de formulaire autonome.
Puis-je l’utiliser sans 3DIS PAYMENT ?
Oui. Le découpage en étapes fonctionne pour un formulaire CF7 classique. 3DIS PAYMENT est uniquement nécessaire si le parcours doit encaisser un paiement.
Pourquoi les erreurs apparaissent-elles dès le chargement ?
Ce comportement indique généralement qu’une validation est déclenchée trop tôt ou qu’un ancien état du formulaire est restauré. Contrôlez la version de l’addon, videz les caches puis testez sans données préremplies.
Le visiteur peut-il revenir à l’étape précédente ?
Oui. Le bouton précédent permet de relire ou corriger les informations avant la soumission finale, sans perdre les valeurs déjà saisies.
Comment diagnostiquer un bouton Suivant inactif ?
Vérifiez la console du navigateur, les noms des marqueurs d’étape, les champs obligatoires, les conflits JavaScript et la présence d’une seule version de l’addon.
Construisez un formulaire plus fluide
Choisissez la formule adaptée ou consultez la documentation technique pour configurer votre premier parcours multi-étapes.
Consulter la documentationEnvironnement vérifié et démonstration
Environnement utilisé lors des contrôles consignés : WordPress 7.1, PHP 8.5, Contact Form 7 6.1.7 et 3DIS Multistep Addon CF7 0.4.3.
Ce qui a été vérifié : affichage des étapes, navigation avant et arrière, validation des champs et intégration au formulaire utilisé sur le site.
Limites : aucune compatibilité avec une autre version de Contact Form 7, un autre thème ou un autre constructeur n’est affirmée.
Démonstration reproductible : sur un formulaire de test, renseignez les champs de chaque étape, testez retour et progression, provoquez une erreur de validation puis contrôlez la conservation des valeurs sans envoyer de données réelles.
Références officielles
Ces ressources officielles complètent les procédures propres à 3DIS Multistep Addon CF7.
- Documentation officielle Contact Form 7 — balises, validation et configuration des formulaires
- Guide MDN sur la validation des formulaires — principes de validation côté navigateur
