jQuery Plugin Drag and Drop Online Form Builder

jQuery Plugin Drag and Drop Form Builder

jQuery Plugin Drag and Drop Form Builder is a 100% client-side plugin that provide power to the users to create forms with an instinctive drag and drop interface. Form Builder supports many form fields and some html tags.

FormRender is the companion plugin to form Builder that permits you to purify the created form results. An emblematic use case has formBuilder in an admin area of a site. It may also have an app and formRender on the front-end.

Because of it, formRender and formBuilder are 2 distinct plugins but can be used composedly to create the edit toggle. It has some features that make it distinguish.

check this out Best Laravel Admin Panel Generators

  • It enables the fields you need. You can use your own notifications add on or add content.
  • Translatable
  • Bootstrap is arranged but not hooked on
jQuery Plugin Drag and Drop Form Builder

Here is how can you use this script.

Download and install jQuery Plugin Drag and Drop Form Builder

formBuilder and formRender are available directly from GitHub and through npm.

Install module from package manager:

$ npm i –save formBuilder

How to use it:

  1. Load jQuery library and the jQuery form builder’s stylesheet & JavaScript in your project. Then Load the necessary jQuery UI to create draggable and droppable form components.
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js?x84038"></script>
<!-- Core -->
<script src="/path/to/dist/form-builder.min.js?x84038"></script>
<!-- Render form templates created with formBuilder -->
<script src="/path/to/dist/form-render.min.js?x84038"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

2. Create a standard Html

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

3. Call the plugin to create a basic form builder. Available options to create your own.

$('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,
  },

  // 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: {},

});

Render a form from a form template using the form Render method.

<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>

var fbTemplate = document.getElementById('fb-template');
$('.fb-render').formRender({
  dataType: 'xml',
  formData: fbTemplate.value
});

// or 
$('.fb-render').formRender({
  dataType: 'xml',
  formData: '<form-template><fields><field name="text-input-1454163102327" class="form-control" label="Text Field" description="" required="false" type="text" /><field name="date-input-1454163105133" class="form-control" label="Date Field" description="" required="false" type="date" /><field name="checkbox-group-1454163056695" label="Checkbox Group" style="multiple" description="" required="false" type="checkbox-group"><option value="option-1">Option 1</option><option value="option-2">Option 2</option></field></fields></form-template>' };
});

Available options for the form Render

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

});

Your email address will not be published. Required fields are marked *

More Stories
Flexible Responsive Event Calendar jQuery
Flexible Responsive Event Calendar jQuery – Evo-Calendar