Form.io Embedded Form Builder

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div class="container">
  <div id="formio">
  </div>
</div>

JavaScript

const formDef = {
  "display": "form",
  "components": [{
      "label": "Day",
      "hideInputLabels": false,
      "inputsLabelPosition": "top",
      "useLocaleSettings": false,
      "tableView": false,
      "fields": {
        "day": {
          "hide": false
        },
        "month": {
          "hide": false
        },
        "year": {
          "hide": false,
        }
      },
      "defaultValue": "00/00/0000",
      "key": "day",
      "type": "day",
      "input": true,
    },
    {
      "type": "button",
      "label": "Submit",
      "key": "submit",
      "disableOnInvalid": true,
      "input": true,
      "tableView": false
    }
  ]
}
Formio.createForm(document.getElementById('formio'), formDef).then((form) => {
  const currentYear = new Date().getFullYear().toString();
  form.components[0].component.maxYear = currentYear;
  form.redraw();
  const mySubmission = form.submission.data;
  doSomethingWith(mySubmission);
})