Comment traduire les messages d'erreurs d'un formulaire à l'aide de CSS

🛠 Étapes à suivre

1. Accéder au Custom CSS du formulaire

   • Ouvrez le formulaire dans Centiva.

   • Cliquez sur “Options” puis “Advanced”.

   • Allez dans la section “Custom CSS”.

2. Ajouter le code CSS fourni dans l’article

   • Le champ sera vide par défaut.

   • Collez le code de base 
     
     

/* Cache le texte d'erreur original du formulaire dans tous les éléments ayant la classe .error */
.form-builder--item .error {
    font-size: 0; /* Cache le texte original sans le supprimer complètement */
    color: transparent; /* Assurez-vous que la couleur du texte est transparente */
    position: relative; /* Permet le positionnement du pseudo-élément */
    margin-top: 5px !important; /* Ajout d'une petite marge */
}

/* Insère votre texte de remplacement en utilisant le pseudo-élément ::after */
.form-builder--item .error::after {
    content: "Ce champ est obligatoire."; /* VOTRE TEXTE TRADUIT */
    color: #cb3837 !important; /* Couleur rouge pour l'erreur */
    font-size: 13px !important; /* Taille de police pour le message */
    display: block; /* Affiche le contenu sur une nouvelle ligne */
    position: absolute; /* Positionne le nouveau texte */
    top: 0;
    left: 0;
    white-space: normal; /* Assure que le texte s'enroule si nécessaire */
}

/* Style pour l'erreur générique (si le formulaire l'utilise) */
.generic-error-message {
    font-size: 0;
    color: transparent;
    position: relative;
}

.generic-error-message::after {
    content: "Une erreur est survenue lors de l'envoi du formulaire. Veuillez réessayer."; /* Erreur générique traduite */
    color: red !important;
    font-size: 14px !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

1. • Ce code couvre la majorité des champs standards.

1. Pour les formulaires plus complexes

   • Faites un aperçu du formulaire.

   • Cliquez droit > Afficher le code source de la page.

   • Copiez tout le HTML du formulaire.

   • Collez le code dans Gemini ou utilisez une IA comme ChatGPT.

   • Utilisez un prompt du type :

     "En analysant le code suivant, j’aimerais que tu m’aides à créer un CSS personnalisé pour traduire les messages d’erreur du formulaire en français."

2. Ajustements spécifiques

   • Si certains champs ne sont pas couverts par le CSS de base, vous devrez les cibler manuellement via des sélecteurs CSS (ex. .error-message ou input:invalid + span).

   • Vous pouvez demander à l’IA de générer le CSS spécifique pour ces champs.

✅ Résultat attendu

• Tous les messages d’erreur affichés dans le formulaire seront en français.

• Une expérience utilisateur plus cohérente et professionnelle.