@open-formulieren/formiojs
Advanced tools
Common js library for client side interaction with <form.io>
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.
If you like what you see, and would like to come and work for a cutting edge, Open Source core company, then please apply online @ https://form-talent.freshteam.com/jobs!
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 formiojs
This library has a very powerful JSON form builder, and can be used like the following.
<html>
<head>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
<script src='https://cdn.form.io/formiojs/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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
<script src='https://cdn.form.io/formiojs/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/
This library can also be used to render a form wizard within your application using the same method as rendering a form.
The determiniation on whether it should render as a wizard or not is based on the display property of the form schema
being set to wizard.
<html>
<head>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
<script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/wizard');
};
</script>
</head>
<body>
<div id='formio'></div>
</body>
</html>
You can also use this library as a JavaScript embedding of the form using a single line of code. For example, to embed the https://examples.form.io/example form within your application you can simply use the following embed code.
<script src="https://cdn.form.io/formiojs/formio.embed.min.js?src=https://examples.form.io/example"></script>
For an example of how this looks and works, check out the following Form.io Form Embedding CodePen
For a more complete documentation of how to utilize this library within your application go to the Form Renderer documentation within the Wiki
In addition to having a Form Renderer within this application, you can also use this library as a JavaScript SDK in your application. For example, to load a Form, and then submit that form you could do the following within your JavaScript.
<html>
<head>
<script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
<script type='text/javascript'>
var formio = new Formio('https://examples.form.io/example');
formio.loadForm().then(function(form) {
// Log the form schema.
console.log(form);
formio.saveSubmission({data: {
firstName: 'Joe',
lastName: 'Smith',
email: 'joe@example.com'
}}).then(function(submission) {
// Log the full submission object.
console.log(submission);
});
});
</script>
</head>
</html>
You can also use this within an ES6 application as follows.
import Formio from 'formiojs';
let formio = new Formio('https://examples.form.io/example');
formio.loadForm((form) => {
console.log(form);
formio.saveSubmission({data: {
firstName: 'Joe',
lastName: 'Smith',
email: 'joe@example.com'
}}).then((submission) => {
console.log(submission);
});
});
For more complete documentation over the JavaScript SDK, please take a look at the JavaScript SDK within the wiki.
To view the full SDK Documentation, go to Developer SDK Documentation
FAQs
Common js library for client side interaction with <form.io>
The npm package @open-formulieren/formiojs receives a total of 87 weekly downloads. As such, @open-formulieren/formiojs popularity was classified as not popular.
We found that @open-formulieren/formiojs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.