hredwan / formBuilder

A jQuery plugin for drag and drop form creation

formBuilder v1.24.2

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

Demo

Options

Option	Type	Value(s)	Default
controlOrder	{Array}	['autocomplete', 'button', 'checkbox', ...]
controlPosition	{String}	'left' | 'right'	'right'
dataType	{String}	json	xml
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
typeUserAttrs	{Object}	typeUserAttrs config	null
typeUserEvents	{Object}	typeUserEvents config	null

Changelog

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.