Form Builder

In this example below you will see how to do a Form Builder with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by leggomuhgreggo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright leggomuhgreggo ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Form Builder</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- 
TODO:
Priority:
canvas translations

Ornamental:
-Warnings?
--too many elements?

 -->



<header class="main-header">
  <div class="title">Main Contact Form</div>
  <div class="button-group">
    <button class="btn btn-warning">Save as Form Template</button>
    <button class="btn btn-warning">Save</button>
  </div>
</header>
<div class="wrap">
  <div class="sidebar">
    <h2>Scuse Me, Young Man</h2>
    <h5>Drag items from here</h5>
    <br />
    <h4>Input Elements</h4>
    <ul id="form-input-els" class="options-pallat">
      <li class="form-item" data-form-el="input">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Text Field</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="radio">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Radio Button Group</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="checkbox">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Checkbox Group</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="textarea">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Text Area</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="select">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Select Dropdown</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
    </ul>
    <h4>UX Elements</h4>
    <ul id="form-ux-els" class="options-pallat">
      <li class="form-item" data-form-el="title">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Form Title</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="section">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Form Section</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="heading">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Form Heading</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
      <li class="form-item" data-form-el="content">
        <div class="inner">
          <i class="fa fa-bars"></i>
          <span class="inner-text">Description Text</span>
          <i class="fa fa-arrows"></i>
          <i class="fa fa-angle-right"></i>
        </div>
      </li>
    </ul>
  </div>
  <div class="main">
    <div class="drop-wrap">
      <header class="canvas-header">
        <div class="left-group">
          <h2 class="heading">Form Canvas</h2>
          <h5>Drop items here and edit</h5>
          <br />
        </div>
        <div class="right-group">
          <button class="btn btn-primary">Start From Template</button>
        </div>
      </header>
      <ul id="drop-canvas" class="form-canvas"></ul>
    </div>
    <div class="form-preview">
      <h2>Preview</h2>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/leggomuhgreggo/form-builder-NNVVye */
.main-header {
  height: 60px;
  width: 100%;
  background: #03394b;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  font-size: 26px;
}
.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 60px;
  left: 0;
  display: flex;
}
.wrap .sidebar {
  flex-shrink: 0;
}
.wrap .main {
  width: 100%;
  display: flex;
  position: relative;
}
.sidebar {
  background: #15A4D2;
  color: white;
  padding: 20px;
}
.options-pallat {
  width: 350px;
  margin: 20px auto;
  padding: 0px;
  list-style: none;
}
.drop-wrap {
  padding: 20px;
  border: solid #ebebeb 1px;
  width: 50%;
  background: #f0f0f0;
  display: flex;
  flex-flow: nowrap column;
  align-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.drop-wrap > * {
  width: 100%;
}
.drop-wrap .canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drop-wrap .form-canvas {
  margin: 0;
  padding: 20px;
  background: #fefefe;
  height: 100%;
  position: relative;
}
.drop-wrap .form-canvas:empty:after {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  top: 50px;
  content: 'This is empty. Drag some stuff in!';
  color: #CCC;
  text-align: center;
  display: block;
  font-size: 30px;
}
.form-preview {
  padding: 20px;
  border: solid #ebebeb 1px;
  width: 50%;
  background: #fefefe;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
.form-item {
  height: 80px;
  display: flex;
  position: relative;
  width: 100%;
}
.form-item:not(:first-child) .inner {
  border-top: rgba(14, 109, 140, 0.15) solid 1px;
}
.form-item .inner {
  width: 100%;
  display: flex;
  padding: 20px;
  align-items: center;
  background: #35c4f2;
  color: white;
  font-size: 20px;
  transition: all ease .15s;
}
.form-item .fa-angle-right,
.form-item .fa-bars,
.form-item .fa-arrows {
  font-size: .675em;
  opacity: .5;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.form-item .fa-angle-right:not(:active),
.form-item .fa-bars:not(:active),
.form-item .fa-arrows:not(:active) {
  cursor: -webkit-grab;
  cursor: grab;
}
.form-item .fa-bars {
  padding-right: 15px;
}
.form-item .fa-angle-right,
.form-item .fa-arrows {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  right: 20px;
}
.form-item:not(.placed) {
  cursor: -webkit-grab;
  cursor: grab;
}
.form-item:not(.placed) .fa-angle-right,
.form-item:not(.placed) .fa-bars {
  display: none;
}
.form-item:not(.placed):active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.form-item.placed .fa-angle-right,
.form-item.placed .fa-bars {
  display: block;
}
.form-item.placed .fa-arrows {
  display: none;
}
.form-item:hover .inner {
  background: #34bfec;
}


/*Downloaded from https://www.codeseek.co/leggomuhgreggo/form-builder-NNVVye */
console.clear();

var addElTransform = function addElTransform(el) {
  $(el).siblings().removeClass('active');
  $(el).addClass('active placed');
  //make active (maybe remove active from others?)
  //give name
  //call type based config
};

var inputList = document.getElementById('form-input-els');
var uxList = document.getElementById('form-ux-els');
var dropCanvas = document.getElementById('drop-canvas');

var formInputSort = Sortable.create(inputList, {
  sort: false,
  animation: 150,
  group: {
    name: 'inputEls',
    pull: 'clone'
  }
});
var formUXSort = Sortable.create(uxList, {
  sort: false,
  animation: 150,
  group: {
    name: 'uxEls',
    pull: 'clone'
  }
});

var dropCanvas = Sortable.create(dropCanvas, {
  sort: true,
  animation: 150,
  ghostClass: "sortable-ghost",
  group: {
    name: 'canvas',
    put: ['inputEls', 'uxEls']
  },
  onAdd: function onAdd(event) {
    addElTransform(event.item);
    console.log(event);
    // var itemEl = event.item; // dragged HTMLElement
    // event.from; // previous list
  }
});

dropCanvas.option(onAdd, function (event) {
  addElTransform(event.item);
  console.log(event);
  // var itemEl = event.item; // dragged HTMLElement
  // event.from; // previous list
});

Comments