Use Dynamic Variables to Internationalize Custom Form Elements

This tutorial demonstrates how to render Sign-Up Prompt Customizations differently depending on contextual data. We will use the locale variable to conditionally render form inputs, and to define validation behaviour. This tutorial uses locale, but any variable exposed to Page Templates could be substituted.

• Tenant has a custom domain verified

• Tenant has a Page Template set

In Tenant Settings, enable the locales we’ll use.

Using the Management API, add a template partial to the form-content-end signup prompt ULP container. In the case where the locale is “es” or “fr”, we’ll want to render a Terms of Service message and a checkbox.

{% 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 request looks like this:

// PUT prompts/signup/partials

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

Your signup prompt now displays a Terms of Service message and checkbox when the locale is set to fr or es, but not otherwise:

To test your outpout, head to your manage dashboard and navigate to Branding -> Universal Login -> Customization Options. Rather than clicking on the Try button to open the login prompt, right-click it, then 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).

When the locale is fr, you can validate that the checkbox is checked before continuing. Update the template partial like this:

{% 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 -->

Now users with a locale of fr will be required to consent to the Terms of Service, while users with a locale of es will not be required to consent.

The validations done in this tutorial happen client-side, and are intended to be a user convenience. They are not guaranteed to run (the user’s browser may have Javascript turned off), and they 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. For more on adding server-side validations using Actions