JSON Based Form Builder with jQuery and Bootstrap - FormForm

File Size: 59.2 KB
Views Total: 18929
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
JSON Based Form Builder with jQuery and Bootstrap - FormForm

FormForm is a jQuery based form generation plugin that allows to dynamically generate a Bootstrap form from JSON data.

How to use it:

1. Include the necessary jQuery library and Underscore.js on the Bootstrap web project.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/underscore-min.js"></script>

2. Include the bootstrap-formform.js plugin after jQuery library.

<script src="src/bootstrap-formform.js"></script>

3. Prepare your form data in the JSON following the data structure like this:

var fields, form;

fields = [
  {
      name: 'username',
      label: 'Username',
      type: 'text'
  }, {
      name: 'password',
      label: 'Password',
      type: 'password'
  }, {
      label: 'Submit',
      type: 'submit',
      class: 'btn-danger',
      icon: 'ok'
  }
];

4. The JavaScript to render a Bootstrap form on the webpage.

form = FormForm( $('form'), fields );
form.render();

Change log:

2016-10-14

  • Add export
  • update dependecies

This awesome jQuery plugin is developed by cbergmiller. For more Advanced Usages, please check the demo page or visit the official website.