jQuery Plugin For Online Drag & Drop Form Builder

File Size: 364 KB
Views Total: 77797
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

# 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.1/2/3/4/5/6/7 (2024-03-13)

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