formBuilder v2.9.8
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();
});
Demo
Options
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': {...}} |
Angular 2/4 Version
Changelog
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent