jQuery Plugins › jQuery Form Plugins › jQuery Form Builder

jQuery Plugin For Online Drag & Drop Form Builder

File Size:	303 KB
Views Total:	80700
Last Update:	08/23/2025 04:13:00 UTC
Publish Date:	01/13/2015 06:31:32 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Installation:

# Yarn
yarn add formBuilder

# NPM
$ npm install formBuilder

# Bower
$ bower install formBuilder

How to use it:

1. Load jQuery library and the jQuery form builder's stylesheet & JavaScript in your project.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/dist/form-builder.min.js"></script>
<!-- Render form templates created with formBuilder -->
<script src="/path/to/dist/form-render.min.js"></script>

2. Load the necessary jQuery UI to create draggable and droppable form components.

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

3. Create a standard Html textarea for the form builder.

<textarea name="formBuilder" id="formBuilder"></textarea>

4. Call the plugin on the textarea to create a basic form builder.

$('textarea').formBuilder();

5. Available options to create your own form builder.

$('textarea').formBuilder({

  // additional form action buttons- save, data, clear
  actionButtons: [], 

  // enables/disables stage sorting
  allowStageSort: true,

  // append/prepend non-editable content to the form.
  append: false, 
  prepend: false,

  // control order
  controlOrder: [
    'autocomplete',
    'button',
    'checkbox-group',
    'checkbox',
    'date',
    'file',
    'header',
    'hidden',
    'number',
    'paragraph',
    'radio-group',
    'select',
    'text',
    'textarea',
  ],

  // or left
  controlPosition: 'right',

  // or 'xml'
  dataType: 'json',

  // default fields
  defaultFields: [],

  // save, data, clear
  disabledActionButtons: [], 

  // disabled attributes
  disabledAttrs: [],

  // disabled buttons
  disabledFieldButtons: {},

  // disabled subtypes
  disabledSubtypes: {}, 

  // disabled fields
  disableFields: [], 

  // disables html in field labels
  disableHTMLLabels: false, 

  // disables embedded bootstrap classes
  // setting to true will disable all styles
  disableInjectedStyle: "bootstrap",

  // removes the injected style
  disableInjectedStyle: false, 

  // opens the edit panel on added field
  editOnAdd: false, 

  // adds custom control configs
  fields: [], 

  // warns user if before the remove a field from the stage
  fieldRemoveWarn: false,

  // DOM node or selector
  fieldEditContainer: null, 

  // add groups of fields at a time
  inputSets: [], 

  // custom notifications
  notify: {
    error: console.error,
    success: console.log,
    warning: console.warn,
  },

  // prevent clearAll from remove default fields
  persistDefaultFields: false,

  // callbakcs
  onAddField: (fieldData, fieldId) => fieldData,
  onAddOption: () => null,
  onClearAll: () => null,
  onCloseFieldEdit: () => null,
  onOpenFieldEdit: () => null,
  onSave: (evt, formData) => null,
  
  // replaces an existing field by id.
  replaceFields: [],

  // user roles
  roles: {
    1: 'Administrator',
  },

  // smoothly scrolls to a field when its added to the stage
  scrollToFieldOnAdd: true,

  // shows action buttons
  showActionButtons: true,

  // sortable controls
  sortableControls: false,

  // sticky controls
  stickyControls: {
    enable: true,
    offset: {
      top: 5,
      bottom: 'auto',
      right: 'auto',
    },
  },

  // defines new types to be used with field base types such as button and input
  subtypes: {},

  // defines a custom output for new or existing fields.
  templates: {},

  // defines custom attributes for field types
  typeUserAttrs: {},

  // disabled attributes for specific field types
  typeUserDisabledAttrs: {},

  // adds functionality to existing and custom attributes using onclone and onadd events. Events return JavaScript DOM elements.
  typeUserEvents: {},

});

6. API method for the form builder.

// add a new field
var field = {
    type: 'text',
    class: 'form-control',
    label: 'label'
};
formBuilder.actions.addField(field, index);

// clear fields
formBuilder.actions.clearFields();

// close all field editing panels
formBuilder.actions.closeAllFieldEdit();

// remove a specific field by id or leave blank to remove the last field.
formBuilder.actions.removeField(id);

// save the data
formBuilder.actions.save();

// get data as JS
formBuilder.actions.getData();

