kevinchappell / formBuilder

A jQuery plugin for drag and drop form creation
https://formbuilder.online
MIT License
2.6k stars 1.38k forks source link

LT Request: howto translate forms to langs (similar to the language files for formbuilder?) #335

Open dukechem opened 7 years ago

dukechem commented 7 years ago

LT (Long Term) request: HowTo translate forms to different languages.

It's very cool that formbuilder itself is now available in so many different languages per: http://formbuilder.readthedocs.io/en/latest/formBuilder/demos/translation/ https://github.com/kevinchappell/formBuilder/tree/languages

Suppose I create a form in english, then recreate the exact same form, only this time in spanish.

  1. Is there a way to decide which form to display based on users locale?
  2. if translators wanted to create the same form in additional languages, what could be done to make this easier for them? (Something similar to your languages support with en-US, es-ES, fr-FR files?
kevinchappell commented 7 years ago

Labels and other text data are saved as strings in the formData. I've been doing a lot of work i18n for future release and think there are a couple options we could go with.

  1. it should be possible to save formData templates where the label keys would be saved instead of their value. We can then load this through a specific API and the labels should appear in whatever language is currently selected.
  2. in the coming version there is an API for changing the language of an editor without reloading it. There could be an extra step (in the plugin) that compares labels in the formData with their default language value and if it is the same (meaning it was not customized) the label will be updated to the default value for the newly selected language.

From a usage perspective option 2 is much easier and would require only editing the language files.

dukechem commented 7 years ago

Since "option 2 is much easier", certainly let's try that first! ;-) Let me know when/where beta branche is available and I'll be happy to try it out.

Xsmael commented 5 years ago

any news ?

numeropi commented 7 months ago

Description: The current version of FormBuilder lacks internalization (i18n) support for text-related attributes such as "label," "placeholder," "Help Text", and Options This feature request proposes the implementation of i18n capabilities for these fields to enhance the internationalization and localization aspects of the software.

Motivation: As applications built with FormBuilder are used in diverse linguistic environments, it becomes imperative to provide a seamless user experience by allowing the translation of text elements. Enabling i18n for labels, placeholders etc will empower developers to create more inclusive and globally accessible forms.

Benefits: Improved user experience for multi-language context. Facilitates the creation of multilingual forms. Avoids the dupliclity of forms per language. Aligns FormBuilder with internationalization best practices.

Proposed Changes: Integrate i18n support for the following text fields:

Label
Placeholder
Texthint
Checkbox and Select Options

Example Usage:

Current Forbuilder json example:

[
  {
    "type": "text",
    "required": false,
    "label": "Text Field",
    "description": "Help Text",
    "placeholder": "Placeholder",
    "className": "form-control",
    "name": "text-1704816173046-0",
    "access": false,
    "subtype": "text"
  },
  {
    "type": "select",
    "required": false,
    "label": "Select",
    "className": "form-control",
    "name": "select-1704815950353-0",
    "access": false,
    "multiple": false,
    "values": [
      {
        "label": "Option 1",
        "value": "option-1",
        "selected": true
      },

Possible i18n alternatives:

[
  {
    "type": "text",
    ...other...
    "label": "Name",
    "description": "Enter your name",
    "placeholder": "Write here your name",
    "label-en": "Name",
    "description-en": "Enter your name",
    "placeholder-en": "Write here your name",
    "label-es": "Nombre",
    "description-es": "Introduce tu nombre",
    "placeholder-es": "Escribe tu nombre aquí",
   ... etc
   }
]

or

[
  {
    "type": "text",
    ...other...
    "label": "Name",
    "description": "Enter your name",
    "placeholder": "Write here your name",
    "i18n": {
          "es": { "label": "Nombre",
                    "description": "Introduce tu nombre",
                    "placeholder": "Escribe tu nombre aquí"}
          "fr": ....
     }
   ... etc
   }
]

Implementation Guidelines:

Ensure backward compatibility for existing projects.
Provide clear documentation on implementing and managing translations.

Expected Outcome: Users should be able to easily translate and adapt text elements within FormBuilder, promoting a more inclusive and globally accessible form-building experience.

During the rendering a Language selectbox could be displayed on top of the rendered form to allow switching the texts' language. By default could be selected the browsers language or the rendering could be called with a language parameter or attribute. imagen

During the formbuilder part, a selectbox of the available languages could appear in the left or right handside of the text input field for Label/Placeholder/Description/Option fields so that easily the field translations can be introduced.

imagen

Additional Information: Feel free to engage in discussions and provide feedback on this proposed enhancement.