> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Utiliser des variables dynamiques pour traduire les éléments de formulaire personnalisés

> Découvrez comment les variables dynamiques peuvent créer des invites de connexion multilingues.

Vous pouvez afficher les personnalisations de [Sign-Up Prompt Customizations (Personnalisations de l’invite d’inscription)](/docs/fr-CA/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts) différemment selon les données contextuelles. La variable `locale` est utilisée pour afficher conditionnellement les champs du formulaire et définir le comportement de validation.

Le cas d’utilisation suivant fonctionne avec la variable `locale` pour afficher un message de conditions d’utilisation et une case à cocher. Toute variable exposée à [Page Templates (Modèles de pages)](/docs/fr-CA/fr-ca/customize/universal-login-pages/universal-login-page-templates#available-variables) peut être substituée.

<div id="prerequisites">
  ### Prérequis
</div>

* Le locataire dispose d’un [Custom Domain (Domaine personnalisé)](/docs/fr-CA/fr-ca/customize/custom-domains) vérifié
* Le locataire a défini un modèle de page

<div id="enable-fr-and-es-locales">
  ### Activer les langues locales fr et es
</div>

activer les paramètres régionaux :

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/op3qeo8SlxWCJLLV/docs/images/fr-ca/cdy7uua7fh8z/4yCGYTZ3RDyeULWIFcyHSv/f70f2e2c8ae987a604c579cb6e363146/Language_Picker_-_FR.png?fit=max&auto=format&n=op3qeo8SlxWCJLLV&q=85&s=1da01166160f7b3828f05d13759ca4df" alt="" width="1002" height="584" data-path="docs/images/fr-ca/cdy7uua7fh8z/4yCGYTZ3RDyeULWIFcyHSv/f70f2e2c8ae987a604c579cb6e363146/Language_Picker_-_FR.png" />
</Frame>

<div id="conditionally-render-custom-fields">
  ### Rendre conditionnellement les champs personnalisés
</div>

Utilisez le <Tooltip href="/docs/fr-CA/fr-ca/glossary?term=management-api" tip="Management API
Un produit permettant aux clients d’effectuer des tâches administratives." cta="Voir le glossaire">Management API</Tooltip> pour ajouter un modèle partiel à l’invite d inscription Conteneur d’invite de connexion universelle `form-content-end`. Dans le cas où le paramètre régional est `es` ou `fr`, vous souhaiterez peut-être afficher un message de conditions d’utilisation et une case à cocher.

```json lines theme={null}
{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}
```

La demande suivante est envoyée au point terminal **Set custom text for a specific prompt (Définir un texte personnalisé pour une invite spécifique)** dans la [Management API](https://auth0.com/docs/api/management/v2/prompts/put-custom-text-by-language) :

```javascript lines theme={null}
// PUT prompts/signup/partials

{
  "signup": {
    "form-content-end": "{% if locale..."
  }
}
```

Votre invite d’inscription affiche désormais un message de conditions d’utilisation et une case à cocher uniquement lorsque les paramètres régionaux sont définis sur `fr` ou `es` :

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/ILd3jqbLP7deb70c/docs/images/fr-ca/cdy7uua7fh8z/3zBadIHnkl9bIWP9BH1lLj/b2a6d9932be3bbb150b4dbbf76bc6599/2024-01-31_16-17-04.png?fit=max&auto=format&n=ILd3jqbLP7deb70c&q=85&s=63f7b5beec30f18397a11ba394b887de" alt="" width="400" height="192" data-path="docs/images/fr-ca/cdy7uua7fh8z/3zBadIHnkl9bIWP9BH1lLj/b2a6d9932be3bbb150b4dbbf76bc6599/2024-01-31_16-17-04.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/ILd3jqbLP7deb70c/docs/images/fr-ca/cdy7uua7fh8z/3rwVd1h1Av7QzOEEWoCHhF/519a2eb5ac99c3801861c3372b81c0b9/2024-01-31_16-17-16.png?fit=max&auto=format&n=ILd3jqbLP7deb70c&q=85&s=9053d7f71f8f6de11b5db8a4472e9fef" alt="" width="400" height="153" data-path="docs/images/fr-ca/cdy7uua7fh8z/3rwVd1h1Av7QzOEEWoCHhF/519a2eb5ac99c3801861c3372b81c0b9/2024-01-31_16-17-16.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/3aRX_yPVEOtgRzDg/docs/images/fr-ca/cdy7uua7fh8z/2qYzAI6QVBLmqCW2FTAiGj/f19c59d79c67c63782b70995dbd223c3/2024-01-31_16-17-24.png?fit=max&auto=format&n=3aRX_yPVEOtgRzDg&q=85&s=b712f8d92602be9dc7d5543131733523" alt="" width="400" height="134" data-path="docs/images/fr-ca/cdy7uua7fh8z/2qYzAI6QVBLmqCW2FTAiGj/f19c59d79c67c63782b70995dbd223c3/2024-01-31_16-17-24.png" />
</Frame>

Pour tester le résultat, accédez à **Manage Dashboard (Gérer le tableau de bord)** et accédez à [Branding (Image de marque) > Universal Login (Connexion universelle) > Customization Options (Options de personnalisation)](https://manage.auth0.com/dashboard/us/dev-6endizjt/universal-login/customizations/colors), puis cliquez droit sur **Try button (Bouton d’essai)** et copiez l’adresse du lien. Ajoutez les paramètres de requête suivants à l’URL copiée et accédez à la nouvelle URL : `&screen_hint=signup&ui_locales=fr` (or `es`).

<div id="add-validation">
  ### Ajouter une validation
</div>

Lorsque le paramètre régional est `fr,` vous pouvez valider que la case est cochée avant de continuer. Mettez à jour le modèle partiel à l’aide du code de validation suivant :

```json lines theme={null}
{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>

    <!-- NEW -->
    <div
      class="ulp-error-info"
      data-ulp-validation-function="requiredFunction"
      data-ulp-validation-event-listeners="change">
      Vous devez accepter les termes et conditions pour continuer
    </div>
    <!-- END NEW -->
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

<!-- NEW -->
<script>
  function requiredFunction(element, formSubmitted) {
    if (! formSubmitted) {
      return true;
    }
    return element.checked;
  }
</script>
<!-- END NEW -->
```

`fr`.

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/g_5uXNJ2fsuQgUNN/docs/images/fr-ca/cdy7uua7fh8z/7jBPuIe62PDNiIPUYzVVix/74de519659de4a8b4329165e799b1815/2024-01-31_16-20-54.png?fit=max&auto=format&n=g_5uXNJ2fsuQgUNN&q=85&s=94c3e468635d125a59afa68a00c2b678" alt="" width="400" height="213" data-path="docs/images/fr-ca/cdy7uua7fh8z/7jBPuIe62PDNiIPUYzVVix/74de519659de4a8b4329165e799b1815/2024-01-31_16-20-54.png" />
</Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Les validations dans ce cas d’utilisation se font côté client et sont destinées à faciliter la tâche de l’utilisateur. Leur fonctionnement n’est pas garanti; par exemple, le navigateur de l’utilisateur peut avoir désactivé Javascript. En outre, les validations peuvent être modifiées par des acteurs curieux ou malveillants. Pour garantir l’intégrité de la logique de validation, les validations côté client doivent être associées à des validations côté serveur.
</Callout>