A zero dependency JavaScript module for drag and drop form creation.
- Extensible builder with plethora of options
- Simple drag & drop interface
- Column layouts
- Custom fields
- Preview mode
- i18n support
To start building forms with this module include formeo.min.js and formeo.min.css in your project and call:
new Formeo({ container: '.build-form' });
| Option | Type | Value(s) | Default | Description |
|---|---|---|---|---|
| allowEdit | {Bool} | true | false |
false |
When set to false, formData can only be rendered. |
| debug | {Bool} | true | false |
false |
debug mode |
| container | {String|Node} | '.editor-wrap' | '.formeo-wrap' | Define where this instance of Formeo will be added. |
| svgSprite | {String} | 'path/to/svsprite' | null |
loads an svg sprite, leave blank if your sprite is already included in page. |
| style | {String} | 'path/to/stylesheet' | null |
loads a stylesheet to the page |
| sessionStorage | {Bool} | true | false |
null |
loads a stylesheet to the page |
| iconFontFallback | {String} | 'glyphicons' | null |
uses an existing font-icon when svg icon is not available |
| config | {Object} | {...} | {...} | disable, add, reorder and modify row, column and field action buttons |
| Option | Type | Value(s) | Default | Description |
|---|---|---|---|---|
| onAdd | {Function} | Event |
evt => {} | Fires when element is added to another element, returns evt details |
| onSave | {Function} | Event |
evt => {} | Fires on full form save, returns full formData |
| onUpdate | {Function} | Event |
evt => {} | Fires on individual updates, returns updated data |
| confirmClearAll | {Function} | Event |
evt => {} | Fires when form clear button is clicked, returns evt details and clearAllAction() |
unlike events, action usually take place before an event has fired allowing you to modify how an action will complete. For example the default callback for adding an attribute is:
evt => {
let attr = window.prompt(evt.message.attr);
let val;
if (attr) {
val = String(window.prompt(evt.message.value, ''));
evt.addAction(attr, val);
}
}
By replacing the default callback you could use your own modal or prompt dialog and do some additional validation before calling evt.addAction().
| Option | Type | Value(s) | Default | Description |
|---|---|---|---|---|
| add.attr | {Function} | Event |
evt => {} | Fires when adding an attribute to an element, returns evt details and addAction() |
| add.option | {Function} | Event |
evt => {} | Fires when adding nd option to a field, returns evt details and addAction() |
| click.button | {Function} | Event |
evt => {} | Called when clicking a form action button |
| save | {Function} | Event |
evt => {} | Fires on individual updates, returns updated data |
| Option | Type | Value(s) | Default |
|---|---|---|---|
| extension | {String} | '' | '.lang' |
| locale | {String} | 'de-DE' | 'en-US' |
| location | {String} | 'path/to/language/files' | 'assets/lang/' |
| langs | {Array} | array of available locales | ['en-US'] |
| preloaded | {Object} | key/value pairs of strings | {en-US: {...}} |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent