Cro Form

cro-form — optimisation de formulaires

Adapté du plugin marketingskills (Corey Haines / fork Littlpinguin, MIT) — voir docs/vendored-cro.md.

Étape 0 — Doctrine de marque (OBLIGATOIRE dès qu'un mot est produit)

Labels, microcopy, messages d'erreur et copy de bouton sont du contenu de marque :

1. 01-brand/checklist-pre-composition.md et 01-brand/voice.md — ton, vocabulaire, interdits (un message d'erreur aussi a une voix).
2. 01-brand/personas.md — le niveau de formalité et le vocabulaire des labels.

Si un fichier manque ou contient des {{...}} : arrêter et lancer /start-cockpit.

Cadrage initial

1. Type : capture de lead (contenu gated, newsletter), contact, démo, inscription événement, devis, candidature
2. État actuel : nombre de champs, taux de complétion, répartition mobile/desktop, où les gens abandonnent
3. Contexte : que deviennent les soumissions ? quels champs sont réellement exploités ensuite (nurturing, CRM) ? contraintes RGPD ?

Principes

1. Chaque champ a un coût

3 champs = référence ; 4-6 champs ≈ -10 à -25% de complétion ; 7+ ≈ -25 à -50%. Pour chaque champ : est-il indispensable avant de pouvoir aider la personne ? peut-on l'obtenir autrement (enrichissement, domaine de l'email) ? peut-on le demander plus tard (profilage progressif) ?

2. La valeur doit dépasser l'effort

Proposition de valeur claire au-dessus du formulaire ; ce qu'on obtient est évident ; effort perçu réduit (peu de champs, labels courts, « 30 secondes »).

3. Réduire la charge cognitive

Une question par champ ; labels clairs et conversationnels ; ordre logique (facile d'abord — nom, email — sensible en dernier — téléphone, budget) ; valeurs par défaut intelligentes.

Règles champ par champ

Layout

• Une colonne (complétion supérieure, mobile-friendly) ; deux colonnes uniquement pour des champs courts liés
• Labels toujours visibles — jamais le placeholder seul (il disparaît à la saisie) ; placeholder = exemple, pas label
• Bouton immédiatement après le dernier champ, contrasté (tokens 01-brand/style-guide.md), cibles tactiles ≥ 44 px
• Multi-étapes si > 5-6 champs : indicateur de progression, facile d'abord, retour possible, données conservées

Erreurs

• Validation inline au passage au champ suivant (pas agressive pendant la frappe)
• Message spécifique + comment corriger, près du champ, dans la voix de la marque : ✅ « Cet email semble incomplet — il manque le @ » ❌ « Entrée invalide »
• À la soumission : focus sur le premier champ en erreur, jamais vider la saisie

Bouton

Copy = [action] + [ce qu'on obtient] : « Recevoir le guide », « Réserver ma démo », « Obtenir mon estimation » — jamais « Envoyer »/« Soumettre ». États : chargement (bouton désactivé + indicateur), succès (confirmation + prochaine étape), erreur claire.

Confiance

Près du formulaire : mention de confidentialité (« Jamais partagé, désindexation en un clic »), délai de réponse attendu, témoignage si pertinent. RGPD : consentement explicite, cases jamais pré-cochées, lien politique de confidentialité.

Mesure

Suivre (GA4 / outil configuré via /tools-setup) : taux de démarrage (vues → premier focus), taux de complétion (démarré → soumis), abandon par champ, erreurs par champ, mobile vs desktop.

Format de sortie

1. Audit : par problème — constat, impact estimé, correctif, priorité
2. Formulaire recommandé : champs requis justifiés un à un, champs optionnels, ordre, labels + placeholders + messages d'erreur + copy du bouton (conformes doctrine), notes de layout
3. Hypothèses A/B : ex. email seul vs email + nom ; avec/sans téléphone ; monopage vs multi-étapes

Le circuit complet formulaire → n8n → outil emailing → nurturing est défini dans la skill lead-magnet.

Skills associées

• lead-magnet — circuit de capture complet
• cro-page / cro-popup — la page ou le popup qui contient le formulaire
• landing-page — production de la page
• brand-check — validation du microcopy avant intégration