Membuat Sebuah Drag & Drop Form Builder Menggunakan jQuery

Pada kesempatan kali ini, akan dibuat sebuah form builder yang dibuat dari jQuery. Tujuan dibuatnya form builder adalah untuk mempercepat proses pembuatan sebuah form dalam pembuatan sebuah web.

Membuat Sebuah File index.html

File index.html dibuat dari Bootstrap 4. Isi file index.html bisa di-copy seperti di bawah ini

  <!doctype html>
  <html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Form Builder</title>
  </head>

  <body>
    <!--Form BuilderJS -->
    <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="https://formbuilder.online/assets/js/form-builder.min.js"></script>

    <script>
      jQuery(function ($) {
        $(document.getElementById('fb-editor')).formBuilder();
      });
    </script>

    <div class="container">
      <h1 class="mt-4 text-center"> Form Builder</h1>
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <h5 class="card-header">
              Form Builder
            </h5>
            <div class="card-body">
              <p class="card-text">
                <div id="fb-editor"></div>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>
  </body>

  </html>

Mendownload Plugin Form Builder Dari Github

Untuk membuat sebuah form builder yang memiliki kemampuan drag & drop kita akan men-download sebuah plugin yang ada di Github. Download di halaman ini. Setelah itu ekstrak file hasil download-nya di folder yang terdapat file index.html yang sudah dibuat sebelumnya.

Menjalankan File index.html

Setelah kedua proses di atas sudah dilaksanakan maka langkah selanjutnya adalah mengujicoba file index.html.