Form.io Translations

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdn.form.io/js/formio.embed.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-primary" onclick="setLanguage('es')">Español</button>
  <button type="button" class="btn btn-secondary" onclick="setLanguage('en')">English</button>
  <button type="button" class="btn btn-info" onclick="setLanguage('zh')">中文</button>
  <button type="button" class="btn btn-success" onclick="setLanguage('ar')">العربية</button>
</div>

<div id="formio"></div>

CSS

body[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

JavaScript

Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      tooltip: "Name",
      placeholder: 'Enter your first name',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true
    },
    {
      label: 'When did you start using the Form.io platform?',
      tableView: false,
      datePicker: {
        disableWeekends: false,
        disableWeekdays: false,
      },
      enableMinDateInput: false,
      enableMaxDateInput: false,
      validateWhenHidden: false,
      placeholder: 'Enter the date',
      key: 'startDate',
      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: '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' }
      ]
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
}, {
  language: 'en',
  i18n:...