/formBuilder

A jQuery plugin for drag and drop form creation

Primary LanguageJavaScriptMIT LicenseMIT

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.

Example

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

form-builder

General

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

i18n

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': {...}}

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.