Dynamic Bootstrap 5 Form Builder With Vanilla JavaScript

Preview:

Description:

The Bootstrap Form Builder library makes it easy to generate full-featured forms styled using the Bootstrap 5 framework.

Features:

• Dynamically build forms from JSON/JavaScript data definitions
• Support for all common form elements like text inputs, selects, radios, checkboxes, etc.
• Bootstrap 5 styling and layout out of the box
• No jQuery required, vanilla JS only

How to use it:

1. Include the Bootstrap 5 Form Builder in your project.

<script src="bootstrap-form-builder.js"></script>

2. To ensure your forms look their best, don’t forget to include the Bootstrap 5’s stylesheet. This will style the form fields.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

3. Define the data you want your form to represent.

const formOptions = {
  // form attrubites
  attributes: {
    enctype: 'application/x-www-form-urlencoded',
    method: 'post'
  },
  // define your form fields here
  fieldsets: [
    {
      grid: true,
      legend: 'Name',
      fields: [
      {
        attributes: {
          name: 'firstName',
          placeholder: 'John'
        },
        label: 'First Name',
        grid: {
          xs: 12,
          md: 4
        }
      },
      {
        attributes: {
          name: 'lastName',
          placeholder: 'Doe'
        },
        label: 'Last Name',
        grid: {
          xs: 12,
          md: 4
        }
      },
      {
        attributes: {
          name: 'email'
        },
        label: 'Email Address',
        type: 'email',
        grid: {
          xs: 12,
          md: 4
        }
      }]
    },
    {
      grid: true,
      legend: 'Address',
      fields: [
      {
        attributes: {
          name: 'street1',
          placeholder: '123 Main St'
        },
        label: 'Street'
      },
      {
        attributes: {
          name: 'city',
          placeholder: 'Anytown'
        },
        label: 'City',
        grid: {
          xs: 12,
          md: 4
        }
      },
      {
        attributes: {
          name: 'state',
          options: [
          {
            optgroup: {
              label: 'A',
              options: [
                {
                  text: 'Alabama',
                  value: 'AL'
                },
                {
                  text: 'Alaska',
                  value: 'AK'
                },
                {
                  text: 'Arizona',
                  value: 'AZ'
                },
                {
                  text: 'Arkansas',
                  value: 'AR'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'C',
              options: [
                {
                  text: 'California',
                  value: 'CA'
                },
                {
                  text: 'Colorado',
                  value: 'CO'
                },
                {
                  text: 'Connecticut',
                  value: 'CT'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'D',
              options: [
                {
                  text: 'Delaware',
                  value: 'DE'
                },
                {
                  text: 'District of Columbia',
                  value: 'DC'
                }
              ]
            }
          },
          {
            text: 'Florida',
            value: 'FL'
          },
          {
            text: 'Georgia',
            value: 'GA'
          },
          {
            text: 'Hawaii',
            value: 'HI'
          },
          {
            optgroup: {
              label: 'I',
              options: [
                {
                  text: 'Idaho',
                  value: 'ID'
                },
                {
                  text: 'Illinois',
                  value: 'IL'
                },
                {
                  text: 'Indiana',
                  value: 'IN'
                },
                {
                  text: 'Iowa',
                  value: 'IA'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'K',
              options: [
                {
                  text: 'Kansas',
                  value: 'KS'
                },
                {
                  text: 'Kentucky',
                  value: 'KY'
                }
              ]
            }
          },
          {
            text: 'Louisiana',
            value: 'LA'
          },
          {
            optgroup: {
              label: 'M',
              options: [
                {
                  text: 'Maine',
                  value: 'ME'
                },
                {
                  text: 'Maryland',
                  value: 'MD'
                },
                {
                  text: 'Massachusetts',
                  value: 'MA'
                },
                {
                  text: 'Michigan',
                  value: 'MI'
                },
                {
                  text: 'Minnesota',
                  value: 'MN'
                },
                {
                  text: 'Mississippi',
                  value: 'MS'
                },
                {
                  text: 'Missouri',
                  value: 'MO'
                },
                {
                  text: 'Montana',
                  value: 'MT'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'N',
              options: [
                {
                  text: 'Nebraska',
                  value: 'NE'
                },
                {
                  text: 'Nevada',
                  value: 'NV'
                },
                {
                  text: 'New Hampshire',
                  value: 'NH'
                },
                {
                  text: 'New Jersey',
                  value: 'NJ'
                },
                {
                  text: 'New Mexico',
                  value: 'NM'
                },
                {
                  text: 'New York',
                  value: 'NY'
                },
                {
                  text: 'North Carolina',
                  value: 'NC'
                },
                {
                  text: 'North Dakota',
                  value: 'ND'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'O',
              options: [
                {
                  text: 'Ohio',
                  value: 'OH'
                },
                {
                  text: 'Oklahoma',
                  value: 'OK'
                },
                {
                  text: 'Oregan',
                  value: 'OR'
                }
              ]
            }
          },
          {
            text: 'Pennsilvania',
            value: 'PA'
          },
          {
            text: 'Rhode Island',
            value: 'RI'
          },
          {
            optgroup: {
              label: 'S',
              options: [
                {
                  text: 'South Carolina',
                  value: 'SC'
                },
                {
                  text: 'South Dakota',
                  value: 'SD'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'T',
              options: [
                {
                  text: 'Tennessee',
                  value: 'TN'
                },
                {
                  text: 'Texas',
                  value: 'TX'
                }
              ]
            }
          },
          {
            text: 'Utah',
            value: 'UT'
          },
          {
            optgroup: {
              label: 'V',
              options: [
                {
                  text: 'Vermont',
                  value: 'VT'
                },
                {
                  text: 'Virginia',
                  value: 'VA'
                }
              ]
            }
          },
          {
            optgroup: {
              label: 'W',
              options: [
                {
                  text: 'Washington',
                  value: 'WA'
                },
                {
                  text: 'West Virginia',
                  value: 'WV'
                },
                {
                  text: 'Wisconsin',
                  value: 'WI'
                },
                {
                  text: 'Wyoming',
                  value: 'WY'
                }
              ]
            }
          }]
        },
        label: 'State',
        type: 'select',
        grid: {
          xs: 12,
          md: 4
        }
      },
      {
        attributes: {
          name: 'zip',
          pattern: '\\d{5}',
          placeholder: '12345'
        },
        label: 'Zip Code',
        type: 'tel',
        grid: {
          xs: 12,
          md: 4
        }
      },
      {
        attributes: {
          name: 'is_mailing_address'
        },
        label: 'Is Mailing Address?',
        type: 'checkbox',
        grid: {
          xs: 12,
          md: 4
        }
      }]
    }
  ],
  submit: (e) =>
  {
    e.preventDefault();
    console.log('submit');
  }
};

4. Append the form to your webpage.

// initialize the form
const myForm = formBuilder.buildForm(formOptions);
// submit button
const input = document.createElement('input');
input.setAttribute('class', 'btn btn-primary');
input.setAttribute('type', 'submit');
input.value = 'Submit';
myForm.append(input);
// append the form to #container
document
  .getElementById('container')
  .append(myForm);