View on Github

jQuery formBuilderjQuery formBuilder

A jQuery plugin for drag and drop form creation

Download this project as a .zip file Download this project as a tar.gz file

Drag and Drop.

Full Featured Form Editing.

Add some fields to the formBuilder above and render them here.

Features

Customization

  • Configurable Options
  • Translatable
  • Custom Notifications

Easy Install

  • bower install formBuilder
  • or add the following to your app.
  • <script src="http://formbuilder.online/assets/js/form-builder.min.js"></script>

Supportive Community

jQuery formBuilder has an active community, if you hit a blocker you have options.

Get Started

At a minimum formBuilder needs form-builder.min.js and form-builder.css, but here is a full page example.
<!DOCTYPE html>
<html>
<head>
<title>Example formBuilder</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://formbuilder.online/assets/css/form-builder.min.css">
</head>
<body>
  <textarea id="fb-template"></textarea>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="http://formbuilder.online/assets/js/form-builder.min.js"></script>
  <script>
  jQuery(document).ready(function($) {
    'use strict';
    $(document.getElementById('fb-template')).formBuilder();
  });
  </script>
</body>
</html>