VanillaJS Form.io

by brendanbond

HTML

<script src="https://unpkg.com/[email protected]/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="page-content">
  <div class="container-fluid">
    <div id="formio"></div>
  </div>
</div>

JavaScript

var formJson = {
  components: [{
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      placeholder: 'Enter your first name.',
      input: true,
      tooltip: 'Enter your <strong>First Name</strong>',
      description: 'Enter your <strong>First Name</strong>'
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true,
      tooltip: 'Enter your <strong>Last Name</strong>',
      description: 'Enter your <strong>Last Name</strong>'
    },
    {
      type: "select",
      label: "Favorite Things",
      key: "favoriteThings",
      placeholder: "These are a few of your favorite things...",
      data: {
        values: [{
            value: "raindropsOnRoses",
            label: "Raindrops on roses"
          },
          {
            value: "whiskersOnKittens",
            label: "Whiskers on Kittens"
          },
          {
            value: "brightCopperKettles",
            label: "Bright Copper Kettles"
          },
          {
            value: "warmWoolenMittens",
            label: "Warm Woolen Mittens"
          }
        ]
      },
      dataSrc: "values",
      template: "<span>{{ item.label }}</span>",
      multiple: true,
      input: true
    },
    {
      label: "<br>",
      action: "custom",
      showValidations: false,
      leftIcon: "fa fa-paperclip fa-rotate-90",
      customClass: "customUploadBtn",
      tableView: false,
      key: "customUploadBtn",
      type: "button",
      custom: "console.log(\"Clicked!\");",
      input: true
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
};

Formio.createForm(document.getElementById('formio'), formJson).then((formInstance) => {
  // this promise has resolved to the already-intialized and rendered form instance
  console.log(formInstance);
});