Drag & Drop Form Builder
JavaScript CSS Shell
Clone or download
Hawkeye1909 and kevinchappell Update de-DE.lang (#90)
* Update de-DE.lang

* Update de-DE.lang

- changes to umlauts in Strings not used in HTML
- added missing fields that were not listed in English file
- removed "reset" as it is used for button type
Latest commit 3a364b5 Apr 30, 2018

README.md

Formeo v0.7.17

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

Demo

formeo

Changelog