// get data as XML
formBuilder.actions.getData('xml');

// get data as formatted JSON
formBuilder.actions.getData('json', true);

// set additional data
var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';
formBuilder.actions.setData(formData);

// change the editor language without reloading
formBuilder.actions.setLang(lang);

// show data
formBuilder.actions.showData();

// toggle all panels
formBuilder.actions.toggleAllFieldEdit();

//  toggle the edit mode for fields
formBuilder.actions.toggleFieldEdit(currentFieldId);

7. Render a form from a form template using the formRender method.

<div class="fb-render">
  <textarea id="fb-template"><form-template> <fields> <field name="select-1454177070204" label="Select" style="multiple" description="" required="false" className="form-control" type="select" > <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> </field> <field name="rich-text-1454177067296" label="Text Area" description="" className="form-control" required="false" type="textarea" /> </fields> </form-template></textarea>
</div>

var fbTemplate = document.getElementById('fb-template');
$('.fb-render').formRender({
  dataType: 'xml',
  formData: fbTemplate.value
});

// or 
$('.fb-render').formRender({
  dataType: 'xml',
  formData: '<form-template><fields><field name="text-input-1454163102327" class="form-control" label="Text Field" description="" required="false" type="text" /><field name="date-input-1454163105133" class="form-control" label="Date Field" description="" required="false" type="date" /><field name="checkbox-group-1454163056695" label="Checkbox Group" style="multiple" description="" required="false" type="checkbox-group"><option value="option-1">Option 1</option><option value="option-2">Option 2</option></field></fields></form-template>' };
});

8. Available options for the formRender method.

$('.fb-render').formRender({

  // container for our rendered form
  container: false,

  // form template
  formData: false,

  // 'xml' | 'json'
  dataType: 'json',

  // custom labels
  label: {
    formRendered: 'Form Rendered',
    noFormData: 'No form data.',
    other: 'Other',
    selectColor: 'Select Color'
  },

  // setting render to false prevents formRender from making any changes to the DOM
  render: true,

  // feedbacks
  notify: {
    error: function(message) {
      return console.error(message);
    },
    success: function(message) {
      return console.log(message);
    },
    warning: function(message) {
      return console.warn(message);
    }
  }

});

9. Available methods for the formRender method.

const formRenderInstance = $('#render-container').formRender(formRenderOptions);

// clear all data
formRenderInstance('clear');

// capture user data
formRenderInstance.userData

// grab the rendered form's HTML
$('#render-container').formRender('html');

// render form data
const wrap = $('.render-wrap');
const formRender = wrap.formRender();
wrap.formRender('render', formData);

// set data
const wrap = $('.render-wrap');
const formRender = wrap.formRender();
wrap.formRender('setData', formData);

Changelog:

v3.21.0 (2025-08-23)

Bugfixes

v3.21.0 (2025-08-16)

Bugfixes
typeUserAttrs can be specified directly in the field definition
Sortable options may have other controls like type=color that are missed by the fieldOptionData collection

v3.20.1 (2025-08-14)

Bugfixes

v3.20.0 (2025-06-14)

Bugfixes
Allow custom controls to add one or more Option based attributes

v3.19.15 (2025-05-13)

Bugfixes

v3.19.14 (2025-05-06)

Bugfixes

v3.19.13 (2024-11-15)

Bugfixes

v3.19.11 (2024-07-06)

Bugfixes

v3.19.10 (2024-07-05)

Bugfixes

v3.19.0 (2024-02-09)

allow hierarchically defined controlConfig for type and subtype

v3.18.0 (2024-01-19)

Allow control plugins to disable default attributes via the disableAttr key in the plugin definition

v3.17.3 (2023-12-09)

Bugfixes

v3.17.0 (2023-11-08)

Bugfixes
store the bootstrap row's id to the rowWapper via data-row-id

v3.16.1-v3.16.12 (2023-11-01)

Bugfixes

v3.16.0 (2023-10-19)

Remove unmaintained Find Uploader

v3.15.1 (2023-10-18)

Bugfixes

v3.15.0 (2023-10-15)

Fixed starControl did not save nor load userData
update tests for starRating
Add in additional HTML5 inputs time, datetime-local and range [supported by all major browsers]. For BC reasons time and datetime-local implemented as a subtype of date.

v3.15.0 (2023-10-15)

