Formulaires multilingues

Traduit automatiquement les éléments de formulaire sur vos pages pour que les visiteurs puissent interagir avec les formulaires dans leur langue. Aucune configuration supplémentaire n'est nécessaire.

Ce qui est traduit

Étiquettes et texte

Tout le texte visible associé aux formulaires est traduit dans le cadre du contenu normal de la page :

• Texte de l'<label> 
• Texte d'en-tête et de paragraphe près des formulaires
• Texte des boutons (par ex. <button>, <input type="submit">, <input type="reset">, <input type="button">)
• Aide, descriptions et messages d'erreur rendus en HTML

Espaces réservés

L'attribut placeholder sur les éléments <input> et <textarea> est automatiquement détecté et traduit.

<!-- Original -->
<input type="text" placeholder="Enter your name">

<!-- Translated (French) -->
<input type="text" placeholder="Entrez votre nom">

Attributs d'accessibilité

• aria-label sur les entrées, les zones de texte et les boutons
• Références aria-labelledby et aria-describedby (le texte de l'élément référencé est traduit)

Options de sélection

Le texte à l'intérieur des éléments <option> dans les listes déroulantes <select> est traduit comme un contenu de page normal.

<!-- Original -->
<select>
  <option>Choose a country</option>
  <option>United States</option>
  <option>France</option>
</select>

<!-- Translated (French) -->
<select>
  <option>Choisissez un pays</option>
  <option>États-Unis</option>
  <option>France</option>
</select>

Ce qui n'est PAS traduit

Valeurs d'entrée

Les données saisies par l'utilisateur et les attributs value pré-remplis sur les entrées de texte ne sont pas traduits. Cela inclut :

• <input type="text" value="John"> — la valeur « John » reste telle quelle
• <input type="hidden"> — les champs cachés ne sont jamais modifiés
• <textarea>Texte par défaut</textarea> — le contenu pré-rempli des zones de texte n'est pas traduit

Ceci est intentionnel — les valeurs des formulaires sont des données, pas de l'interface utilisateur. Leur traduction corromprait les soumissions de formulaires.

Noms et identifiants des champs

Les attributs HTML tels que name, id, class, et data-* ne sont jamais modifiés. Votre logique de traitement des formulaires fonctionne exactement de la même manière, quelle que soit la langue d'affichage.

Messages de validation

Les messages de validation natifs du navigateur (par exemple, « Veuillez remplir ce champ ») sont gérés par le navigateur dans la langue du système de l'utilisateur, pas par Universally. Les messages de validation personnalisés rendus en HTML sont traduits normalement.

Soumissions de formulaires

Les soumissions de formulaires fonctionnent de manière identique dans toutes les langues. Lorsqu'un visiteur remplit un formulaire traduit :

• L'URL action n'est pas modifiée (les formulaires sont soumis au même point de terminaison)
• Les attributs name des champs restent inchangés
• Les données soumises sont ce que l'utilisateur a tapé — dans sa langue
• Les champs cachés sont transmis sans modification

Votre backend reçoit la même structure de formulaire, quelle que soit la langue utilisée par le visiteur.

Conseils

Utilisez les règles de glossaire pour les termes spécifiques aux formulaires. Si un formulaire contient des termes spécifiques au domaine qui ne doivent pas être traduits (par exemple, noms de plans, codes de produits), ajoutez-les en tant que règles de conservation dans le glossaire. Voir Règles de glossaire.

Utilisez placeholder pour les indices. Les espaces réservés sont traduits automatiquement et aident les visiteurs à comprendre ce qu'il faut saisir.

Conservez les étiquettes dans le HTML. Les étiquettes rendues sous forme de texte dans le DOM sont traduites. Les étiquettes injectées via JavaScript après le chargement de la page peuvent ne pas l'être.

Testez les flux de formulaires. Après avoir activé la traduction, soumettez un formulaire de test dans une langue traduite pour vérifier que la soumission fonctionne correctement.