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.
Example
jQuery(document).ready(function($) {
'use strict';
var editor = document.getElementById('fb-editor');
$(editor).formBuilder();
});
| Option | Type | Value(s) | Default |
|---|---|---|---|
| controlOrder | {Array} | ['autocomplete', 'button', 'checkbox', ...] |
|
| controlPosition | {String} | 'left' | 'right' |
'right' |
| dataType | {String} | xml |
json |
| 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 |
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.