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">
</div>

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
});

Changelog:

2022-05-30

• Bugfix

2019-05-23

• v0.0.4: Auto Enable file upload

2019-04-16

• Added Checkbox and Radio Buttons

2019-03-14

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

2019-03-12

• Fixed for Collapsible Container

2019-03-07

• 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.