The Translations Code Editor is a tool for configuring multilingual support in your forms. It allows you to manage translation files directly in JSON format, defining how form text appears in different languages.
There is a Visual Editor!
This article is meant for users with some technical experience and a preference for editing form content in the code editors. For a less technical way to manage translations, consider using the Translations Visual Editor, which simplifies updates without diving into code.
This article is meant for users with some technical experience and a preference for editing form content in the code editors. For a less technical way to manage translations, consider using the Translations Visual Editor, which simplifies updates without diving into code.
Accessing the Translations Code Editor
1
Open a form in the Form Builder. From there, switch to Code Mode using the upper-right toggle.
2
Select the Translations tab at the top of the Code Editor.
How Translation Data is Structured
A translation file enables your form or workflow to operate in multiple languages. It uses a simple JSON structure to map form text to translations in specified languages.
For example:
In this example, “Zip Code” is translated into Spanish as Código Postal and French as Code Postal. When users select a language on the form, these translations are displayed.
Key Features of the Translations Code Editor
Manual UUID Management
Each translation entry requires a unique identifier (UUID). If you’re working in the Code Editor, these need to be generated manually. You can use any UUID generator, or simply enter unique text for each entry.
Each translation entry requires a unique identifier (UUID). If you’re working in the Code Editor, these need to be generated manually. You can use any UUID generator, or simply enter unique text for each entry.
Language Specification
Use ISO 639-1 codes (e.g., “es” for Spanish, “fr” for French) to define the target languages. You can find the full list of codes here.
Use ISO 639-1 codes (e.g., “es” for Spanish, “fr” for French) to define the target languages. You can find the full list of codes here.
Integrating Languages in Your Layout
Ensure your layout includes a Language Selector component. You can add this using the Form Builder or by adding a piece of code to your form layout code in the Code Editor.
For example:
Ensure your layout includes a Language Selector component. You can add this using the Form Builder or by adding a piece of code to your form layout code in the Code Editor.
For example:
This line of code would insert a Language Selector component on your form layout and restrict the available options to English ("en"), Spanish ("es"), and French ("fr").
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article