Chiffre d’affaire sans limites!!!

Sécurisez votre site web pour renforcer votre image de marque, du logo au branding

Chargement…

Documentation 3DIS Multistep Addon CF7

Guide 3DIS Multistep Addon CF7

Découpez un formulaire Contact Form 7 en étapes, validez l’écran actif au bon moment et créez une progression adaptée aux ordinateurs et mobiles.

Prérequis et installation

Installez et activez Contact Form 7 avant l’addon. Téléversez ensuite le ZIP officiel de 3DIS Multistep Addon CF7, activez-le puis saisissez la licence. Vérifiez que l’onglet ou les réglages Multistep sont disponibles dans l’éditeur du formulaire. Sauvegardez le formulaire actuel avant de le transformer.

Préparer le formulaire

Listez les informations demandées et regroupez-les par sujet. Évitez de créer une étape pour un seul champ si cela allonge inutilement le parcours. Les champs obligatoires sont définis avec les balises Contact Form 7 appropriées. Donnez des noms stables et explicites aux champs utilisés par d’autres extensions.

Créer les étapes

  1. Placez le marqueur de début de la première étape avant ses champs.
  2. Regroupez les coordonnées ; l’addon crée le bouton Suivant.
  3. Ajoutez les autres étapes dans leur ordre logique.
  4. Réglez le libellé du bouton Retour ; l’addon crée la navigation.
  5. Conservez le bouton de soumission CF7 uniquement dans la dernière étape.
  6. Enregistrez puis testez le formulaire public.

Validation par étape

Le clic sur Suivant doit contrôler les champs visibles de l’étape active. Si un champ obligatoire manque, la navigation est bloquée et CF7 affiche son message. Au chargement initial, aucun message ne doit être visible. Le simple focus dans un champ ne doit pas valider toutes les étapes.

Testez avec une page fraîche, sans autofill et sans cache. Vérifiez d’abord l’absence d’erreur, puis cliquez sur Suivant avec les champs vides. Corrigez les valeurs, avancez, revenez en arrière et assurez-vous que les données restent présentes.

Barre de progression

Utilisez des libellés courts : Coordonnées, Société, Adresse, Paiement. L’étape active doit être visible, les étapes terminées distinguables et les suivantes compréhensibles. Ne reposez pas uniquement sur la couleur ; conservez un numéro ou un texte. Vérifiez le contraste et la navigation au clavier.

Responsive et accessibilité

Sur mobile, la progression peut devenir verticale ou compacte. Les boutons doivent être suffisamment grands, l’ordre de tabulation logique et le focus déplacé vers la première erreur lorsque la navigation est bloquée. Les champs, messages et boutons ne doivent pas sortir du conteneur.

Intégration avec 3DIS PAYMENT

Placez la formule, la quantité et les données de facturation avant la dernière étape. Le composant de paiement apparaît à l’étape prévue. Les classes de champs doivent correspondre au profil 3DIS PAYMENT. L’addon organise l’affichage ; le montant et la sécurité restent contrôlés côté serveur par PAYMENT.

Dans un formulaire d’achat, affichez le HT, la TVA applicable et le TTC avant le paiement. Testez la validation des champs, le chargement de Stripe, la transaction, le retour et le webhook. Un formulaire correctement découpé mais relié au mauvais profil ne constitue pas un parcours valide.

Personnalisation

Utilisez les réglages de l’addon ou les classes documentées pour adapter les couleurs, espacements et boutons. Évitez de cibler des sélecteurs internes susceptibles de changer. Le thème doit conserver un contraste accessible et ne pas masquer les messages CF7. Testez après toute modification CSS.

Mises à jour

Sauvegardez les formulaires et consultez les notes de version. Après mise à jour, contrôlez un formulaire simple et le parcours le plus complexe. Videz les caches frontaux et les optimisations JavaScript si l’ancien comportement persiste. Ne chargez pas simultanément deux versions de l’addon.

Dépannage

