A jQuery Plugin for Drag and Drop Form Builder or Creation

formBuilder is a jQuery plugin for creating drag and drop forms, form builder has many options and it is translatable.

This jQuery plugin turns textarea into an online form builder to allow users to quickly build their own web forms via drag or drop.

How to make use of it:

Installation:

# Yarn
yarn add formBuilder

# NPM
$ npm install formBuilder

# Bower
$ bower install formBuilder

1. Load the jQuery library and the jQuery form builder’s stylesheet & JavaScript.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/dist/form-builder.min.js"></script>
<!-- Render form templates created with formBuilder -->
<script src="/path/to/dist/form-render.min.js"></script>

2. Load the required jQuery UI to create draggable and droppable form elements.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

3. Create a normal Html textarea for the form builder.

<textarea name="formBuilder" id="formBuilder"></textarea>

4. Call the plugin to create a primary form builder.

$('textarea').formBuilder();

5. Available choices to create your individual form builder.

$('textarea').formBuilder({

  // additional form action buttons- save, data, clear
  actionButtons: [], 

  // enables/disables stage sorting
  allowStageSort: true,

  // append/prepend non-editable content to the form.
  append: false, 
  prepend: false,

  // control order
  controlOrder: [
    'autocomplete',
    'button',
    'checkbox-group',
    'checkbox',
    'date',
    'file',
    'header',
    'hidden',
    'number',
    'paragraph',
    'radio-group',
    'select',
    'text',
    'textarea',
  ],

  // or left
  controlPosition: 'right',

  // or 'xml'
  dataType: 'json',

  // default fields
  defaultFields: [],

  // save, data, clear
  disabledActionButtons: [], 

  // disabled attributes
  disabledAttrs: [],

  // disabled buttons
  disabledFieldButtons: {},

  // disabled subtypes
  disabledSubtypes: {}, 

  // disabled fields
  disableFields: [], 

  // disables html in field labels
  disableHTMLLabels: false, 

  // removes the injected style
  disableInjectedStyle: false, 

  // opens the edit panel on added field
  editOnAdd: false, 

  // adds custom control configs
  fields: [], 

  // warns user if before the remove a field from the stage
  fieldRemoveWarn: false,

  // DOM node or selector
  fieldEditContainer: null, 

  // add groups of fields at a time
  inputSets: [], 

  // custom notifications
  notify: {
    error: console.error,
    success: console.log,
    warning: console.warn,
  },

  // prevent clearAll from remove default fields
  persistDefaultFields: false,

  // callbakcs
  onAddField: (fieldData, fieldId) => fieldData,
  onAddOption: () => null,
  onClearAll: () => null,
  onCloseFieldEdit: () => null,
  onOpenFieldEdit: () => null,
  onSave: (evt, formData) => null,
  
  // replaces an existing field by id.
  replaceFields: [],

  // user roles
  roles: {
    1: 'Administrator',
  },

  // smoothly scrolls to a field when its added to the stage
  scrollToFieldOnAdd: true,

  // shows action buttons
  showActionButtons: true,

  // sortable controls
  sortableControls: false,

  // sticky controls
  stickyControls: {
    enable: true,
    offset: {
      top: 5,
      bottom: 'auto',
      right: 'auto',
    },
  },

  // defines new types to be used with field base types such as button and input
  subtypes: {},

  // defines a custom output for new or existing fields.
  templates: {},

  // defines custom attributes for field types
  typeUserAttrs: {},

  // disabled attributes for specific field types
  typeUserDisabledAttrs: {},

  // adds functionality to existing and custom attributes using onclone and onadd events. Events return JavaScript DOM elements.
  typeUserEvents: {},

});

6. API technique for the form builder.

// add a new field
var field = {
    type: 'text',
    class: 'form-control',
    label: 'label'
};
formBuilder.actions.addField(field, index);

// clear fields
formBuilder.actions.clearFields();

// close all field editing panels
formBuilder.actions.closeAllFieldEdit();

// remove a specific field by id or leave blank to remove the last field.
formBuilder.actions.removeField(id);

// save the data
formBuilder.actions.save();

// get data as JS
formBuilder.actions.getData();

// get data as XML
formBuilder.actions.getData('xml');

// get data as formatted JSON
formBuilder.actions.getData('json', true);

// set additional data
var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';
formBuilder.actions.setData(formData);

// change the editor language without reloading
formBuilder.actions.setLang(lang);

// show data
formBuilder.actions.showData();

// toggle all panels
formBuilder.actions.toggleAllFieldEdit();

//  toggle the edit mode for fields
formBuilder.actions.toggleFieldEdit(currentFieldId);

7. Render a form from a form template utilizing the formRender technique.

<div class="fb-render">
  <textarea id="fb-template"><form-template> <fields> <field name="select-1454177070204" label="Select" style="multiple" description="" required="false" className="form-control" type="select" > <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> </field> <field name="rich-text-1454177067296" label="Text Area" description="" className="form-control" required="false" type="textarea" /> </fields> </form-template></textarea>
</div>

8. Available choices for the formRender technique.

$('.fb-render').formRender({

  // container for our rendered form
  container: false,

  // form template
  formData: false,

  // 'xml' | 'json'
  dataType: 'json',

  // custom labels
  label: {
    formRendered: 'Form Rendered',
    noFormData: 'No form data.',
    other: 'Other',
    selectColor: 'Select Color'
  },

  // setting render to false prevents formRender from making any changes to the DOM
  render: true,

  // feedbacks
  notify: {
    error: function(message) {
      return console.error(message);
    },
    success: function(message) {
      return console.log(message);
    },
    warning: function(message) {
      return console.warn(message);
    }
  }

});

9. Available strategies for the formRender technique.

const formRenderInstance = $('#render-container').formRender(formRenderOptions);

// clear all data
formRenderInstance('clear');

// capture user data
formRenderInstance.userData

// grab the rendered form's HTML
$('#render-container').formRender('html');

// render form data
const wrap = $('.render-wrap');
const formRender = wrap.formRender();
wrap.formRender('render', formData);

// set data
const wrap = $('.render-wrap');
const formRender = wrap.formRender();
wrap.formRender('setData', formData);

jQuery Plugin For Online Drag & Drop Form Builder, formBuilder Github, jquery form builder custom fields, jquery form builder save to database


See Demo And Download

Official Website(kevinchappell): Click Here

This superior jQuery/javascript plugin is developed by kevinchappell. For extra advanced usage, please go to the official website.

Share