Your First Form

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.css" rel="stylesheet">

Add div to page

<div id="container"></div>

Form code

Standalone approach

document.addEventListener("DOMContentLoaded", function() {
  var form = new FancyForm({
    renderTo: 'form',
    title: 'User Data',
    width: 290,
    height: 500,
    defaults: {
      type: 'string'
    },
    items: [{
      name: 'id',
      type: 'hidden'
    },{
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    },{
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    },{
      label: 'E-mail',
      emptyText: 'E-mail',
      name: 'email',
      valid: {
        type: 'email',
        blank: false,
        blankText: 'Required',
        text: 'Incorect email'
      }
    },{
      type: 'date',
      label: 'Birthday',
      name: 'birthday'
    },{
      type: 'checkbox',
      label: 'Active',
      name: 'active',
      value: true
    },{
      type: 'number',
      label: 'Hour rate',
      name: 'hour',
      min: 0
    },{
      type: 'string',
      label: 'Position',
      name: 'position'
    },{
      type: 'combo',
      label: 'Country',
      name: 'country',
      data: [
        {country: 'USA'},
        {country: 'Canada'},
        {country: 'England'},
        {country: 'Germany'}
      ],
      displayKey: 'country',
      valueKey: 'country'
    },{
      type: 'textarea',
      label: 'About',
      name: 'about'
    }],
    buttons: ['side', {
      text: 'Clear',
      handler: function(){
        form.clear();
      }
    },{
      text: 'Save',
      handler: function(){
        var values = form.get();

      }
    }]
  });
});

renderTo

There are several approaches to provide where to render.
The first one is id name.

new FancyForm({
  renderTo: 'container',

Another one approach to provide dom.

new FancyForm({
  renderTo: document.querySelector('#container'),

And one more to provide dom as first argument.

new FancyForm(document.querySelector('#container'), {
  title: 'Title',

JQuery approach

$(function(){
  $('#container').FancyForm({
    title: 'User Data',
    width: 290,
    height: 500,
    defaults: {
      type: 'string'
    },
    items: [{
      name: 'id',
      type: 'hidden'
    },{
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    },{
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    },{
      label: 'E-mail',
      emptyText: 'E-mail',
      name: 'email',
      valid: {
        type: 'email',
        blank: false,
        blankText: 'Required',
        text: 'Incorect email'
      }
    },{
      type: 'date',
      label: 'Birthday',
      name: 'birthday'
    },{
      type: 'checkbox',
      label: 'Active',
      name: 'active',
      value: true
    },{
      type: 'number',
      label: 'Hour rate',
      name: 'hour',
      min: 0
    },{
      type: 'string',
      label: 'Position',
      name: 'position'
    },{
      type: 'combo',
      label: 'Country',
      name: 'country',
      data: [
        {country: 'USA'},
        {country: 'Canada'},
        {country: 'England'},
        {country: 'Germany'}
      ],
      displayKey: 'country',
      valueKey: 'country'
    },{
      type: 'textarea',
      label: 'About',
      name: 'about'
    }],
    buttons: ['side', {
      text: 'Clear',
      handler: function(){
        form.clear();
      }
    },{
      text: 'Save',
      handler: function(){
        var values = form.get();


      }
    }]
  });
});