SymptômeContrôle
Erreurs au chargementDéclenchement prématuré, cache, autofill ou ancienne version
Suivant inactifMarqueurs d’étape, erreur JS, champ obligatoire invisible
Données perdues au retourRechargement de page, conflit de script ou champs dupliqués
Progression incorrecteOrdre et nombre de marqueurs, étape conditionnelle
Paiement absentProfil PAYMENT, balise, fournisseur et environnement

Désinstallation

Avant la suppression, sauvegardez les formulaires. Retirez ou adaptez les marqueurs spécifiques si les formulaires doivent rester utilisables sans l’addon. La désactivation ne doit pas effacer automatiquement les soumissions CF7 ou les données conservées par d’autres extensions.

FAQ

Puis-je utiliser l’addon sans PAYMENT ?

Oui. Il fonctionne avec un formulaire CF7 classique.

Pourquoi les erreurs apparaissent-elles trop tôt ?

Une validation est appelée au chargement ou un état précédent est restauré. Testez sans cache et contrôlez la version.

Les champs sont-ils envoyés à chaque étape ?

La soumission finale reste gérée par Contact Form 7 ; les étapes servent à la navigation et à la validation progressive.

Peut-on revenir en arrière ?

Oui si le bouton Précédent est configuré et qu’aucune règle métier ne l’interdit.

Un problème persiste ?

Fournissez la version, la structure des étapes et le message de console utile sans données personnelles.

Contacter le support

Références officielles

Consultez également les spécifications des outils sur lesquels repose le parcours multi-étapes.

Architecture, intégration et maintenance — 3DIS Multistep Addon CF7

Référence : 0.4.5 · documentation actualisée le 30 septembre 2026. Cette partie complète le guide d’utilisation. Les exemples doivent être adaptés puis testés sur un formulaire ou contenu de recette. Ils ne modifient pas automatiquement votre site.

Architecture et activation du rendu

La classe ThreeDIS_Multistep_CF7, dans 3dis-multistep-v030.php, enregistre les balises, panneaux CF7, réglages, ressources et route de validation. Le nom historique du fichier ne donne pas la version : son en-tête indique 0.4.5. Les prérequis déclarés sont WordPress 6.4 et PHP 7.4 ; la validation intermédiaire exige CF7 6.1.3 au minimum.

Les réglages sont enregistrés par formulaire dans _3dis_multistep_settings. Le rendu wpcf7_form_elements recherche les marqueurs .threedis-ms-marker. Si l’addon est activé pour ce formulaire, il ajoute .threedis-ms-root, sa configuration et les ressources 3dis-multistep-cf7. Le JavaScript découpe le formulaire en sections et crée la progression et les boutons Suivant/Retour.

Exemple minimal de deux étapes

Placez les marqueurs dans un seul formulaire CF7. Le titre est la première valeur entre guillemets ; le nom technique de chaque étape est distinct. L’addon génère la navigation : n’ajoutez pas un second jeu de boutons qui pilote indépendamment les mêmes sections.

<p>[threedis_step coordonnees "Coordonnées"]</p>

<label>Votre nom
    [text* votre-nom]
</label>
<label>Votre e-mail
    [email* votre-email]
</label>

<p>[threedis_step demande "Votre demande"]</p>

<label>Message
    [textarea* votre-message]
</label>
[submit "Envoyer"]

Réglages et portée

Les options comprennent activation, validation par étape, progression, orientation, forme, titres, pourcentage, étapes cliquables, transition, défilement automatique, réinitialisation après succès, conservation des erreurs, textes et couleurs des boutons. Le retour entre étapes conserve les champs dans le formulaire courant ; il ne constitue pas une sauvegarde de brouillon persistante après fermeture ou rechargement.

Contrat de validation intermédiaire

Le navigateur appelle POST /wp-json/3dis-multistep/v1/validate avec _wpcf7, les noms _3dis_step_fields et les valeurs. Le serveur limite le corps à 64 Kio et la liste à 200 champs ; il ne conserve que les noms connus du formulaire. Les formulaires privés ou brouillons exigent les droits CF7 correspondants. Une limite de 60 validations par minute et par adresse réseau peut affecter des visiteurs partageant un proxy.

