Formeo

A zero dependency JavaScript module for drag and drop form creation.

Features

Extensible builder with plethora of options
Simple drag & drop interface
Column layouts
Custom fields
Preview mode
i18n support

Usage

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' });

Options

General

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

Events

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()`

Actions

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

i18N

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: {...}}

gr0g/formeo