How to translate your web forms' interface so that anyone can understand them

This article is a supplement to the product documentation on this subject.

SurveyCTO form designs are flexible, allowing you to translate the questions (or "labels") you want answered into different languages. If you add translations to a form design, users can select the language they are most comfortable with. However, understanding a form also has to do with understanding the interface (e.g. the Next button to load the next screen). SurveyCTO offers you the ability to provide a language-localized web form navigation experience for your users, so the web form interface is available in the language enumerators and respondents are most comfortable with. Language localization allows you to minimize comprehension issues, which smooths out the data collection process, helping you to collect higher quality data.

In this article you will learn about:

  1. Automatic web form language selection.
  2. Using the form's default language.
  3. Custom web form interface translations.
  4. Settings, exceptions, and fallbacks.

Note: before you can collect any data, an administrator on your SurveyCTO server must visit the Collect tab of your server console, and enable Web data collection using the ON/OFF toggle button.

The SurveyCTO Collect app for mobile data collection also localizes the interface, depending on the language set in the device's operating system. Web form localizations will not affect SurveyCTO Collect.

Automatic web form language selection

If you do nothing to customize web form behavior, by default, when a web form link opens for a user, their browser language is automatically detected. If the browser language is English, French, Hindi, or Spanish (the languages provided by the platform), all the buttons in the interface will appear in that language. If you happen to have provided a translation of your questions in that language, those language labels will also load by default.

To test and confirm web form localization, set up a browser with your target survey language. For example, in Chrome, open Settings, and locate the Language settings (either search for the setting, or look under Advanced settings). If the target language is not present, add it and move it to the top of the Order [of] languages based on your preference list. Then, when you open a multilingual web form link, it will try to load the interface and form design translation of that name.

Web form progress and the interface language used are saved in cookies. If you had previously opened a translated form as a web form and had not submitted data, it might open again with the form language and interface language that had been previously used. Emptying cookies for in your browser is a useful troubleshooting step if the default web browser language does not load at first.

See this video for the basics:

In the above video, the basic language sample form is deployed, and then the web form is opened in a web browser with Spanish set as the preferred language.

Using the form's default language

The fact that language labels (the question text in your form design) and the interface language automatically adapts is an improvement that most users will benefit from most of the time. However, you can override this default behavior on a form-by-form basis. On the Collect tab, click on Settings for a form, and uncheck the Auto-detect browser language option. That way, the default language in the form design will load for everyone at first, ignoring the preferred language in the browser's settings. In multilingual forms, users can still pick another language if the form design's default is unsuitable.

web_form_settings.pngIn the screenshot above, see the Auto-detect browser language option in this form's settings on the Collect tab.

Custom web form interface languages

If you're deploying a web survey in English, French, Hindi, or Spanish, we've already got you covered. If you want the web form interface to appear in another language, you can translate it yourself. Users can also share interface translations. 

In the above video, you'll see how to install a user-generated web form interface translation, and how to generate your own. Read on below for more details.

User generated translations

Before you start translating the web form interface yourself, check the list of translations which have generously been provided by other SurveyCTO users. View these translations in the table on this GitHub page

  1. Click on the language name in the first column
  2. The page will display raw CSV data.
  3. Save the page in your browser (CTRL + S or CMD + S).
  4. Choose your file location and click Save.

These files are CSV files. If you would like to customize these files, you'll need to edit them. See our guide to working with CSV files for help.

Share your custom web form interface translations with other SurveyCTO users! If you have translated web forms into a language that is not listed in GitHub, or if you can see a way to improve one of these translations, write to

Generating your own translations

To create your own translation of the web interface, follow these steps:

  1. On the Configure tab of the server console, go to the Server settings.
  2. Click on Languages for more options. Everything to do with web form interface translations is managed from there.
  3. Under Web forms user interface languages, click on Download translation table template
  4. Pick the reference language which you'll translate from, and confirm your download. 
  5. You'll export a CSV file, which we recommend importing into Excel or Google Sheets to edit (see the guide to working with CSV files linked above).

The translator's job will be to complete the "Translation" column, which will be a translation of the "Reference language" column. Use the "Context" column to better understand the need for each. However you translate the interface, you will need a CSV file as the end result, so if you use Excel or Google Sheets, make sure you export or save the file in CSV format.

You may choose to be strategic about what you do and don't translate if time is short, focussing on the most frequently occuring interface labels, based on your experience. Missing labels will be filled using the Missing string default (discussed below).

Installing a custom translation

Once you've carefully checked your translation and have it in CSV format, you'll need to install it. As above, on the Configure tab, click on Languages for more options. Under Web forms user interface languages, click on +Add new language. In the window that opens, specify the following options.

  • Translation table: Upload your translation template in CSV format. It must contain the "Term" and "Translation" columns. The file will be validated, so read any feedback carefully and review your translation. You'll be able to visually check the translation before accepting it.
  • Language name: An internal name for the language for server console users.
  • Language label: A user-facing name for the language. This name appears in the dropdown language selection menu in the web form interface.
  • Icon (optional): Upload a language/region flag or symbol to visually represent the language in the dropdown language selection menu.
  • Mapped form languages: Pick the language(s) specified in form designs which will use this interface translation. Use the option to scan your forms to return a list of languages used across  all of your forms.
  • Mapped browser languages: Pick the browser language(s) that will be matched with this interface translation. This should ideally match the language(s) specified under Mapped form languages.

Settings, exceptions and fallbacks

Web form localization should be seamless so long as your form designs have translations which match an interface language. To help deal with edge cases and human error, a series of fallbacks come into play. Keep the following settings in mind, in case you see something you don't expect.

These settings can be found on the Configure tab on the server console. Look under Server settings, and pick Languages to reveal more.

Unknown mapping

If auto-detection of your browser's default language shows that no matching interface language is available, then this default language will be displayed. For example, let's say that you're testing a form in Zulu, but you've not yet prepared a Zulu web form interface. If English were the default unknown mapping language, the questions in the form would appear in Zulu, but the buttons for navigation and other controls would be in English.

Missing strings

If the translation you have created is incomplete, something must be shown in its place. Like with unknown mappings, the default that will be English, unless you set another language as the default.

Do you have thoughts on this support article? We'd love to hear them! Feel free to fill out this feedback form.



Please sign in to leave a comment.