Skip to content

Form multilanguage

Matthew Hall edited this page May 27, 2023 · 45 revisions

Internalization: can be referred to as the design and development of a product, application, or document content so that it can be localized for target audiences that vary in culture, region, or language. It can also be referred to as the process of designing software to support multiple languages, cultures, and regions. It involves considering various aspects of software development, such as user interface, data storage, and communication protocols, to ensure they are compatible with different languages and cultural norms. The benefits or importance of internalization is that 1) it enhances user experience, 2) it meets legal requirements, 3) it improves localization, and 4) it expands reach.

CHEFS is developed to support multiple languages. The list of languages currently supported by CHEFS is below:

Arabic

English

Español (Spanish),

فارسی (Farsi)

Français (French)

हिंदी (Hindi)

日本語 (Japanese)

한국어 (Korean)

ਪੰਜਾਬੀ (Punjabi)

Русский (Russian)

Tagalog (Filipino)

Українська (Ukrainian)

Tiếng Việt (Vietnamese)

简体中文 (Simplified Chinese)

繁體中文 (Traditional Chinese)

Screenshot 2023-05-26 143012

The example below shows the CHEFS homepage in the English language, and after the language switch to the French language, it shows looks like in the French Language.

Before Switch to the French language Screenshot 2023-05-26 143114

Click to switch to the French language Screenshot 2023-05-26 143146

After the switch to the French language Screenshot 2023-05-26 143204

Attention Form Designers:

Designing multi-language forms is a different process from translation in CHEFS and Form.io. Please follow the steps below on how to design one

Steps:

  1. Drag the Hidden component into the Form Builder
  2. In the logic tab of the component, click on the "Add Logic" button
  3. For the Logic Name field let's type "translations", and in the Trigger > type field, select "javascript"
  4. copy and paste the code below into the Text Area of the javascript
   const { root} = instance;
   const i18 = root.i18next;
   i18.addResources("en", "translation", {"Last Name": "Last Name", "First Name": "First Name" });
   i18.addResources("fr", "translation", {"Last Name": "Nom de famille", "First Name": "Prénom" });
  1. Add more language(s) by copying and pasting a new line to the end of the file,
  2. Change "fr" to the shortcode of the languages you want in your translation
  3. put in the comma separated list of translations ("English phrase" : "translated phrase",)

If you had lots of phrases to translate you can format your translation file like this

   const { root} = instance;
   const i18 = root.i18next;
   // repeat this section for each language
   i18.addResources("en", "translation", {
      "First phrase": "First translated phrase", // repeat one of these lines for each translated phrase
      "Second phrase": "Second translated phrase",  
      "Third phrase": "Third translated phrase" // last translation line has no comma
   });
   // end repeat section for each language

Download Template:

Clone this wiki locally