jQuery Plugin For Online Drag & Drop Form Builder

jQuery Plugin For Online Drag & Drop Form Builder
File Size: 377 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Form Builder is a jQuery plugin that turns a textarea into an online form builder for letting your users quickly build their own web forms via drag and drop.


# Yarn
yarn add formBuilder

$ 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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/formBuilder.js"></script>
<link rel="stylesheet" href="css/formBuilder.css">

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.


5. Available options to create your own form builder.


  // 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: [

  // 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, 

  // 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,

  // callbakcs
  onAddField: (fieldData, fieldId) => fieldData,
  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: {},



v3.1.2 (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


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