A jQuery plugin for drag and drop form creation


formBuilder v2.9.8

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

A jQuery plugin for drag and drop form creation, formBuilder has many options and is translatable.


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





Option Type Value(s) Default
actionButtons {Array} [{...}] []
append / prepend {Object, Array, String} DOM Object | [] | '<h1></h1>' false
controlOrder {Array} ['autocomplete', 'button', 'checkbox', ...]
controlPosition {String} 'left' | 'right' 'right'
dataType {String} json | xml json
defaultFields {Array} [{type: 'text', name: 'first-name'}] []
disabledAttrs {Array} array of attributes to disable for all fields []
disabledActionButtons {Array} array of form action buttons to disable []
disableFields {Array} array of field types to disable ['autocomplete', 'hidden', 'number']
disableInjectedStyle {Bool} true | false false
editOnAdd {Bool} true | false false
fieldRemoveWarn {Bool} true false
fields {Array} array of additional field definitions []
formData {String} xmlData jsonData
inputSets {Array} array of field definitions []
notify {Object} {error: message => alert(message)} See config.js#L47
onSave {Function} (evt, formData) => {} See config.js#L52
onClearAll {Function} () => {} See config.js#L53
roles {Object} {'admin': 'Administrator', 'editor': 'Editor' } { 1: 'Administrator'}
showActionButtons {Bool} showActionButtons: false true
sortableControls {Bool} sortableControls: true false
stickyControls {Object} stickyControls: {enable:true, offset: { top: 5, bottom: 'auto', right: 'auto' }} stickyControls: {enable:true}
templates {Object} Additional field templates {}
typeUserAttrs {Object} typeUserAttrs config null
typeUserDisabledAttrs {Object} typeUserDisabledAttrs config null
typeUserEvents {Object} typeUserEvents config null


Option Type Value(s) Default
locale {String} user's locale eg. 'pt-BR' 'en-US'
location {String} url of language directory 'https://formbuilder.online/assets/lang/'
extension {String} '.ext' '.lang'
preloaded {Object} {} {'en-US': {...}}

Angular 2/4 Version


Translators Needed!

As formBuilder usage grows so does it's need to be available in multiple languages. Additions and updates to existing languages are always welcome, see Contributing Languages for details.