Formulaires multilingues

Universally traduit automatiquement les éléments de formulaire sur vos pages afin 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 <label>
• Texte d'en-tête et de paragraphe près des formulaires
• Texte du bouton (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 des é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> des listes déroulantes <select> est traduit comme le contenu normal de la page.

<!-- 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 ne sont jamais modifiées, et une valeur pré-remplie sur une entrée de texte simple est laissée telle quelle :

• <input type="text" value="John"> : la valeur « John » reste telle quelle
• <input type="hidden" value="42"> : non modifié

Les valeurs des formulaires sont des données, pas une interface utilisateur, et leur traduction corromprait les soumissions de formulaires.

Deux exceptions, qui méritent toutes deux d'être vérifiées sur vos propres formulaires :

• Une entrée avec un attribut title voit sa value traduite, y compris une entrée cachée. <input type="text" title="Champ de recherche" value="John Smith"> est renvoyé avec la valeur traduite. Si une valeur pré-remplie est une donnée, supprimez le title ou ajoutez class="notranslate" à cette entrée.
• Le texte à l'intérieur d'une <textarea> est traduit. <textarea>Note brouillon</textarea> est traité comme tout autre texte visible. Excluez-le de la même manière s'il contient des données plutôt que du texte.

La value des entrées de soumission, de réinitialisation et de bouton est traduite par conception, car ce texte est une étiquette.

Voir Inclure et exclure les sélecteurs CSS pour exclure un élément.

Noms et identifiants des champs

Les attributs HTML tels que name, id, class et data-* ne sont jamais modifiés. Votre logique de traitement de formulaire 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, et non 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 n'importe quelle langue. Lorsqu'un visiteur remplit un formulaire traduit :

• L'URL d'action n'est pas modifiée (les formulaires sont soumis au même point de terminaison)
• Les attributs name des champs sont inchangés
• Les données soumises sont ce que l'utilisateur a tapé, dans sa propre 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 au formulaire. Si un formulaire contient des termes spécifiques au domaine qui ne doivent pas être traduits (par exemple, les noms de plans, les codes de produits), ajoutez-les en tant que Conserver les règles de glossaire. Voir Règles de glossaire.

Conservez les libellés dans le HTML. Les libellés rendus sous forme de texte dans le DOM sont traduits. Les libellés injectés 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.