fdb922b Dec 18, 2016
@kevinchappell @srachner @dsergey @gitter-badger
47 lines (39 sloc) 4.14 KB

formBuilder v1.24.2

Join the chat at

A jQuery plugin for drag and drop form creation


To start building forms with this plugin call formBuilder() on the block element you would like to make your editor. FormBuilder takes a number of options and is translatable.


jQuery(document).ready(function($) {
  'use strict';
  var editor = document.getElementById('fb-editor');




Option Type Value(s) Default
controlOrder {Array} ['autocomplete', 'button', 'checkbox', ...]
controlPosition {String} 'left' | 'right' 'right'
dataType {String} json xml
disableFields {Array} array of field types to disable ['autocomplete', 'hidden', 'number']
editOnAdd {Bool} true | false false
append / prepend {Object, Array, String} DOM Object | [] | '<h1></h1>' false
defaultFields {Array} [{type: 'text', name: 'first-name'}] []
fieldRemoveWarn {Bool} true false
formData {String} xmlData jsonData
roles {Object} {1: 'Administrator', 2: 'Editor' } { 1: 'Administrator'}
messages {Object} { addOption: 'Add Option', ... } See form-builder.js#L58
notify {Object} {error: message => alert(message)} See form-builder.js#L186
sortableControls {Bool} sortableControls: true false
stickyControls {Bool} stickyControls: true false
showActionButtons {Bool} showActionButtons: false true
typeUserAttrs {Object} typeUserAttrs config null
typeUserEvents {Object} typeUserEvents config null


Translators Needed!

As formBuilder usage grows so does it's need to be available in multiple languages. This is currently possible by manually passing translations through the config options object but wouldn't it be great if it worked out of the box? See Contributing Languages for details.