VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-content">
  <div class="container-fluid">
    <div id="formio"></div>
  </div>
</div>

JavaScript

Formio.createForm(
  document.getElementById("formio"),
  {
    components: [
      {
        type: "textfield",
        key: "firstName",
        label: "<strong>First Name</strong>",
        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: "HTML",
        attrs: [
          {
            attr: "",
            value: "",
          },
        ],
        content: "Formio",
        refreshOnChange: false,
        key: "html",
        type: "htmlelement",
        input: false,
        tableView: false,
      },
      {
        html: "<p>Formio</p>",
        label: "Content",
        refreshOnChange: false,
        key: "content",
        type: "content",
        input: false,
        tableView: false,
      },
      {
        type: "button",
        action: "submit",
        label: "Submit",
        theme: "primary",
      },
    ],
  },
  {
    language: "sp",
    i18n: {
      sp: {
        "<strong>First Name</strong>": "Nombre de pila",
        "Last Name": "Apellido",
        "Enter your first name": "Ponga su...