Support typeUserAttrs and typeUserEvents for all types with a wildcard '*' key

v3.13.2 (2023-10-10)

Bugfixes

v3.13.0 (2023-10-06)

Bugfixes
Extend disableInjectedStyle option to excluded only the embedded Bootstrap 3 classes while allow the formBuilder styles to be included.

v3.10.6 (2023-09-21)

Bugfixes

v3.10.0 (2023-09-16)

Add disableHTMLLabels option to formRender

v3.9.18 (2023-09-13)

Bug Fixes

v3.9.16 (2023-09-12)

Bug Fixes

v3.9.10 (2022-08-28)

Bug Fixes

v3.9.9 (2022-08-20)

Bug Fixes

v3.8.3 (2022-03-25)

Bug Fixes

v3.8.1 (2022-03-19)

Bug Fixes

v3.8.0 (2022-03-17)

enhanced column features

v3.7.4 (2022-03-11)

textarea: remove type attribute from textarea

v3.7.3 (2021-07-14)

bugfix

v3.7.2 (2021-06-08)

fixed: save not returning js formData

v3.7.1 (2021-06-05)

setData working intermittently

v3.7.0 (2021-05-29)

persistDefaultFields option

v3.6.2 (2020-12-08)

Bugfix: radio group option remove button visible on second option

v3.6.1 (2020-08-24)

Supports custom option attributes
Bugfix

v3.5.2 (2020-08-24)

Bugfix: icon name conflict

v3.5.1 (2020-08-23)

Bug Fixes

v3.5.0 (2020-08-23)

added onAddOption event

v3.4.2 (2020-03-05)

clone id bug

v3.4.1 (2020-03-03)

Bugfix: multiple attribute added to select

v3.4.0 (2020-02-02)

Bugfix

v3.3.4 (2020-02-01)

Bugfix

v3.3.1 (2020-01-29)

Fixed: Field removed from stage but not formData

v3.3.0 (2020-01-26)

Bugfixed for demo
Fixed: typeUserAttrs, doesn't render checkbox checked property correctly

v3.2.6 (2020-01-01)

Bugfixed for Adblocker

v3.2.5 (2019-06-27)

Bug Fixes

v3.2.4 (2019-05-27)

Fixed numeric value preservation

v3.2.3 (2019-05-03)

Bugfix

v3.2.2 (2019-04-23)

Updated jQuery dependency.

v3.2.1 (2019-03-30)

Fixed btn: button style classes not correctly applied

v3.1.4 (2019-03-29)

i18n: add support for translatable typeUserAttrs

v3.1.3 (2018-12-13)

Bugfixes

v3.1.2 (2018-11-21)

Fixed xml: fields are nesting

v3.1.1 (2018-11-20)

fix(formRender): error when destrtcuring null

v3.1.0 (2018-11-15)

Add bootstrap grid/column support

v3.0.2 (2018-11-13)

Bugfixes

v3.0.1 (2018-11-08)

Bugfixes

v3.0.0 (2018-11-07)

Bugfixes

v2.10.9 (2018-11-07)

Bugfixes

v2.10.7 (2018-11-06)

Bugfixes

v2.10.3 (2018-11-06)

Bugfix fbControlsLoaded

v2.10.0 (2018-11-03)

Bugfixed
Added more options
Code improvement

v2.9.8 (2017-10-06)

hotfix(inputSets): control icon

v2.9.7 (2017-10-04)

hotfix

v2.9.6 (2017-09-04)

Removed unused style, add get-data class to data button
Improvements(options) disabledFieldButtons option
Pull primary input outside of label for "other" option
Fix Edge "Help Text"
Do not default select radio
Move bootstrap stuff inside .formbuilder selector

v2.9 (2017-08-30)

feature(option) replaceFields

v2.8 (2017-08-27)

improvement(checkbox)
add support for disabling form action buttons (copy, edit, remove)

v2.5.3 (2017-06-07)

Hotfix: paragraph label overflow
fixed autocomplete control behaviour
Fineuploader error handling & reporting

v2.5.1 (2017-05-31)

copy in control config rather than reference it so any alterations arent global. support fineuploader handler having querystring args. fix bug in applying fineuploader config to defaults

v2.5.0 (2017-05-31)

upgraded fineuploader plugin to use cdnjs by default so it no longer

