A jQuery plugin for drag and drop form creation, formBuilder has many options and is translatable.
8000To start building forms with this plugin call formBuilder() on the block element you would like to make your editor.
Example
jQuery(function($) {
var editor = document.getElementById('fb-editor');
$(editor).formBuilder();
});
| Option | Type | Value(s) | Default |
|---|---|---|---|
| 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'}] |
[] |
| disabledActionButtons | {Array} | array of form action buttons to disable | [] |
| disableFields | {Array} | array of field types to disable | ['autocomplete', 'hidden', 'number'] |
| 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 |
| 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': {...}} |
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.