After building many forms for different markets/countries/languages with complex logic to handle each country's special requirements, I wanted to see if there was a way to let a single component generate forms, relying on a JSON config object. The FormMaker allows one to create any form, using a single component, feeding a JSON config object to the component.
The goal is to have components that take care of their own validation rules and display without relying on an external validation library (even though there are some really good ones out there, but hey, one less thing, and less complexity). Also, the changes to a given form field should not require a re-render of any other parts of the form.
Here is the JSON that is used to generate this form. It has two parts: The metasection, which contains form-wide information, and the fields section, which contains the configuration of the fields and structure elements that make up the form.
{
"meta": {
"name": "Example Form",
"description": "This an example form.",
"submitButtonText": "Submit"
},
"fields": [
{
"type": "header",
"name": "formHeader",
"label": "A JSON-Borne form (sorry)"
},
{
"type": "text",
"name": "firstName",
"label": "First Name",
"placeholder": "Enter your first name",
"minLength": 2,
"maxLength": 20,
"width": "half"
},
{
"type": "text",
"name": "lastName",
"label": "Last Name",
"placeholder": "Enter your last name",
"minLength": 2,
"maxLength": 20,
"width": "half"
},
{
"type": "checkbox",
"name": "agreeToTerms",
"label": "Agree To Terms. I agree to the terms and conditions, including the privacy policy and other stuff as per local, state, and national laws as pertaining to blah blah."
},
{
"type": "radio",
"name": "gender",
"label": "Gender",
"options": [
{
"label": "male", "value": "male", "id": "male", "dataTest": "custom-data-test-attribute"
},{
"label":"female", "value": "female", "id": "female"
},{
"label": "prefer not to say", "value": "prefer-not-to-say", "id": "prefer-not-to-say"
}
]
}
]
}
And here is our form, generated from the above JSON config object.
Here is the submitted form data:
No form output yet.