A jQuery plugin for drag and drop form creation
CSS JavaScript HTML
Latest commit 2a946f2 Jan 13, 2017 @ivuorinen ivuorinen committed with Fixed few linting errors (#356)
* fbUtils.parseXML: Check that fields has children

Fixes bug in some IE versions where if children were not defined caused
form not being able to render.

* Fixed few linting errors

fbUtils.fieldRender `src/js/utils.js`
- Unexpected lexical declaration in case block  no-case-declarations
(lines 351, 381)

var kctHandle `js/kc-toggle.js`
- Strings must use singlequote  quotes (line 21)

From `✖ 10 problems (10 errors, 0 warnings)` to `✖ 7 problems (7
errors, 0 warnings)`


formBuilder v1.24.2

Join the chat at https://gitter.im/kevinchappell/formBuilder

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.