Create a Multilingual Form

A multilingual form translates its content to multiple languages and allows respondents to fill it out in their native language. Multilingual support enhances accessibility and helps you reach wider audiences by removing language barriers. This example shows how to create multilingual forms in Survey Creator. The form builder already contains a form with translated texts. Open the Translations tab to view and edit them.

To let survey authors localize their forms, you need to reference or import localization dictionaries.

<script src="https://unpkg.com/survey-core/survey.i18n.min.js"></script>

import "survey-core/survey.i18n";

Since SurveyJS v1.9.112, you may reference or import only the languages you need, as shown below:

<script src="https://unpkg.com/survey-core/i18n/french.js"></script>
<script src="https://unpkg.com/survey-core/i18n/german.js"></script>
<script src="https://unpkg.com/survey-core/i18n/italian.js"></script>

import "survey-core/i18n/french";
import "survey-core/i18n/german";
import "survey-core/i18n/italian";

Survey authors use the Translations tab to localize their forms. They can select required languages and add translations for them using a table view. Those translations are saved in the survey JSON schema. To make the Translations tab available, enable the showTranslationTab property in an object passed to the Survey Creator constructor.

After adding required translations, form authors can select the default form language. To find this setting, activate survey settings in the Property Grid and locate the Select a survey language dropdown under the General category.

A locale code corresponding to the selected language is saved in the survey JSON schema: open the JSON Editor tab and view the locale property. If a user doesn't change the default language, the form is displayed in English.

You can restrict the list of languages for which survey authors can add translations. To do this, assign an array of white-listed locale codes to the supportedLocales property of the surveyLocalization object. Refer to the commented out lines in JavaScript code for a code example.

AI-powered translation services can help you localize your surveys. To integrate machine translation into Survey Creator, you need to deploy a language model to your application and expose an API for interaction with that model. Refer to tutorials dedicated to the model of your choice for instructions. This example uses the GPT-3.5 Turbo model deployed on the SurveyJS website. To test this feature, open the Translations tab and click an Auto-translate All button next to a target language in a language list.

A deployed AI model receives original survey texts and responds with their translations. To submit the survey texts, handle the onMachineTranslate event. Use its options.fromLocale, options.toLocale, and options.strings parameters to identify the source and target languages and access the strings to translate. After the AI service returns an array with translations, pass it to the options.callback method.

The options.strings array contains only the strings that are empty in the target language. Once they are filled in, those strings won't be updated if a string in a source language is modified. To ensure that automatic translations are up-to-date, enable the clearTranslationsOnSourceTextChange property in the Survey Creator configuration object. With this setting, translations to other languages will be cleared and ready to be localized again after a change in their source string.