jQuery Plugin For Online Drag & Drop Form Builder

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.

Also provides a formRender component which allows you to render a form from a form-template you specify.

Table Of Contents:

• Installation
• Form Builder
• Form Render

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