CF7 valide les champs standards demandés avec son schéma. Le plugin n’exécute pas les filtres globaux de soumission pour simuler un envoi : captcha, anti-spam, paiement, PDF et effets définitifs restent réservés au vrai parcours final. Les champs de fichiers natifs sont exclus de cette validation textuelle ; les extensions de dépôt doivent s’intégrer explicitement.

Hook pour les règles métier

Le filtre 3dis_multistep_validate_step($result, $tags, $form, $params, $requested) reçoit cinq arguments : résultat WPCF7_Validation, balises, formulaire, paramètres et noms de l’étape. Enregistrez le callback avec cinq arguments acceptés. Limitez-le à l’ID du formulaire visé et aux champs présents dans $requested, puis utilisez $result->invalidate($tag, $message) et retournez le résultat.

La même règle métier doit être appelée dans la validation finale CF7 du type de champ concerné, par exemple wpcf7_validate_text*. Extraire la règle dans une fonction commune évite qu’un visiteur contournant les étapes puisse éviter le contrôle final. Un callback intermédiaire ne doit ni envoyer de mail, ni créer un PDF, ni débiter, ni enregistrer une commande définitive.

add_filter(
    '3dis_multistep_validate_step',
    static function ($result, $tags, $form, $params, $requested) {
        if ((int) $form->id() !== 123 || !in_array('reference', $requested, true)) {
            return $result;
        }
        foreach ($tags as $tag) {
            if ($tag->name === 'reference' && empty($params['reference'])) {
                $result->invalidate($tag, 'Indiquez votre référence.');
            }
        }
        return $result;
    },
    10,
    5
);

Cet exemple illustre le contrat, avec un formulaire 123 à remplacer. Pour un simple champ obligatoire, préférez la balise CF7 [text* reference], déjà vérifiée à l’étape et à l’envoi. Pour une règle métier plus complexe, implémentez sa validation finale avant de la mettre en production. Les exceptions déclenchent 3dis_multistep_validation_exception($exception, $form, $requested) et une erreur contrôlée ; un journal éventuel doit masquer les valeurs personnelles.

Interactions et recette

Multifiles raccorde son contrôle au filtre intermédiaire. PAYMENT garde ses vérifications serveur. Le parcours généré par Shop utilise ses propres classes de navigation : sa seule apparence en étapes ne prouve pas qu’il emploie cet addon. Choisissez un seul pilote pour un formulaire donné.

  1. Ouvrez une page fraîche : aucune erreur ne doit apparaître spontanément.
  2. Testez Suivant avec champs vides, invalides puis valides. Vérifiez une erreur réseau de validation sans envoi final.
  3. Revenez en arrière, contrôlez les valeurs, le focus clavier et la progression sur mobile.
  4. Testez séparément la soumission finale et les règles métier ; un passage à l’étape suivante n’est pas un envoi CF7.
  5. Après minification ou différé, vérifiez initialisation, appels REST, formulaires multiples et apparition du paiement.

Mise à jour et restauration

Sauvegardez le contenu CF7, ses réglages Multistep, les modèles de courriels et les personnalisations. Installez le ZIP officiel, purgez les anciens scripts et rejouez la recette. En cas de régression, désactivez le découpage du formulaire ou restaurez une archive compatible avec sa configuration. La désactivation ne restaure pas un formulaire modifié : gardez sa copie. Ne supprimez pas les hooks de sécurité d’un autre plugin pour faire passer une étape.

Retrouver les autres documentations 3DIS · Assistance technique

Version 0.4.5 — intégration et recette du 30 septembre 2026

Cette version conserve exactement la casse des noms de champs CF7 pendant la validation intermédiaire. Elle corrige le traitement des erreurs finales et la réinitialisation après succès, en isolant chaque occurrence de formulaire. Les contrôles de soumission, de licence et de sécurité restent actifs.

Contrat facultatif avec les extensions de dépôt

Avant d’avancer, l’étape émet 3dis:before-step-change, un événement propagé et annulable dont detail contient { version: 1, form, from, to, message: '' }. Une extension peut appeler preventDefault() et renseigner detail.message. Multistep vérifie à nouveau cet état après sa validation asynchrone, y compris lors d’un clic dans la progression.

