I'm trying to design a web form supporting internationalization (i18n). The form will be part of a large event management software. Users login, create events (like conferences, roadshows, and so forth). Several text input fields must support i18n in order to present the event in different languages. For instance the event title may be presented in English, French, German, etc, as well as the agenda, the summary, etc. There will be a primary or default language (depending on the client's location) and two or (many) more additional languages to choose from.

I can think of two strategies or scenarios that might work:

  1. The client opens the form and finds the preselected default language. Let's assume she decides to go from french to german. Instantly this could trigger a form reload. From then on any text that she might enter is bound to the corresponding, that is the selected locale. If she selects another language this again triggers a form reload (all text fields are emptied). The idea is to edit the complete form for each selected language at a time.

  2. This approach "enhances" each i18n text input form field (by using JS/jQuery). Again the client opens the form and selects one or more languages (using checkboxes). This will automatically add additional input text fields below the input field that represents the primary language. Now the clients enters some content into each form field. If the client unchecks "French" all corresponding form fields are removed. There's no form reload, just adding and removing additional text input form fields (jQuery magic:)

Is there a better way to reduce the complexity and lead to a better user experience when entering i18n forms?

  • 1
    Why do different languages have different input fields? Also, what if a user want to enter a specific input in a language other than the one they selected to see the site in? Commented Jul 3, 2012 at 22:27
  • This is the exact same problem as "How should I implement Language selection in a CMS?"
    – dnbrv
    Commented Jul 4, 2012 at 4:41
  • @Danny As I said those were two simple ideads I came up with. And of course there's nothing I can do. If the user enters kyrillic while marking the content as French, French customers will see kyrillic.
    – simou
    Commented Jul 4, 2012 at 6:44
  • So this is a content entry form? Commented Jul 4, 2012 at 8:49
  • Yes, the form contains some texteditors (ckeditor) as well as basic text input form fields. There's also a second form which has a table for entering new tickets and another one that allows the user to define custom registration form fields. I was hoping for a generic solution. I could implement a normal textinput field but with some additional i18n features (as a custom jsp tag). Then I'd be able to use the same tag in different contexts.
    – simou
    Commented Jul 4, 2012 at 23:03

2 Answers 2


The issue I have with the second approach is that it adds a number of additional fields (if I understand your question correctly it literally doubles the number of fields). This can cause some issues to the user as he has to carefully pick and choose which field he is entering the data in. Also if he is not careful he might enter the data for the agenda field in the event title field like this


download bmml source – Wireframes created with Balsamiq Mockups

Another interesting issue I noticed (while playing with google translate) is that languages use the same word to denote something, for example the word for Agenda in dutch is the same as that of English i.e. Agenda. Hence seeing two agenda's on the form might confuse the user (assuming he has selected the Dutch as the language of translation from English).

I would recommend going with approach one but if possible, on selecting a new language,if the user has already entered existing content,ensure the entered content is already entered into the form on form reload. If that is not possible due to the difficulty in determining when to save the data, you can go with an approach where the user has to select the language first and then only he shown the form fields. This will ensure he is presented with his language of choice of upfront.So it would look something like this:


download bmml source

If you plan to go with this approach I would recommend setting the default value in the dropdown equal to the value determined by the person's locale

  • Appreciate your approach. I came up with the following solution: img1.UploadScreenshot.com/images/thumb/9/25507584965.png To avoid the ambiguities you mentioned every text input field has its own fieldset surrounding it. For instance one fieldset says "Event title" and may contain one or more text input fields one for each language only for editing the event's title. The next fieldset says "Event description" and contains one ore more TinyMCE Editors again one for each language. At the top of the page the user chooses the languages she likes.
    – simou
    Commented Sep 12, 2012 at 21:42

Use a user preferences page, where there's a choice of language. Use PHP and MySQL to store the preference. The rest is even easier. For example " If (Lang=="de") { Include (de.inc); } Else { Include (en.inc); }"

  • Yes that'll do the trick. I'd have to figure out though how to deal with those form fields living within (css-)tables. Asssume the customer adds a new row to the ticket&fees table. Each row stands for one ticket/fee. The ticket's name and descriptions must be i18n'd. How would your proposition fit into this scenario?
    – simou
    Commented Jul 4, 2012 at 23:22
  • ... it wouldn't depend on javascript. Anyway I'll discuss your idea with my room mate..
    – simou
    Commented Jul 4, 2012 at 23:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.