jQuery Plugin For Online Drag & Drop Form Builder

jQuery Plugin For Online Drag & Drop Form Builder
File Size: 945 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.


typeUserAttrs: {}, //+gimigliano
controlPosition: 'right',
controlOrder: ['autocomplete', 'button', 'checkbox', 'checkbox-group', 'date', 'file', 'header', 'hidden', 'paragraph', 'number', 'radio-group', 'select', 'text', 'textarea'],
dataType: 'xml',
// Array of fields to disable
disableFields: [],
editOnAdd: false,
// Uneditable fields or other content you would like to appear before and after regular fields:
append: false,
prepend: false,
// array of objects with fields values
// ex:
// defaultFields: [{
//   label: 'First Name',
//   name: 'first-name',
//   required: 'true',
//   description: 'Your first name',
//   type: 'text'
// }, {
//   label: 'Phone',
//   name: 'phone',
//   description: 'How can we reach you?',
//   type: 'text'
// }],
defaultFields: [],
fieldRemoveWarn: false,
roles: {
  1: 'Administrator'
messages: {
  addOption: 'Add Option',
  allFieldsRemoved: 'All fields were removed.',
  allowSelect: 'Allow Select',
  allowMultipleFiles: 'Allow users to upload multiple files',
  autocomplete: 'Autocomplete',
  button: 'Button',
  cannotBeEmpty: 'This field cannot be empty',
  checkboxGroup: 'Checkbox Group',
  checkbox: 'Checkbox',
  checkboxes: 'Checkboxes',
  className: 'Class',
  clearAllMessage: 'Are you sure you want to clear all fields?',
  clearAll: 'Clear',
  close: 'Close',
  content: 'Content',
  copy: 'Copy To Clipboard',
  dateField: 'Date Field',
  description: 'Help Text',
  descriptionField: 'Description',
  devMode: 'Developer Mode',
  editNames: 'Edit Names',
  editorTitle: 'Form Elements',
  editXML: 'Edit XML',
  enableOther: 'Enable &quot;Other&quot;',
  enableOtherMsg: 'Let users to enter an unlisted option',
  fieldDeleteWarning: false,
  fieldVars: 'Field Variables',
  fieldNonEditable: 'This field cannot be edited.',
  fieldRemoveWarning: 'Are you sure you want to remove this field?',
  fileUpload: 'File Upload',
  formUpdated: 'Form Updated',
  getStarted: 'Drag a field from the right to this area',
  header: 'Header',
  hide: 'Edit',
  hidden: 'Hidden Input',
  label: 'Label',
  labelEmpty: 'Field Label cannot be empty',
  limitRole: 'Limit access to one or more of the following roles:',
  mandatory: 'Mandatory',
  maxlength: 'Max Length',
  minOptionMessage: 'This field requires a minimum of 2 options',
  multipleFiles: 'Multiple Files',
  name: 'Name',
  no: 'No',
  number: 'Number',
  off: 'Off',
  on: 'On',
  option: 'Option',
  optional: 'optional',
  optionLabelPlaceholder: 'Label',
  optionValuePlaceholder: 'Value',
  optionEmpty: 'Option value required',
  other: 'Other',
  paragraph: 'Paragraph',
  placeholder: 'Placeholder',
  placeholders: {
    value: 'Value',
    label: 'Label',
    text: '',
    textarea: '',
    email: 'Enter you email',
    placeholder: '',
    className: 'space separated classes',
    password: 'Enter your password'
  preview: 'Preview',
  radioGroup: 'Radio Group',
  radio: 'Radio',
  removeMessage: 'Remove Element',
  remove: '&#215;',
  required: 'Required',
  richText: 'Rich Text Editor',
  roles: 'Access',
  save: 'Save',
  selectOptions: 'Options',
  select: 'Select',
  selectColor: 'Select Color',
  selectionsMessage: 'Allow Multiple Selections',
  size: 'Size',
  sizes: {
    xs: 'Extra Small',
    sm: 'Small',
    m: 'Default',
    lg: 'Large'
  style: 'Style',
  styles: {
    btn: {
      'default': 'Default',
      danger: 'Danger',
      info: 'Info',
      primary: 'Primary',
      success: 'Success',
      warning: 'Warning'
  subtype: 'Type',
  subtypes: {
    text: ['text', 'password', 'email', 'color'],
    button: ['button', 'submit'],
    header: ['h1', 'h2', 'h3'],
    paragraph: ['p', 'address', 'blockquote', 'canvas', 'output']
  text: 'Text Field',
  textArea: 'Text Area',
  toggle: 'Toggle',
  warning: 'Warning!',
  value: 'Value',
  viewJSON: '{  }',
  viewXML: '&lt;/&gt;',
  yes: 'Yes'
notify: {
  error: function error(message) {
    return console.error(message);
  success: function success(message) {
    return console.log(message);
  warning: function warning(message) {
    return console.warn(message);
sortableControls: false,
stickyControls: false,
showActionButtons: true,
prefix: 'form-builder-'


Change logs:

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.