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

> Learn how dynamic variables can create multi-language login prompts.

# Use Dynamic Variables to Internationalize Custom Form Elements

You can render [Sign-Up Prompt Customizations](/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) differently depending on contextual data. It uses the `locale` variable to conditionally render form inputs and define validation behavior.

The following use case works with the `locale` variable to render a Terms of Service message and checkbox. Any variable exposed to [Page Templates](/docs/customize/login-pages/universal-login/customize-templates#available-variables) can be substituted.

### Prerequisites

* Tenant has a verified [Custom Domain](/docs/customize/custom-domains)
* Tenant has a Page Template set

### Enable fr and es locales

Go to your <Tooltip tip="Auth0 Dashboard: Auth0's main product to configure your services." cta="View Glossary" href="/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, then navigate to Settings > General and enable the locales:

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/4yCGYTZ3RDyeULWIFcyHSv/01ce1985b1f8655aff0a0a2b4db6bee0/Language_Picker_-_EN.png" alt="" />
</Frame>

### Conditionally render Custom Fields

Use <Tooltip tip="Management API: A product to allow customers to perform administrative tasks." cta="View Glossary" href="/docs/glossary?term=Management+API">Management API</Tooltip> to add a template partial to the `form-content-end` signup prompt <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=Universal+Login">Universal Login</Tooltip> Prompt container. In the case where the locale is `es` or `fr`, you may want to render a Terms of Service message and a checkbox.

```liquid 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 %}
```

The following request is sent to the **Set custom text for a specific prompt** endpoint in the [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..."
  }
}
```

Your signup prompt now displays a ToS message and checkbox only when the locale is set to `fr` or `es`:

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/3zBadIHnkl9bIWP9BH1lLj/b2a6d9932be3bbb150b4dbbf76bc6599/2024-01-31_16-17-04.png" alt="" />
</Frame>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/3rwVd1h1Av7QzOEEWoCHhF/519a2eb5ac99c3801861c3372b81c0b9/2024-01-31_16-17-16.png" alt="" />
</Frame>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/2qYzAI6QVBLmqCW2FTAiGj/f19c59d79c67c63782b70995dbd223c3/2024-01-31_16-17-24.png" alt="" />
</Frame>

To test your output, go to **Manage Dashboard** and navigate to [Branding > Universal Login > Customization Options](https://manage.auth0.com/dashboard/us/dev-6endizjt/universal-login/customizations/colors), then right-click the **Try button** and copy the link address. Append the following query parameters to the copied url and navigate to the new url: `&screen_hint=signup&ui_locales=fr` (or `es`).

### Add validation

When the locale is `fr,` you can validate that the checkbox is checked before continuing. Update the template partial using the following validation code:

```liquid lines expandable 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 -->
```

With this validation in place, only users with the `fr` locale are required to consent to the ToS.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0/docs/images/cdy7uua7fh8z/7jBPuIe62PDNiIPUYzVVix/74de519659de4a8b4329165e799b1815/2024-01-31_16-20-54.png" alt="" />
</Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  The validations in this use case happen client-side and are intended to be a user convenience. They are not guaranteed to run; for example, the user’s browser may have Javascript turned off. In addition, validations can be modified by curious or malicious actors. To ensure the integrity of validation logic, client-side validations should be paired with server-side validations.
</Callout>