---
title: Create a Multilingual Form
product: Survey Creator
description: With the Translations tab of the SurveyJS Creator UI, you can create surveys, quizzes, and other web forms in multiple languages for your JavaScript app. UI elements are already translated to more than 30 languages, including RTL.
framework: React
source: https://surveyjs.io/survey-creator/examples/create-multilingual-forms/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---
# Create a Multilingual Form (React)
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.
## Import Dictionary Files
To let survey authors localize their forms, you need to reference or import [localization dictionaries](https://github.com/surveyjs/survey-library/tree/01bd8abd0c574719956d4d579d48c8010cd389d4/packages/survey-core/src/localization).
```html
```
```js
import "survey-core/survey.i18n";
```
Since SurveyJS v1.9.112, you may reference or import only the languages you need, as shown below:
```html
```
```js
import "survey-core/i18n/french";
import "survey-core/i18n/german";
import "survey-core/i18n/italian";
```
## Activate the Translations Tab
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`](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#showTranslationTab) property in an object passed to the Survey Creator constructor.
## Specify the Default Language
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.
## Limit Available Languages
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.
## Enable Machine Translation
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`](/survey-creator/documentation/api-reference/survey-creator#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`](/survey-creator/documentation/api-reference/icreatoroptions#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.
## Files
### `public/index.html`
```html
```
### `src/survey_json.js`
```js
export const surveyJSON = {
"completedHtmlOnCondition": [
{
"expression": "{nps-score} <= 6 or {rebuy} = false",
"html": {
"default": "Thanks for your feedback! We highly value all ideas and suggestions from our customers, whether they're positive or critical. In the future, our team might reach out to you to learn more about how we can further improve our product so that it exceeds your expectations.",
"fr": "Merci pour vos commentaires! Nous accordons une grande importance à toutes les idées et suggestions de nos clients, qu'elles soient positives ou critiques. À l'avenir, notre équipe pourrait vous contacter pour en savoir plus sur la façon dont nous pouvons encore améliorer notre produit afin qu'il dépasse vos attentes.",
"de": "Vielen Dank für Ihr Feedback! Wir schätzen alle Ideen und Vorschläge unserer Kunden sehr, egal ob positiv oder kritisch. In Zukunft wird sich unser Team möglicherweise mit Ihnen in Verbindung setzen, um mehr darüber zu erfahren, wie wir unser Produkt weiter verbessern können, damit es Ihre Erwartungen übertrifft.",
"es": "¡Gracias por tus comentarios! Valoramos mucho todas las ideas y sugerencias de nuestros clientes, ya sean positivas o críticas. En el futuro, nuestro equipo podría comunicarse con usted para obtener más información sobre cómo podemos mejorar aún más nuestro producto para que supere sus expectativas.",
"it": "Grazie per il tuo feedback! Apprezziamo molto tutte le idee e i suggerimenti dei nostri clienti, siano essi positivi o critici. In futuro, il nostro team potrebbe contattarti per saperne di più su come possiamo migliorare ulteriormente il nostro prodotto in modo che superi le tue aspettative."
}
},
{
"expression": "{nps-score} = 6 or {nps-score} = 7",
"html": {
"default": "Thanks for your feedback. Our goal is to create the best possible product, and your thoughts, ideas, and suggestions play a major role in helping us identify opportunities to improve.",
"fr": "Merci pour vos commentaires. Notre objectif est de créer le meilleur produit possible, et vos réflexions, idées et suggestions jouent un rôle majeur pour nous aider à identifier les opportunités d'amélioration.",
"de": "Vielen Dank für Ihr Feedback. Unser Ziel ist es, das bestmögliche Produkt zu schaffen, und Ihre Gedanken, Ideen und Vorschläge spielen eine wichtige Rolle dabei, uns dabei zu helfen, Verbesserungsmöglichkeiten zu erkennen.",
"es": "Gracias por tus comentarios. Nuestro objetivo es crear el mejor producto posible, y sus pensamientos, ideas y sugerencias juegan un papel importante para ayudarnos a identificar oportunidades para mejorar.",
"it": "Grazie per il tuo feedback Il nostro obiettivo è creare il miglior prodotto possibile e i tuoi pensieri, idee e suggerimenti svolgono un ruolo importante nell'aiutarci a identificare le opportunità di miglioramento."
}
},
{
"expression": "{nps-score} >= 8",
"html": {
"default": "Thanks for your feedback. It's great to hear that you're a fan of our product. Your feedback helps us discover new opportunities to improve it and make sure you have the best possible experience.",
"fr": "Merci pour vos commentaires. Nous sommes ravis d'entendre que vous avez apprécié notre produit. Vos commentaires nous aident à découvrir de nouvelles opportunités pour l'améliorer et vous assurer la meilleure expérience possible.",
"de": "Vielen Dank für Ihr Feedback. Es ist schön zu hören, dass Sie ein Fan unseres Produkts sind. Ihr Feedback hilft uns, neue Verbesserungsmöglichkeiten zu entdecken und sicherzustellen, dass Sie das bestmögliche Erlebnis haben.",
"es": "Gracias por tus comentarios. Es fantástico saber que eres fanático de nuestro producto. Sus comentarios nos ayudan a descubrir nuevas oportunidades para mejorarlo y asegurarnos de que tenga la mejor experiencia posible.",
"it": "Grazie per il tuo feedback È bello sapere che sei un fan del nostro prodotto. Il tuo feedback ci aiuta a scoprire nuove opportunità per migliorarlo e assicurarci che tu abbia la migliore esperienza possibile."
}
}
],
"pages": [
{
"name": "page1",
"elements": [
{
"type": "rating",
"name": "nps-score",
"title": {
"default": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
"fr": "Sur une échelle de 0 à 10, quelle est la probabilité que vous recommandiez notre produit à un ami ou à un collègue?",
"de": "Auf einer Skala von 0 bis 10, wie wahrscheinlich ist es, dass Sie uns einem Freund oder Kollegen weiterempfehlen?",
"es": "En una escala de 0 a 10, ¿qué probabilidades hay de que nos recomiende a un amigo o colega?",
"it": "Su una scala da 0 a 10, quanto è probabile che ci consiglieresti ad un amico o collega?"
},
"rateMin": 0,
"rateMax": 10
},
{
"type": "comment",
"name": "disappointing-experience",
"visibleIf": "{nps-score} <= 5",
"title": {
"default": "How did we disappoint you and what can we do to make things right?",
"fr": "Nous n'avons pas été a la hauteur de vos attentes, comment pouvons-nous améliorer?",
"de": "Wie haben wir Sie enttäuscht und was können wir tun, um die Dinge wieder in Ordnung zu bringen?",
"es": "¿Cómo te decepcionamos y qué podemos hacer para arreglar las cosas?",
"it": "In che modo ti abbiamo deluso e cosa possiamo fare per sistemare le cose?"
},
"maxLength": 300
},
{
"type": "comment",
"name": "improvements-required",
"visibleIf": "{nps-score} >= 6",
"title": {
"default": "What can we do to make your experience more satisfying?",
"fr": "Que pouvons-nous faire pour rendre votre expérience plus satisfaisante?",
"de": "Was können wir tun, um Ihr Erlebnis zufriedenstellender zu gestalten?",
"es": "¿Qué podemos hacer para que tu experiencia sea más satisfactoria?",
"it": "Cosa possiamo fare per rendere la tua esperienza più soddisfacente?"
},
"maxLength": 300
},
{
"type": "checkbox",
"name": "promoter-features",
"visibleIf": "{nps-score} >= 9",
"title": {
"default": "Which of the following features do you value the most?",
"fr": "Laquelle des fonctionnalités suivantes appréciez-vous le plus ?",
"de": "Welche der folgenden Funktionen schätzen Sie am meisten?",
"es": "¿Cuál de las siguientes características valoras más?",
"it": "Quale delle seguenti caratteristiche apprezzi di più?"
},
"description": {
"default": "Please select no more than three features.",
"fr": "Veuillez ne pas sélectionner plus de trois fonctionnalités.",
"de": "Bitte wählen Sie nicht mehr als drei Funktionen aus.",
"es": "Seleccione no más de tres funciones.",
"it": "Seleziona non più di tre funzionalità."
},
"isRequired": true,
"choices": [
{
"value": "performance",
"text": {
"default": "Performance",
"de": "Leistung",
"es": "Actuación",
"it": "Prestazione"
}
},
{
"value": "stability",
"text": {
"default": "Stability",
"fr": "Stabilité",
"de": "Stabilität",
"es": "Estabilidad",
"it": "Stabilità"
}
},
{
"value": "ui",
"text": {
"default": "User interface",
"fr": "Interface utilisateur",
"de": "Benutzeroberfläche",
"es": "Interfaz de usuario",
"it": "Interfaccia utente"
}
},
{
"value": "complete-functionality",
"text": {
"default": "Complete functionality",
"fr": "Ensemble des fonctionnalités",
"de": "Vollständige Funktionalität",
"es": "Funcionalidad completa",
"it": "Funzionalità completa"
}
},
{
"value": "learning-materials",
"text": {
"default": "Learning materials (documentation, demos, code examples)",
"fr": "Matériel d'apprentissage (documentation, démos, exemples de code)",
"de": "Lernmaterialien (Dokumentation, Demos, Codebeispiele)",
"es": "Materiales de aprendizaje (documentación, demostraciones, ejemplos de código)",
"it": "Materiali didattici (documentazione, demo, esempi di codice)"
}
},
{
"value": "support",
"text": {
"default": "Quality support",
"fr": "Accompagnement de qualité",
"de": "Qualitätsunterstützung",
"es": "Soporte de calidad",
"it": "Supporto di qualità"
}
}
],
"showOtherItem": true,
"otherPlaceholder": {
"default": "Please specify...",
"fr": "Veuillez préciser...",
"de": "Bitte angeben...",
"es": "Por favor especifica...",
"it": "Per favore specificare..."
},
"otherText": {
"default": "Other features",
"fr": "Autres fonctionnalités",
"de": "Andere Eigenschaften",
"es": "Otras características",
"it": "Altre caratteristiche"
},
"colCount": 2,
"maxSelectedChoices": 3
}
]
},
{
"name": "page2",
"elements": [
{
"type": "boolean",
"name": "rebuy",
"title": {
"default": "Would you buy our product again?",
"fr": "Achèteriez-vous à nouveau notre produit?",
"de": "Würden Sie unser Produkt wieder kaufen?",
"es": "¿Comprarías nuestro producto nuevamente?",
"it": "Compreresti di nuovo il nostro prodotto?"
}
}
]
},
{
"name": "page3",
"elements": [
{
"type": "radiogroup",
"name": "testimonial",
"title": {
"default": "Would you mind providing us a brief testimonial for the website?",
"fr": "Accepteriez-vous de rédiger un bref commentaire pour notre site Internet?",
"de": "Würde es Ihnen etwas ausmachen, uns ein kurzes Testimonial für die Website zu geben?",
"es": "¿Le importaría brindarnos un breve testimonio sobre el sitio web?",
"it": "Ti dispiacerebbe fornirci una breve testimonianza per il sito web?"
},
"choices": [
{
"value": "yes",
"text": {
"default": "Sure!",
"fr": "Bien sur!",
"de": "Sicher!",
"es": "¡Seguro!",
"it": "Certamente!"
}
},
{
"value": "no",
"text": {
"default": "No",
"fr": "Non merci.",
"de": "Nein",
"es": "No",
"it": "No"
}
}
]
},
{
"type": "text",
"name": "email",
"visibleIf": "{testimonial} = 'yes'",
"title": {
"default": "What is your email address?",
"fr": "Quelle est votre adresse e-mail?",
"de": "Wie lautet deine E-Mail Adresse?",
"es": "¿Cuál es tu dirección de correo electrónico?",
"it": "Qual è il tuo indirizzo e-mail?"
},
"validators": [
{
"type": "email"
}
],
"placeholder": {
"default": "Enter your email here",
"fr": "Veuillez saisir votre adresse e-mail ici",
"de": "Gib deine E-Mail hier ein",
"es": "Introduzca su correo electrónico aquí",
"it": "Inserisci la tua email qua"
}
}
]
}
],
"widthMode": "static",
"width": "1000px"
};
```
### `src/SurveyCreatorComponent.jsx`
```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { surveyLocalization } from "survey-core";
import { surveyJSON } from "./survey_json";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";
registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes
// Uncomment the following line if you want to limit available languages
// surveyLocalization.supportedLocales = [ "en", "de", "es", "fr", "it" ];
function SurveyCreatorRenderComponent() {
const creator = new SurveyCreator({ showTranslationTab: true, clearTranslationsOnSourceTextChange: true });
// Enable AI-powered localization
creator.onMachineTranslate.add((_, options) => {
console.log(options.strings);
const url = window.location.origin + "/api/StringsTranslator/translate";
try {
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
body: JSON.stringify({ "fromLocale": options.fromLocale, "toLocale": options.toLocale, "strings": options.strings })
})
.then(response => response.json())
.then(data => {
creator.clearTranslationsOnSourceTextChange = false;
options.callback(data);
creator.clearTranslationsOnSourceTextChange = true;
const str = data.length + " strings are translated";
creator.notify(str);
});
} catch (error) {
options.callback();
console.error("AI translation API is unavailable");
}
});
creator.JSON = surveyJSON;
// Enable the Français locale for the survey being configured
creator.survey.locale = "fr";
return ();
}
export default SurveyCreatorRenderComponent;
```
### `src/index.css`
```css
/* You can add your custom CSS here. */
```
### `src/index.js`
```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";
const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render();
```
### `package.json`
```json
{
"dependencies": {
"react": "latest",
"react-dom": "latest",
"survey-core": "latest",
"survey-react-ui": "latest",
"survey-creator-core": "latest",
"survey-creator-react": "latest"
},
"devDependencies": {
"react-scripts": "latest"
}
}
```
## Other Frameworks
- [Angular](https://surveyjs.io/survey-creator/examples/create-multilingual-forms/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/create-multilingual-forms/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/create-multilingual-forms/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/create-multilingual-forms/vanillajs.md)