Dynamic Form Builder Styled With Bootstrap - Formy

File Size: 158 KB
Views Total: 6784
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Dynamic Form Builder Styled With Bootstrap - Formy

Formy is a lightweight, jQuery based form builder used to dynamically generate form elements from JavaScript array object, styled with Bootstrap 4 or Bootstrap 3 framework.

Supported form elements: text, textarea, daterange, select, date, hidden, titlebox, password, checkbox, radio button, switch, file, submit, button, and more.

How to use it:

1. Create a container to hold the generated form elements.

<div id="formContainer">

2. Create an array of JavaScript objects as follows:

var myData = [
     { label: "<h3>Form Title</h3>", name: "title" , type:"titlebox", attrs:{"class":"text-center"}},
     { label: "Username", name: "pin" },
     { label: "Password", name: "pwd", type:"password"},
     { label: "Upload", name: "upload", type:"file"},
     { label: "Send Email", name: "email", type:"switch"},
     { label: "Mt. Everest", name: "mt", type:"radio"},
     { label: "Allow Cookies?", type:"checkbox"},
     { label: "Period", name: "start,end", type:"daterange"},
     { label: "Submit", name: "submit", type:"button"}

3. Call the function to populate the form with the data you provide.

$("#formContainer").formy("createForm", myData);

4. Change the direction of the form. Default: vertical.

$("#formContainer").formy("createForm", myData,{ 
  type: "horizontal"

5. Set the ratio of columns. Default: 1:5.

$("#formContainer").formy("createForm", myData,{ 
  colratio: 1:3

6. Set the number of columns. Default: 1.

$("#formContainer").formy("createForm", myData,{ 
  columns: 3



  • Bugfix


  • v0.0.4: Auto Enable file upload


  • Added Checkbox and Radio Buttons


  • Preset values fix for DropDowns
  • Fix to correct for numeric dropdown values not showing


  • Fixed for Collapsible Container


  • Added Switch Control

This awesome jQuery plugin is developed by jidexl21. For more Advanced Usages, please check the demo page or visit the official website.