demo/form.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    />

    <script src="../dist/cyz-form.full.js"></script>
    <style>
      body {
        padding: 10px;
      }
      .custom-select {
        position: relative;
        width: 190px;
        padding: 0;
        display: inline-block;
        height: calc(2.25rem + 2px);
        line-height: 1.5;
        color: #495057;
        vertical-align: middle;
        background: #fff
          url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
          no-repeat right 0.75rem center;
        background-size: 8px 10px;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }
      .form-field {
        padding: 6px 0 6px 0px;
      }
      .select-selected {
        cursor: pointer;
        padding: 0.375rem 1.75rem 0.375rem 0.75rem;
      }

      .select-items-content {
        position: absolute;
        left: 0;
        top: 40px;
        display: none;
        background-color: #fff;
        border: 1px solid #ccc;
        border-top: none;
        width: 100%;
        z-index: 1;
      }
      .select-items-content.show {
        display: block;
      }
      .select-items {
        max-height: 240px;
        overflow: auto;
      }
      .select-item {
        padding: 8px 16px;
        cursor: pointer;
      }
      .select-item:hover {
        background: #ebe8e8;
      }
      .select-item.active {
        background: #c2c2c2;
      }
      .select-search {
        width: 100%;
        padding: 8px 16px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <!-- Form with Selector -->
    <h2>Form 1 - with selector</h2>
    <div class="my-form"></div>
    <script>
      CyzForm.FormBuilder.create({
        selector: '.my-form',
        formId: '12000',
        portalId: 'cyzerg-biz',
      });
    </script>
    <hr />

    <!-- Form Without Selector -->
    <h2>Form 2 - Without selector</h2>
    <script>
      const form2 = CyzForm.FormBuilder.create({
        formId: '12001',
        portalId: 'tms',
      });
      console.log(form2);
      form2.on('init', function ($event) {
        console.log('after form init', $event);
      });
      form2.on('beforeSubmit', function ($event) {
        console.log('before form submitted', $event);
      });
      form2.on('afterSubmit', function ($event) {
        console.log('form has been submitted', $event);
      });
    </script>
    <hr />
    <!-- Form Without Selector -->
    <h2>Form 3 - New Form</h2>
    <script>
      CyzForm.FormBuilder.create({
        formId: '12002',
        portalId: 'damco',
      });
    </script>

    <!-- Company Form -->
    <h2>Form 4 - Company Form</h2>
    <script>
      CyzForm.FormBuilder.create({
        formId: '12003',
        portalId: 'cyzerg',
      });
    </script>
  </body>
</html>