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);
The post Dynamic Bootstrap 5 Form Builder With Vanilla JavaScript appeared first on CSS Script.