JSON To Form Generator For Bootstrap - jQuery Form.js
File Size: | 10.9 KB |
---|---|
Views Total: | 2697 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple responsive HTML form generator built with jQuery, Bootstrap, handlebars, and JSON Schema.
The goal of this plugin is to dynamically render a complex, sectioned (step-by-step) form with next/prev buttons and smooth transitions.
How to use it:
1. Load the core JavaScript form.js (jQuery & Bootstrap framework are included) in the document.
<script src="./forms.js"></script>
2. Load the required handlebars.js library to build semantic templates for the form.
<script src="/path/to/cdn/handlebars.min.js"></script>
3. Define & group your form data in the JSON objects as follows. Supported form fields:
- Text
- Number
- Date
- Password
- Radio Button
- Checkbox
- Textarea
- Select
var details = { "configuration": { 'form-width': '8', 'd-left': '3', }, "Form-Group-1": { 1: { 'tagName': 'input', 'label': 'First Name', 'labelPosition': 'left', 'tooltip' : "Type your full name", 'attributes': { 'type': 'text', 'placeholder': 'First Name', 'class': 'form-group form-control', 'id': 'name' }, }, 2: { 'tagName': 'input', 'label': 'Password', 'labelPosition': 'left', 'tooltip' : `password must contain more than 8 characters including symbols like @,#,* etc including numbers 1,2,3,4 etc and alphabets a,b,c,d,A,B,D etc. `, 'attributes': { 'type': 'password', 'placeholder': 'Password', 'class': 'form-group form-control', }, }, 3: { 'tagName': 'input', 'label': 'Date of Birth', 'labelPosition': 'left', 'tooltip' : 'type date of birth in DD/MM/YY', 'attributes': { 'type': 'date', 'placeholder': 'Date Of Birth', 'class': 'form-group form-control', } }, 4: { 'tagName': 'input', 'label': 'Email', 'labelPosition': 'left', 'attributes': { 'type': 'email', 'placeholder': '[email protected]', 'class': 'form-group form-control', } }, 5: { 'tagName': 'textarea', 'label': 'Address', 'labelPosition': 'left', 'attributes': { 'placeholder': 'Address', 'class': 'form-group form-control', 'rows': 6, }, }, 6: { 'tagName': 'input', 'label': 'Language of Choice', 'labelPosition': "left", 'name': 'lang', 'attributes': { 'type': 'radio', 'class': 'form-check-input', 'options': { "c" : "C", 'cpp': 'C++', 'rst': 'Rust', 'java' : "Java", "js" : "JavaScript", "py" : "Python", "ju" : "Julia", "ex" : "Elixr" } } }, 7: { 'tagName': 'input', 'label': 'Checkbox', 'labelPosition': "left", 'attributes': { 'type': 'checkbox', 'class': 'form-check-inline', } }, }, "Form-Group-2": { // form data here } }
4. Render an HTML form on the page.
document.addEventListener('DOMContentLoaded', () => { formTagID = 'form-1' preSetup() readObject(details, formTagID) })
This awesome jQuery plugin is developed by ayaankhan98. For more Advanced Usages, please check the demo page or visit the official website.