# Jauger la complétude d’un dossier de souscription mutuelle avant son envoi

> Une mutuelle recevait des dossiers incomplets faute de repère visuel. Une barre de progression calculée depuis les champs obligatoires renseignés réduit les allers-retours avec les conseillers.

- Auteur : Clément Hadrot
- Publié le : 2025-10-25
- Mis à jour le : 2025-10-25
- Catégorie : Tips
- URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/jauge-completude-dossier-souscription-mutuelle/

## L’essentiel

- Progression calculée à partir d'une liste de champs obligatoires
- Barre affichée côté front sans rechargement de page
- Blocage de l'envoi tant que le seuil n'est pas atteint

Neuf champs obligatoires répartis sur trois étapes, et pourtant rien n'indiquait au visiteur où il en était dans son dossier de souscription. C'est le constat que j'ai fait chez une mutuelle régionale que j'accompagne, en comparant les dossiers reçus par les conseillers à la liste des champs réellement requis pour instruire une demande. Résultat de cette absence de repère : des dossiers envoyés à moitié remplis, renvoyés par e-mail, ressaisis, perdant plusieurs jours à chaque aller-retour.

La correction ne demandait pas un nouvel outil de formulaire, seulement un indicateur honnête de progression. J'ai construit une jauge qui recalcule en temps réel le pourcentage de champs obligatoires renseignés et qui bloque l'envoi tant qu'un seuil minimal n'est pas atteint. Voici l'implémentation, pensée pour rester lisible même après plusieurs mois sans y toucher.

## Définir la liste des champs obligatoires en un seul endroit

La première règle que je m'impose sur ce type de fonctionnalité : la liste des champs obligatoires ne doit exister qu'à un seul endroit du code, jamais dupliquée entre le calcul de progression et la validation d'envoi. Un tableau PHP, exposé au script du navigateur via `wp_localize_script`, sert de source unique de vérité.

```
function ch_champs_obligatoires_dossier() {
    return array(
        'nom', 'prenom', 'date_naissance', 'adresse',
        'code_postal', 'ville', 'numero_secu',
        'situation_familiale', 'date_effet',
    );
}

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 'ch-jauge-dossier', get_theme_file_uri( '/assets/js/jauge-dossier.js' ), array(), '1.0', true );
    wp_localize_script( 'ch-jauge-dossier', 'chDossierConfig', array(
        'champs' => ch_champs_obligatoires_dossier(),
        'seuil'  => 80,
    ) );
} );
```

## Calculer la progression côté navigateur

Le script écoute les événements de saisie sur le formulaire et recalcule le pourcentage à chaque modification. Pas de requête serveur à ce stade : tout se joue en lecture directe des champs présents dans le document, ce qui donne un retour instantané au souscripteur.

```
document.addEventListener( 'input', function () {
    var total = chDossierConfig.champs.length;
    var remplis = chDossierConfig.champs.filter( function ( nom ) {
        var champ = document.querySelector( '[name="' + nom + '"]' );
        return champ && champ.value.trim().length > 0;
    } ).length;

    var pourcentage = Math.round( ( remplis / total ) * 100 );
    var jauge = document.querySelector( '.jauge-dossier__barre' );
    if ( jauge ) {
        jauge.style.width = pourcentage + '%';
        jauge.textContent = pourcentage + ' %';
    }

    var bouton = document.querySelector( '.jauge-dossier__envoyer' );
    if ( bouton ) {
        bouton.disabled = pourcentage < chDossierConfig.seuil;
    }
} );
```

> L'essentiel à retenir : Progression calculée à partir d'une liste de champs obligatoires ; Barre affichée côté front sans rechargement de page ; Blocage de l'envoi tant que le seuil n'est pas atteint

## Ne jamais faire confiance au seul contrôle côté navigateur

Un champ désactivé en JavaScript n'empêche pas une requête envoyée directement au serveur. La validation côté navigateur améliore l'expérience, mais la vérification qui compte reste celle exécutée à la réception du formulaire, avant tout enregistrement en base.

```
add_action( 'admin_post_nopriv_ch_envoi_dossier', function () {
    $champs_manquants = array();

    foreach ( ch_champs_obligatoires_dossier() as $champ ) {
        if ( empty( $_POST[ $champ ] ) ) {
            $champs_manquants[] = $champ;
        }
    }

    if ( ! empty( $champs_manquants ) ) {
        wp_die( 'Dossier incomplet : merci de compléter tous les champs requis.' );
    }

    // Enregistrement du dossier une fois la validation passée.
} );
```

## Afficher un détail plutôt qu'un simple pourcentage

Un pourcentage seul frustre autant qu'il rassure : le souscripteur veut savoir précisément ce qu'il lui reste à faire. J'ajoute donc, sous la barre de progression, une liste des champs encore vides, mise à jour en même temps que le calcul.

- Un texte court par champ manquant, dans l'ordre d'apparition du formulaire, jamais dans un ordre alphabétique qui perdrait le repère visuel du souscripteur.
- Une couleur de fond qui passe progressivement du orange au vert à mesure que le seuil se rapproche, sans jamais utiliser le rouge qui évoque une erreur plutôt qu'une progression normale.
- Un message de confirmation dès que le seuil de 80 % est franchi, avant même l'atteinte des 100 %, car certains champs facultatifs n'ont pas besoin d'être remplis pour permettre l'envoi.

## Ce que cette jauge ne remplace pas

Cette mécanique reste volontairement limitée à la complétude déclarative du dossier : elle ne vérifie ni la cohérence des informations saisies, ni leur validité au regard des règles de souscription de la mutuelle. La validation métier du dossier reste entièrement du ressort du conseiller, qui reçoit un dossier complet mais pas nécessairement conforme, une distinction que la mutuelle a tenu à clarifier avec ses équipes avant le déploiement.

> Une jauge de progression n'a de valeur que si elle dit la vérité : mieux vaut un pourcentage honnête à 60 % qu'un faux 100 % qui masque des champs facultatifs non renseignés.

## En résumé

Neuf champs, un tableau de configuration partagé, un calcul en direct côté navigateur et une vérification stricte côté serveur : cette combinaison a suffi à réduire sensiblement les dossiers incomplets reçus par les conseillers, sans ajouter la moindre extension tierce au site de la mutuelle.