JSON To Form Generator For Bootstrap - jQuery Form.js

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
• Email
• 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.