# Localization

<figure><img src="proxy.php?url=https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2FKNJIKmfgQbwGguqUA2F6%2Flocalization.png?alt=media&#x26;token=0535ac55-37f3-4e94-afd2-6bdb134906b0" alt=""><figcaption><p>Localized to Japanese</p></figcaption></figure>

## Localize to another language <a href="proxy.php?url=#localizable-to-any-language" id="localizable-to-any-language"></a>

Set the `localization` [form setting](https://docs.forms.md/getting-started/settings) to a supported language code and write your questions, descriptions, etc., in that language—everything will be automatically translated. Here's an example form in Japanese:

```javascript
import { Composer } from "formsmd";

const composer = new Composer({
  id: "my-form",
  localization: "ja"
});
 
composer.opinionScale("nps", {
  question: "当社の製品を友人や同僚に推薦する可能性はどの程度ありますか？",
  required: true
});
```

Generates the following Markdown-like syntax:

```
#! id = my-form
#! localization = ja
 
nps* = OpinionScale(
  | question = 当社の製品を友人や同僚に推薦する可能性はどの程度ありますか？
)
```

***

## Supported language codes

The following language codes are supported:

| Language                                                                                                     | Code   |
| ------------------------------------------------------------------------------------------------------------ | ------ |
| English (default)                                                                                            | `"en"` |
| Arabic (please also set the `dir` [form setting](https://docs.forms.md/getting-started/settings) to `"rtl"`) | `"ar"` |
| Bengali                                                                                                      | `"bn"` |
| German                                                                                                       | `"de"` |
| Spanish                                                                                                      | `"es"` |
| French                                                                                                       | `"fr"` |
| Japanese                                                                                                     | `"ja"` |
| Portuguese                                                                                                   | `"pt"` |
| Mandarin Chinese                                                                                             | `"zh"` |

***

## Dynamic translations

Use the handy `translate()` function to define all of the translation strings as you create the form. Here's the function overview:

```
translate(localization: string, translations: object)
```

It takes the ISO alpha-2 language code as the first argument (`localization`) and an object of `translations` as the second argument. In the example below, the form will be in English or Japanese depending on the language code in the user's local storage (so user preference).

```javascript
import { translate, Composer, Formsmd } from "formsmd";

function getFeedbackFormTemplate(localization) {
  // Pass the localization as a form setting
  const composer = new Composer({
    id: "my-form",
    localization: localization
  });

  // Define the translations in the opinion scale function
  composer.opinionScale("nps", {
    question: translate(localization, {
      en: "How likely are you to recommend our company's products to friends and colleagues?",
      ja: "当社の製品を友人や同僚に推薦する可能性はどの程度ありますか？"
    }),
    required: true
  });

  return composer.template;
}

// Pass the localization from local storage
const formsmd = new Formsmd(
  getFeedbackFormTemplate(localStorage.getItem("localization")),
  document.getElementById("my-form-container"),
  {}
);
formsmd.init();

```

<div><figure><img src="proxy.php?url=https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2FRdrpAocCVdNSxYrBOtqh%2Flocalization-english.png?alt=media&#x26;token=aa8255ed-ed2e-41fd-8688-07746a5d4e82" alt=""><figcaption><p>Form in English</p></figcaption></figure> <figure><img src="proxy.php?url=https://824814026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRq8uKg8VhNAvWTRL52uz%2Fuploads%2FKNJIKmfgQbwGguqUA2F6%2Flocalization.png?alt=media&#x26;token=0535ac55-37f3-4e94-afd2-6bdb134906b0" alt=""><figcaption><p>Same form in Japanese</p></figcaption></figure></div>

***

## Adding support for a new language <a href="proxy.php?url=#adding-support-for-a-new-language" id="adding-support-for-a-new-language"></a>

In order to add support for a new language, the language needs to be added to the `translations` object in the [`src/translations.js`](https://github.com/formsmd/formsmd/blob/main/src/translations.js) file. The key for this entry would be the language code, and the value would be a JSON object containing translations required for creating the forms.

Once this entry is in place, the language would be supported after the project is rebuilt using `npm run build`.

{% hint style="info" %}
If you want a specific language to be supported, please create a PR by adding an entry in [`src/translations.js`](https://github.com/formsmd/formsmd/blob/main/src/translations.js), or just create an issue containing all of the relevant translations.
{% endhint %}