> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-react-sdk-reference.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Messages personnalisés et traduction

> Cette section décrit comment créer des messages personnalisés et des traductions avec les formulaires.

Vous pouvez personnaliser les messages du formulaire pour offrir à vos utilisateurs une expérience unique. En outre, vous pouvez traduire les composants des formulaires, les erreurs et d’autres messages personnalisés dans d’autres langues pour une expérience localisée.

## Messages

Grâce à l’éditeur de formulaires, vous pouvez personnaliser les messages d’erreur et créer d’autres messages personnalisés pour vos utilisateurs.

### Messages d’erreur

Vous pouvez créer des messages d’erreur personnalisés pour remplacer les messages d’erreur par défaut de vos formulaires.

Pour créer des messages d’erreur personnalisés, suivez les étapes ci-après :

1. Dans Auth0 Dashboard, accédez à **Actions > Forms (Formulaires)**.
2. Sélectionnez **Messages** dans le menu de gauche de l’éditeur de formulaire.
3. Sélectionnez l’onglet **Errors (erreurs)**.
4. Saisissez vos messages d’erreur personnalisés dans les champs appropriés pour remplacer les messages par défaut.
5. Sélectionnez **Publish (Publier)** pour enregistrer.

### Messages personnalisés

Vous pouvez créer des messages personnalisés à ajouter aux messages par défaut pour une expérience de formulaire encore plus personnalisée. Par exemple, vous pouvez ajouter un message personnalisé qui s’affiche aux utilisateurs lorsqu’une action débouche sur une erreur dans un flux.

#### Créer des messages personnalisés

Pour créer des messages personnalisés, suivez les étapes ci-après :

1. Dans le menu de gauche de l’éditeur de formulaires, sélectionnez **Messages**.
2. Sélectionnez l’onglet **Custom (Personnalisés)** , puis **Add New Item (Ajouter un nouvel élément)**.
3. À gauche, ajoutez une clé unique pour votre message\*\*.\*\* Ensuite, **saisissez** votre message personnalisé dans le champ à droite.
4. Sélectionnez **Publish (Publier)** pour enregistrer.

<Frame>
  <img src="https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=cba341eaa84721aebb83598a50acf2d2" alt="Dashboard > Forms > Custom messages and translations > Custom message" data-og-width="704" width="704" data-og-height="539" height="539" data-path="docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?w=280&fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=36128b446a7b0253746c843f6bdb4d8e 280w, https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?w=560&fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=b64f4db783256c866600fbfb5e52c23a 560w, https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?w=840&fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=cab26fd056b16736cdc5958f2ad8b3da 840w, https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?w=1100&fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=a4c7b3ada16d6e3dc5bdb3fb3dfdfbe8 1100w, https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?w=1650&fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=e9b0b6b8d2383e7e1eeaf86e696c0b12 1650w, https://mintcdn.com/docs-dev-react-sdk-reference/xhQZZy3WD2QtfOAu/docs/images/fr-ca/cdy7uua7fh8z/1upBOwWqntPPQF8fqGeN6T/a65674d05c823c5fbe703265558693e4/custom-message.png?w=2500&fit=max&auto=format&n=xhQZZy3WD2QtfOAu&q=85&s=1bb45023ac3b8b590d42817638abe548 2500w" />
</Frame>

#### Ajouter des messages personnalisés à vos formulaires

Pour référencer vos messages personnalisés dans vos formulaires, utilisez la fonction `{{t(’custom_unique_key’)}}` avec la clé unique du message personnalisé.

<Frame>
  <img src="https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=3525ec6dace54f1377d48ce25ceeed95" alt="Dashboard > Forms > Custom messages and translations > Translation function" data-og-width="450" width="450" data-og-height="449" height="449" data-path="docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?w=280&fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=32d06da38098e3dc48989eb036e8651d 280w, https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?w=560&fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=9b743a0f3914d7ecda51a8ecdcf3c17d 560w, https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?w=840&fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=11e2114f76467f293e96ef94d0edd986 840w, https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?w=1100&fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=d1ec150ea12707bf8336cbdf8d4e50e2 1100w, https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?w=1650&fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=35692836bbbb1bfe2eb08a9c60a714bc 1650w, https://mintcdn.com/docs-dev-react-sdk-reference/9zVaJ0Z01sOxOxc0/docs/images/fr-ca/cdy7uua7fh8z/45p4V7w5gw7DQZyJ08ECSH/d040720d9aa19f6e97e21defcd428e55/translation-function.png?w=2500&fit=max&auto=format&n=9zVaJ0Z01sOxOxc0&q=85&s=e91bb08b06eacd40f1e897bce3107040 2500w" />
</Frame>

## Traductions

Vous pouvez utiliser la fonctionnalité Translations (traduction) pour créer une expérience utilisateur internationale pour vos formulaires. Cette fonctionnalité s’appuie sur la langue du navigateur de l’utilisateur pour déterminer la langue appropriée pour vos formulaires.
Par défaut, des traductions pour certains messages d’erreur standard sont fournies en espagnol. Cependant, pour promouvoir une expérience utilisateur de qualité, vous pouvez définir les traductions de vos composants de formulaire, des erreurs et des messages personnalisés dans la langue de votre choix.

Pour activer les traductions, suivez les étapes ci-dessous :

1. Dans Auth0 Dashboard, accédez à **Actions > Forms (Formulaires)**.
2. Sélectionnez **Translations (Traductions)** dans le menu de gauche de l’éditeur de formulaire.
3. Cochez **Enable additional languages (Activer des langues supplémentaires)**.
4. Sélectionnez les langues souhaitées dans le menu déroulant **Additional languages (Langues supplémentaires)**.

### Traduire les messages

Avec l’éditeur de langue, vous pouvez définir des traductions pour vos composants de formulaire, erreurs et autres messages personnalisés.

Pour définir vos traductions, suivez les étapes ci-après :

1. Sélectionnez la langue souhaitée dans la liste déroulante **Select language (Sélectionner la langue)**.
2. Sélectionnez l’un des onglets suivants pour commencer à définir vos traductions :

   1. **Components (Composants)**
   2. **Errors (Erreurs)**
   3. **Custom (Personnalisés)**
3. Pour chaque champ disponible, fournissez vos traductions si nécessaire.
4. Sélectionnez **Publish (Publier)** pour enregistrer.

<Frame>
  <img src="https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=9633e125b18dc452dbb758254ee148f6" alt="Dashboard > Forms > Custom messages and translations > Translation message" data-og-width="701" width="701" data-og-height="885" height="885" data-path="docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?w=280&fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=bf1fcea53cf5d676afc3eb0f783e0ebb 280w, https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?w=560&fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=3c91641731c7cac3fb2b418e24379e0c 560w, https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?w=840&fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=0f4aa1e61b5e0bc7d7b512972b1c3c96 840w, https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?w=1100&fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=8eb36ade408c2cb027bbf342e4227731 1100w, https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?w=1650&fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=544fb70ac5cee89be40a134f034e57bb 1650w, https://mintcdn.com/docs-dev-react-sdk-reference/NTWxkJllzv1P5FSB/docs/images/fr-ca/cdy7uua7fh8z/5HY9FA6HZct2XNv5K4pCHY/c5977a7825e15285c3d77c2ca1e299a8/translation-message.png?w=2500&fit=max&auto=format&n=NTWxkJllzv1P5FSB&q=85&s=10ba5f2c20f1018fff1a2905fe8ec9a7 2500w" />
</Frame>
