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
- Complete Form Builder which creates the JSON schema used to render the forms.
- Nested components, layouts, Date/Time, Select, Input Masks, and many more included features
- Full JavaScript API SDK library on top of Form.io
To find out more about this library as well as see a demonstration of what you can do with this library, go to the Examples and Demo site @ https://formio.github.io/formio.js
To install this SDK into your project, you can use the following command within your terminal.
npm install --save formiojsThis library has a very powerful JSON form builder, and can be used like the following.
<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/formiojs@latest/dist/formio.full.min.css'>
<script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
Formio.builder(document.getElementById('builder'));
};
</script>
</head>
<body>
<div id='builder'></div>
</body>
</html>This will create a robust Form builder embedded right within your own application. See Our Demo Page for an example.
The following is a simple example on how to render a form within your HTML application.
<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/formiojs@latest/dist/formio.full.min.css'>
<script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>This will render the following form within your application.
You can also render JSON directly instead of referencing the embed URL from Form.io.
Formio.createForm(document.getElementById('formio'), {
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'
}
]
});This will render the JSON schema of the form within your application.
A great way to play around with this renderer is to use JSFiddle, which serves as a good sandbox environment. Here is an example that you can fork and make your own!
http://jsfiddle.net/travistidwell/v38du9y1/