formbuilder's Introduction

formBuilder v1.19.3

A jQuery plugin for drag and drop form creation

Usage

To start building forms with this plugin call formBuilder() on the block element you would like to make your editor. FormBuilder takes a number of options and is translatable.

Example

jQuery(document).ready(function($) {
  'use strict';
  var editor = document.getElementById('fb-editor');
  $(editor).formBuilder();
});

Options

Option	Type	Value(s)	Default
controlOrder	{Array}	`['autocomplete', 'button', 'checkbox', ...]`
controlPosition	{String}	`'left'` \| `'right'`	`'right'`
dataType	{String}	`xml`	`json`
disableFields	{Array}	array of field types to disable	`['autocomplete', 'hidden', 'number']`
editOnAdd	{Bool}	`true` \| `false`	`false`
append / prepend	{Object, Array, String}	`DOM Object` \| `[]` \| `'<h1></h1>'`	`false`
defaultFields	{Array}	`[{type: 'text', name: 'first-name'}]`	`[]`
fieldRemoveWarn	{Bool}	`true`	`false`
formData	{String}	`xmlData`	`jsonData`
roles	{Object}	`{1: 'Administrator', 2: 'Editor' }`	`{ 1: 'Administrator'}`
messages	{Object}	`{ addOption: 'Add Option', ... }`	See form-builder.js#L58
notify	{Object}	`{error: message => alert(message)}`	See form-builder.js#L186
sortableControls	{Bool}	`sortableControls: true`	`false`
stickyControls	{Bool}	`stickyControls: true`	`false`
showActionButtons	{Bool}	`showActionButtons: false`	`true`

Translators Needed!

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.

Recommend Projects