Form Renderer

This library includes a robust, plain JavaScript, form rendering engine that is capable of dynamically generating Webforms using a JSON schema. A very simple example of this, is as follows.

<html>
  <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/formio.form.min.css'>
    <script src='https://unpkg.com/[email protected]/dist/formio.form.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        var form = new FormioForm(document.getElementById('formio'));
        form.form = {
          components: [
            {
              type: 'textfield',
              key: 'firstName',
              label: 'First Name',
              placeholder: 'Enter your first name.',
              input: true
            },
            {
              type: 'textfield',
              key: 'lastName',
              label: 'Last Name',
              placeholder: 'Enter your last name',
              input: true
            },
            {
              type: 'button',
              action: 'submit',
              label: 'Submit',
              theme: 'primary'
            }
          ]
        };
      };
    </script>
  </head>
  <body>
    <div id='formio'></div>
  </body>
</html>

You can also use this renderer with Forms generated using Form.io using the src parameter. An example of this is as follows.

<html>
  <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/formio.form.min.css'>
    <script src='https://unpkg.com/[email protected]/dist/formio.form.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        var form = new FormioForm(document.getElementById('formio'));
        form.src = 'https://examples.form.io/example';
      };
    </script>
  </head>
  <body>
    <div id='formio'></div>
  </body>
</html>