3dis:upload-state signale un changement de transfert et invalide une validation intermédiaire devenue obsolète. Ce contrat ne remplace ni les contrôles serveur ni la validation finale CF7. Multistep fonctionne sans Multifiles ; aucun des deux plugins n’impose l’installation de l’autre.

Pour le blocage de navigation pendant les transferts, utiliser Multistep 0.4.5 avec Multifiles 1.0.1. Multifiles 1.0.0 conserve son raccordement serveur, mais n’implémente pas ce nouveau verrou navigateur. Une erreur de transfert doit être corrigée par une nouvelle tentative ou le retrait du fichier ; ne désactivez pas la validation pour poursuivre.

Événements CF7 et structure des étapes

Avec CF7 6.1.7 observé, les événements wpcf7invalid et wpcf7mailsent partent du formulaire et remontent à .wpcf7. L’addon accepte les deux cibles et vérifie l’occurrence avec unitTag et l’ID CF7. Il lit detail.apiResponse.invalid_fields, car les messages visuels peuvent être dessinés après l’événement.

Placez chaque marqueur d’étape dans un conteneur distinct, par exemple un paragraphe dédié. Ne regroupez pas plusieurs marqueurs et tous leurs champs dans un seul paragraphe généré automatiquement. Cette limite de découpage préexistante n’est pas refondue en 0.4.5. Les validations asynchrones sont bornées et les réponses obsolètes ignorées.

Environnement et résultats effectivement vérifiés

Recette en production le 30 septembre 2026 : WordPress 7.1.2, Contact Form 7 6.1.7, Multistep 0.4.5 et Multifiles 1.0.1. Champs requis, navigation, conservation des fichiers, deux occurrences indépendantes, blocage pendant transfert, envoi final, réception des courriels administrateur et client, pièces jointes et liens sécurisés ont été contrôlés. Le téléchargement autorisé a été comparé au fichier source ; les liens absents ou altérés ont été refusés.

Les scénarios complémentaires de panne réseau, délais, annulation, double clic, ordre de chargement des scripts, autonomie et affichage à 390 px ont été exécutés dans le banc de tests local. Ils ne constituent pas des pannes provoquées en production. Aucune compatibilité universelle avec d’autres versions, thèmes ou addons n’est affirmée. Cette recette ne revalide pas un paiement réel ni un PDF de devis.

Installation et retour arrière de cette livraison

Sauvegardez les fichiers, la base, les formulaires et leurs réglages. Remplacez l’archive du plugin par la 0.4.5 sans supprimer ses données, puis purgez les ressources mises en cache. Vérifiez les champs vides, valides, le retour arrière et une soumission de test identifiable. Si Multifiles est utilisé, mettez-le aussi à jour en 1.0.1 pour bénéficier du verrou de transfert.

En cas de régression, restaurez le dossier Multistep 0.4.4 sauvegardé et la configuration correspondante, puis purgez les scripts et rejouez le parcours. Aucune migration de stockage n’est ajoutée par ce correctif. Le retour arrière est documenté, mais n’a pas été exécuté sur la production lors de cette recette. Les rapports 0.4.4 présents dans l’archive sont historiques : ils ne décrivent pas le statut de validation de la 0.4.5.

Version actuelle 0.4.8 — livraison du 2 octobre 2026

Les sections 0.4.4 et 0.4.5 ci-dessus constituent l’historique de recette. La version distribuée est désormais 0.4.8. Les packs Business Suite et PAYMENT + Shop + Multistep 1.1.2 intègrent cette archive, avec PAYMENT 1.1.1 et Shop 0.3.6 conservés.

CSS des champs et boutons

Les styles génériques de saisie excluent les types checkbox, radio, submit, button, reset, hidden et file, y compris au focus. Les boutons de soumission conservent les styles du thème. Les adaptations du bouton d’effacement Signature Addon sont limitées aux formulaires Multistep et préservent un focus clavier visible. Les dimensions explicites du champ de signature ne doivent pas être écrasées par une hauteur généralisée.

