Drag And Drop Form Builder With Bootstrap And jQuery

An easy-to-implement Bootstrap form creation plugin which makes it easy to create a complex form with unlimited amount of fields using drag and drop. Also provides an 'Export' function which allows to export the current form into HTML snippets for further use.

Dependencies:

• jQuery.
• Bootstrap 4 framework.
• Font Awesome (for icons).
• jQuery UI (for drag and drop functionality).

How to use it:

1. Include the necessary JavaScript and CSS resources on the web page.

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. Include the form builder's files on the webpage. Note that the form_builder.js should be placed after jQuery library.

<link rel="stylesheet" href="css/form_builder.css">
<script src="js/form_builder.js"></script>

3. Create the html for the form builder with pre-defined form fields, preview area, and drag'n'drop region.

<div class="form_builder" style="margin-top: 25px">
  <div class="row">
    <div class="col-sm-2">
      <nav class="nav-sidebar">
        <ul class="nav">
          <li class="form_bal_textfield"> <a href="javascript:;">Text Field <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_textarea"> <a href="javascript:;">Text Area <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_select"> <a href="javascript:;">Select <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_radio"> <a href="javascript:;">Radio Button <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_checkbox"> <a href="javascript:;">Checkbox <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_email"> <a href="javascript:;">Email <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_number"> <a href="javascript:;">Number <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_password"> <a href="javascript:;">Password <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_date"> <a href="javascript:;">Date <i class="fa fa-plus-circle pull-right"></i></a> </li>
          <li class="form_bal_button"> <a href="javascript:;">Button <i class="fa fa-plus-circle pull-right"></i></a> </li>
        </ul>
      </nav>
    </div>
    <div class="col-md-5 bal_builder">
      <div class="form_builder_area"></div>
    </div>
    <div class="col-md-5">
      <div class="col-md-12">
        <form class="form-horizontal">
          <div class="preview"></div>
          <div style="display: none" class="form-group plain_html">
            <textarea rows="50" class="form-control"></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

4. Create a button that will export the form into HTML snippets.

<button style="cursor: pointer;display: none" class="btn btn-info export_html mt-2 pull-right">Export HTML</button>

---

This awesome jQuery plugin is developed by sumbria. For more Advanced Usages, please check the demo page or visit the official website.