Documentation 3DIS Multistep Addon CF7

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 et ajoutez un bouton Suivant.
3. Ajoutez les autres étapes dans leur ordre logique.
4. Placez le bouton Précédent lorsqu’un retour est autorisé.
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.

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 de 20 % 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

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