Signature dans une étape masquée et premier envoi

La compatibilité vérifiée concerne Signature Addon 4.2.2. Au submit autorisé, Multistep appelle le sérialiseur beforeSubmit de l’instance de signature concernée avant la lecture de FormData par CF7. Le traitement reste limité aux canvas et champs du formulaire Multistep soumis. Il ne supprime pas les écouteurs de l’addon, ne contourne pas la validation et n’ajoute aucune dépendance obligatoire. Le correctif CSS seul ne suffit pas à cette synchronisation.

En production, le tracé dans la seconde étape initialement masquée, l’effacement puis un nouveau tracé, le retour et la progression, la soumission et le PDF ont été contrôlés. Le courriel administratif avec PNG et PDF a été reçu ; le PDF ouvert contient la signature et les données du scénario. Les vérifications locales couvrent aussi la valeur vide après effacement et les largeurs 390 px/DPR2 et 1280 px/DPR1. Aucun essai sur téléphone physique n’est revendiqué.

Mise à jour, cache et retour arrière

Sauvegardez code et réglages avant remplacement. Installez le ZIP officiel 0.4.8 ou utilisez le mécanisme de mise à jour sous licence. La constante de version invalide les ressources concernées ; purgez les anciens fichiers du cache si nécessaire. Aucun changement de stockage n’est introduit. Après installation, rejouez votre formulaire complet avec ses paramètres normaux, en contrôlant séparément succès CF7, réception des messages et contenu des pièces jointes.

Un retour à l’archive précédente rétablit son code, mais également ses limites sur la signature ; il ne doit pas restaurer une ancienne base par-dessus des données nouvelles. Les contrats et détails sont fournis dans docs/CSS-0.4.6.md, docs/SIGNATURE-0.4.7.md et docs/SIGNATURE-0.4.8.md. Les tests de développement restent dans les sources, pas dans le ZIP commercial.

Multistep 0.4.10 — Détection et installation des mises à jour

Version stable publiée le 2 octobre 2026. La recherche périodique reste programmée deux fois par jour, sous réserve de l’exécution des tâches WordPress. Détecter une nouvelle version ne déclenche pas son installation : l’administrateur choisit « Mettre à jour ».

Métadonnées et lien signé

Les métadonnées de version sont conservées 24 heures pour couvrir l’intervalle de recherche de 12 heures. Le lien signé de téléchargement n’est pas conservé aussi longtemps : un nouveau jeton est demandé au moment du téléchargement. Les contrôles de licence, de destination, de version, de signature, de taille et de SHA-256 sont maintenus. Un verrou et une limitation du rafraîchissement manuel évitent les appels rapprochés inutiles.

Utilisez l’écran de licence pour relancer la vérification, puis rechargez les extensions. Une tâche périodique future ne doit plus empêcher à elle seule un rafraîchissement nécessaire. L’absence d’exécution de WP-Cron peut retarder la recherche programmée ; une notification n’est pas une preuve de téléchargement réussi.

Serveur de licences hébergé sur le site mis à jour

Dans la recette sur 3dis-development.com, la mise à jour AJAX a placé le site en maintenance avant la demande de jeton au même site, qui a répondu HTTP 503. Le parcours natif WordPress de mise à jour dans une page complète a réussi pour Multistep 0.4.10. Sur cette configuration, utiliser ce parcours ou le téléversement administrateur du ZIP officiel autorisé ; ne pas désactiver les contrôles de licence ni rendre l’archive publique. Ce constat ne démontre pas un problème sur les sites clients dont le serveur de licences est distinct.

Contrôles et historique

La recherche de version, l’obtention du téléchargement autorisé et l’installation manuelle officielle de 0.4.10 ont été vérifiées sur le site de recette. La version 0.4.9 a été retirée du canal de distribution ; utiliser 0.4.10. Les formulaires, leurs données et les licences existantes sont conservés. Les contrôles de cette livraison ne remplacent pas la recette des personnalisations de chaque site.