clever form generator - Free Download Easy Form Generator With JS Object & JSON Schema - cleverform

Free Download Easy Form Generator With JS Object & JSON Schema – cleverform

Posted on

This time I will share jQuery Plugin and tutorial about Easy Form Generator With JS Object & JSON Schema – cleverform, hope it will help you in programming stack.

clever form generator - Free Download Easy Form Generator With JS Object & JSON Schema - cleverform
File Size: 21.1 KB
Views Total: 3324
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

cleverform is a lightweight and flexible form generator that dynamically populates form fields with data defined in the JavaScript (JS Object & JSON Schema).

Easy to style with your own CSS styles or 3rd front-end frameworks such as Bootstrap, Semantic UI, etc.

How to use it:

1. Create a placeholder for the HTML form.

1 <div id="myForm">
2   Loading...
3 </div>

2. Initialize the cleverform and create empty form fields as follows:

01 var myForm = $('#element').CleverForm({
02     name: 'formName',
03     form: [
04       {
05         Class: "form-control",
06         Name: "Name",
07         Title: "First Name",
08         readonly: true
09       },
10       {
11         Class: "form-control",
12         Name: "Surname",
13         Title: "Surname",
14         readonly: true
15       },
16       {
17         Class: "form-control",
18         Name: "Email",
19         Title: "eMail Address",
20         type: "email",
21         required: true
22       },
23       {
24         Class: "form-control",
25         Name: "Phone",
26         Title: "Phone Number",
27         type: "phone"
28       },
29       {
30         Class: "form-control",
31         Name: "Birthday",
32         Title: "Birth<a href="https://www.jqueryscript.net/time-clock/">date</a>",
33         type: "date"
34       },
35       {
36         Class: "form-control",
37         Name: "Selection",
38         Title: "Selection",
39         type: "select",
40         options: "lookup.json" // define options in a JSON file
41       }
42     ]
43 });

3. Define the select options in the lookup.json.

1 [
2   { "id": 1, "name": "Yes"},
3   { "id": 2, "name": "No"}
4 ]

4. Populate the form fields with data you provide.

1 Form.ShowForm({
2   Name: "jQuery",
3   Surname: "Script",
4   Email: "admin@jQueryScript.Net",
5   Phone: "8001234567",
6   Birthday: "2012-11-30",
7   Selection: 1
8 })

5. Assign CSS classes to form fields using the following options.

1 var myForm = $('#element').CleverForm({
2     class: "",
3     LabelClass: "",
4     ContainerClass: "",
5     InputClass: ""
6 });

6. Customize the submit button.

1 var myForm = $('#element').CleverForm({
2     SubmitButton: {
3       Class: "",
4       Name: "submit",
5       label: "Save Button"
6     }
7 });

7. Callback functions.

1 var myForm = $('#element').CleverForm({
2     onFormCreated: function() {},
3     onFormSubmit: function(data) { },
4     onCannotLoadData: function (data) {}
5 });

Changelog:

2020-04-05

  • Added “Today” at bottom, finished table with missing cells in last row

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