Great! Now that we have our form up and running, it's time to think about how we can customize it and adjust to our needs.
Let's say we would like to add a heading "IT meeting guest questionnaire" and change the order of the fields - the field asking for a guest's last name should come first. We also want to ask for their work experience more politely.
How can we do it? That's where
AutoFields components come into action.
AutoField components generate, no more and no less, only form fields.
That means we have to manually add the submit button (
SubmitField) and the error messages (
If you need to add heading to your form, using
AutoFields seems to be a perfect solution.
AutoFields will automatically render form fields based on the schema within the
If you need to reorder your fields,
AutoField is your best friend.
AutoField will automatically render any field based on the field name provided in the schema.
Using AutoFields allows you to freely manipulate your form's layout.
Here we've changed the order of the
firstName field and added a polite question,
asking whether the people filling the form would like to share with us their work experience.
Similarly to the fields, we can also change the order of the displayed errors.
Instead of using the
ErrorsField component, which renders one stack block of errors,
we can use the
ErrorField and just place it directly where want in our form.
The default error messages are rather unfriendly. Hopefully, we can easily modify them,
either by passing the
children to the
ErrorField or by using the