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

formBuilder v1.24.2

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

A jQuery plugin for drag and drop form creation

Usage

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.

Example

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

Demo

form-builder

Options

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

Changelog

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.