Form.io Translations

by brendanbond

HTML

<script src="https://cdn.form.io/formiojs/formio.form.min.js"></script>
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="btn-group" style="width:100%">
  <button type="button" class="btn btn-success btn-group-item" onclick="setLanguage('sp')">Español</button>
  <button type="button" class="btn btn-primary btn-group-item" onclick="setLanguage('en')">English</button>
  <button type="button" class="btn btn-secondary btn-group-item" onclick="setLanguage('ch')">中文</button>
</div>
<div id="formio"></div>

JavaScript

Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'FOOBAR',
      placeholder: 'Enter your first name',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true
    },
    {
      type: 'survey',
      key: 'questions',
      label: 'Survey',
      values: [
        {
          label: 'Great',
          value: 'great'
        },
        {
          label: 'Good',
          value: 'good'
        },
        {
          label: 'Poor',
          value: 'poor'
        }
      ],
      questions: [
        {
          label: 'How would you rate the Form.io platform?',
          value: 'howWouldYouRateTheFormIoPlatform'
        },
        {
          label: 'How was Customer Support?',
          value: 'howWasCustomerSupport'
        },
        {
          label: 'Overall Experience?',
          value: 'overallExperience'
        }
      ]
    },
    {
      "label": "My Date",
      "tableView": false,
      "datePicker": {
        "disableWeekends": false,
        "disableWeekdays": false
      },
      "enableMinDateInput": false,
      "enableMaxDateInput": false,
      "key": "myDate",
      "type": "datetime",
      "input": true,
      "widget": {
        "type": "calendar",
        "displayInTimezone": "viewer",
        "locale": "en",
        "useLocaleSettings": false,
        "allowInput": true,
        "mode": "single",
        "enableTime": true,
        "noCalendar": false,
        "format": "yyyy-MM-dd hh:mm a",
        "hourIncrement": 1,
        "minuteIncrement": 1,
        "time_24hr": false,
        "minDate": null,
        "disableWeekends": false,
        "disableWeekdays": false,
        "maxDate": null
      }
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
}, {
  language: 'sp',
 ...