Responsive JSON Form Generator – AOForm

Preview:

Description:

Yet another dynamic form generator/builder/creator written in pure JavaScript.

The AOForm JavaScript library enables you to dynamically generate a fully responsive HTML form using JSON Schema and CSS Flexbox.

How to use it:

Load the AOForm’s JavaScript aoform.js and stylesheet aoform.css in the page.

<link rel="stylesheet" href="src/aoform.css">
<script src="src/aoform.js"></script>

Prepare your form data as follows:

var form = [
    {
      "type": "input",
      "name": "name",
      "label": "Name",
      "values": ""
    },
    {
      "type": "select",
      "name": "color",
      "label": "Favorite Color",
      "values": [
        {"label":"Blue","value":"blue"},
        {"label":"Yellow","value":"yellow"},
        {"label":"Orange","value":"orange"}
      ]
    },
    {
      "type": "radio",
      "name": "color",
      "label": "Method for contact you",
      "values": [
        {"label":"Email","value":"email"},
      {"label":"Phone","value":"phone"},
      {"label":"Videocall","value":"videocall"}
      ]
    },
    {
      "type": "checkbox",
      "name": "pet",
      "label": "Pets have",
      "values": [
        {"label":"Dog","value":"dog"},
        {"label":"Cat","value":"cat"},
        {"label":"Turtle","value":"turtle"}
      ]
    },
    {
      "type": "textarea",
      "name": "history",
      "label": "History of you",
      "values": "Default text in textarea"
    },
    {
      "type": "searchselect",
      "name": "language",
      "label": "Select languages you speak",
      "values": [
        {"label":"Spanish","value":"spanish"},
        {"label":"English","value":"english"},
        {"label":"Russian","value":"russian"}
      ]
    },
];

Generate a form inside a given container. Done.

var myForm = new AOForm(form, document.querySelector('body'));

Default CSS classes that will be applied to the form fields.

metaElement: {
  class: 'aoform'
},
container: {
  class: 'aoform-container'
},
input: {
  container: {
    class: 'aoform-input-container'
  },
  text: {
    class: 'aoform-input'
  }
},
textarea: {
  class: 'aoform-textarea'
},
select: {
  container: {
    class: 'aoform-select-container'
  },
  text: {
    class: 'aoform-text-select',
    notEmpty: 'aoform-selected'
  },
  options: {
    container: {
      class: 'aoform-option-select'
    },
    option: {
      class: 'aoform-option'
    }
  }
},
radio: {
  container: {
    class: 'aoform-radio-container'
  },
  option: {
    class: 'aoform-radio'
  }
},
checkbox: {
  container: {
    class: 'aoform-checkbox-container'
  },
  option: {
    class: 'aoform-checkbox'
  }
},
multiselect: {
  container: {
    class: 'aoform-multiple-select'
  },
  text: {
    container: {
      class: 'aoform-text-select aoform-options-selected'
    },
    options: {
      container: {
        class: 'aoform-multiple-selected-option'
      },
      option: {
        class: 'aoform-select-option'
      }
    }
  },
  options: {
    container: {
      class: 'aoform-option-select'
    },
    option: {
      class: 'aoform-option'
    }
  }
},
searchselect: {
  container: {
    class: 'aoform-multiple-select'
  },
  text: {
    container: {
      class: 'aoform-text-select aoform-options-selected'
    },
    options: {
      container: {
        class: 'aoform-multiple-selected-option'
      },
      option: {
        class: 'aoform-select-option'
      }
    }
  },
  options: {
    container: {
      class: 'aoform-option-select'
    },
    option: {
      class: 'aoform-option'
    },
    search:{
      container: {
        class: 'aoform-container-search'
      },
      textarea: {
        class: 'aoform-text-search',
        placeholder: 'Type for search...'
      }
    }
  }
},
title:{
  class: 'aoform-title'
},
subtitle:{
  class: 'aoform-subtitle'
},
activeClass: 'aoform-active',