v2.4.1 (2017-05-30)

Hotfix: disableFields option

v2.4.0 (2017-05-29)

New control plugin to replace the default file upload type

v2.3.5 (2017-05-28)

Hotfix: Constraint API

v2.3.4 (2017-05-26)

Hotfix: preload values to exisitng field types, fix fieldOrder
Hotfix: actionButtons are submitting forms
Hotfix: btn-undefined
Hotfix: opts.messages, sourcemaps
General cleanup, actionButtons option
Bug/extend fields

v2.2.7 (2017-05-25)

Make checkbox valid when at least one checkbox is checked

v2.2.6 (2017-05-23)

Fix Other input behavior

v2.2.3 (2017-05-23)

Return unformatted JSON by default

v2.2.2 (2017-05-17)

Hotfix: getData

v2.2.1 (2017-05-17)

Update gulp tag
Update documentation

v2.1.2 (2017-05-11)

Update npm scripts

v2.1.1 (2017-04-21)

Required checkbox fix, form-horizontal css alignment fix

v2.1.0 (2017-04-20)

Critical fixes

v2.0.0 (2017-04-19)

Custom Controls, Automatic i18n, WYSIWYG Editor, HTML Labels

v1.24.7 (2017-04-11)

Fix textarea value not saving when preview changed

v1.24.6 (2017-02-22)

Bugfix: XMLParser children in ie and date form-control class

v1.24.5 (2017-02-16)

Code cleanup, alignment issues, check select required fix
Bug fixes: bower.json, formRender children undefined
Hotfix: typeUserEvents, attribute array converted to comma separated list

v1.24.2 (2016-10-25)

Hotfix: typeUserEvents, attribute array converted to comma separated list

v1.24.1 (2016-10-19)

Bugfix: defaultFields names are overwritten
Hotfix and Feature bonanza

v1.23.1 (2016-10-17)

Feature: inputSets
Hotfix: deleteId undefined

v1.22.1 (2016-10-13)

Bugfix: updateJSON does not set correct version
Feature: Rows Attribute for TextArea

v1.21.3 (2016-10-12)

Feature: addField and removeField actions
Add Build and commit to gulp tag task
Chore: Add gulp tag task
Hotfix: addField index 0 without field

v1.20.3 (2016-10-08)

Bugfix: multi option name attribute

v1.20.2 (2016-10-02)

Bugfix: gulp font-edit

v1.20.1 (2016-09-29)

Bugfix: XML other option

v1.19.4 (2016-09-22)

Feature: tel subtype
Hotfix: Correctly escape attributes
Hotfix: typeUserAttrs duplicate attributes
Feature: Copy button
Bugfix: typeUserAttrs repeated value from formData

v1.18.0 (2016-09-17)

Feature: typeUserAttrs

v1.17.2 (2016-09-15)

Bugfix: Classes not saving in XML mode and option pre-select issues

v1.17.1 (2016-09-12)

Feature: showActionButtons option and showData action
Bugfix: clearFields action will error if no fields on stage

v1.16.0 (2016-09-04)

Feature: JSON support

v1.15.5 (2016-08-22)

Bugfix: Remove fields from disableFields option.

v1.15.5 (2016-08-20)

Feature: save action

v1.15.4 (2016-08-18)

Bugfix: formRender textarea value undefined

v1.15.3 (2016-08-15)

Bugfix: Cannot run formRender on multiple elements

v1.15.2 (2016-08-10)

Feature/Bugfix: Actions, formRender textarea value bugfix

v1.15.0 (2016-07-22)

Feature/Bugfix: Allow multiple files, bigfixes

v1.14.6 (2016-07-22)

Hotfix: set Sortable scroll to false

v1.14.4 (2016-07-19)

Feature: Fast edit options. Click to add field, sticky controls, auto edit toggle
Bugfix: Option defaults not rendering
Feature: Value attribute, improved mobile styling
Bugfix: Form not saving when fields added by click

v1.11.0 (2016-07-13)

Feature: Number input

v1.10.4 (2016-06-23)

