Localization

Localize and translate your forms to other languages.

Localized to Japanese

Localize to another language

Set the localization form setting 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:

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 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).

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();

Form in English

Same form in Japanese

---

Adding support for a new language

In order to add support for a new language, the language needs to be added to the translations object in the 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.

If you want a specific language to be supported, please create a PR by adding an entry in src/translations.js, or just create an issue containing all of the relevant translations.