Skip to content

Latest commit

 

History

History
64 lines (59 loc) · 4.2 KB

index.md

File metadata and controls

64 lines (59 loc) · 4.2 KB
Raw
title layout section
Home
default
home

JavaScript Powered Forms by <style>.cls-1{fill:#373a36;}.cls-2{fill:#69b342;}</style>

This library is a plain JavaScript form renderer and SDK for Form.io. This allows you to render the JSON schema forms produced by Form.io and render those within your application using plain JavaScript, as well as provides an interface SDK to communicate to the Form.io API's. The benefits of this library include.

  • Plain JavaScript implementation using ES6 and Modern practices (no jQuery, Angular, React, or any other framework dependency)
  • Renders a JSON schema as a webform and hooks up that form to the Form.io API's
  • Nested components, layouts, Date/Time, Select, Input Masks, and many more included features
  • Full JavaScript API SDK library on top of Form.io

Simple Example

<html>
  <head>
    <meta charset="utf-8">
    <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>
  </head>
  <body>
    <div id="formio"></div>
    <script type="text/javascript">
      Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
    </script>
  </body>
</html>

Application Import

Or you can import this within your own application as follows.

npm install --save @formio/js

import { Formio } from '@formio/js';
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');

Result

<script type="text/javascript"> window.onload = function() { Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example'); }; </script>

JSFiddle

To play around with this renderer, we recommend using JSFiddle. Here is an example you can fork and use as a sandbox.

<script async src="//jsfiddle.net/travistidwell/z63jvwkp/embed/"></script>