Bugfix: IE compatibility issues
Bugfix: Radio group and checkbox group not rendered correctly in IE
Bugfix: Arrows functions don't work with arguments.
Bugfix: IE Element.remove() polyfill
Bugfix: Enter toggles XML field
Bugfix: remove CustomEvent, no IE support
Bugfix: formRender not rendering with containers
Bugfix: formRender reinit, take regular js object
Bugfix: formRender hidden field issue
Bugfix: Add defaultFields to formData
Bugfix: button classes, special character encoding, renamed functions for Selenium
Bugfix: Object.assign
Bugfix: defaultFields multiple select not applied
Feature: disableFields option, formRender jQuery fallback, formSaved Event
Bugfix: Add defaultFields to formData
Bugfix: editing class attribute is wonky
Bugfix: Add pull left and right to _bs.scss
Bugfix: Update internal field id to better handle multiple editors
Bugfix: Standardizes how field variables are processed from xml, defaultfields and new field sources
Bugfix: saved subtypes not rendering
Bugfix: Header subtypes
Bugfix: Remove polyfills causing problems in some apps
Bugfix: Block elements missing classNames
Bugfix: Firefox loses reference to textarea
Bugfix: Change validators to run on blur instead of keyup
Bugfix: field close tab callback fired twice on mobile
Bugfix: Removing an option causes error
Bugfix: Remove role limit
Bugfix: defaultFields multiple select not applied
Feature: Style and data updates, Class attribute
Feature: Header and Paragraph tags
Feature: controlOrder option.
Feature: Add "Other" option to checkbox and radio group fields
Chore: added/updated comments

v1.8.2 (2016-03-09)

Bugfix: Radio group preview

v1.8.1 (2016-03-07)

Feature: File upload element
Feature: Button element

v1.7.10 (2016-03-05)

Feature: Button element

v1.7.10 (2016-02-28)

fix issue with stringify and null values
Add options to formRender: render and notiy
Set form field data to template element to be used by other modules.

v1.7.8 (2016-02-24)

Add fontello fonts with config and Makefile for editing icons.

v1.7.7 (2016-02-24)

Bugfix: Close button doesn't close
Bugfix: max-length attribute should be maxlength
Chore: Add gulp plumber to build process to catch errors instead of fail build.

v1.7.6 (2016-02-22)

Bugfix: radio and checkbox group options without values cause formRender error.
Bugfix: Multiple selection bug for checkbox group and radio group fields.
Chore: Refactor build process, Add linter and code style settings, formRender santized attributes.

v1.7.0 (2016-02-21)

Feature: Multiple selection.
Feature: Mobile support for touch based drag and drop.
Bugfix/Feature: Added placeholder attribute for text and textarea fields.
Bugfix/Feature: Added reinitialization to formBuilder.

v1.6.9 (2016-02-20)

Feature: Added sub-types to the text input for password, color, and email html5 inputs.

v1.6.8 (2016-02-09)

Render Help text and required *

v1.6.7 (2016-02-08)

Bugfix: fields are not sortable

v1.6.6 (2016-02-07)

Bugfix: change should be triggered when hidden textarea updated

v1.6.5 (2016-01-30)

Feature: Make rendered fields targetable

v1.6.4 (2016-01-28)

Bugfix: User options should be deep copied with $.extend

v1.6.3 (2016-01-27)

Bugfix: Remove max-length attribute for hidden fields, Update preview and label for textarea

v1.6.2 (2016-01-26)

Bugfix: Option text not rendered in IE

v1.6.1 (2016-01-24)

Bugfix: required attribute should not be rendered when false.

v1.6.0 (2016-01-08)

Feature: Hidden input field type added

v1.5.4 (2015-12-21)

update gulp to autopush tags

v1.5.3 (2015-11-24)

Bugfix: multiple formBuilder on one page.

v1.5.2 (2015-11-20)

Bugfix: formRender radio-group invalid name property

v1.5.1 (2015-11-19)

Feature: checkbox inputs can now be made into toggle switch.
Add minimal Bootstrap for rendered form styling

v1.4.0 (2015-11-06)

Feature: formRender is a companion plugin to render saved formData into a usable form.

v1.3.5 (2015-10-29)

Fix XML parse and save.

v1.3.4 (2015-10-21)

Fix bug where radio-group has self-closing xml

v1.3.3 (2015-10-16)

Fix Preview/Edit toggle

2015-09-15

Refactor and add Dev Mode, bump version
Minor bug and style fixes

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

jQuery Plugin For Online Drag & Drop Form Builder

Table Of Contents:

Installation:

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review