i. Category or Section: This element helps users navigate the form as it walks them through the process. It is especially useful when you group the data to be collected into more than one category on your form e.g Personal details, Occupational details & Financial details.

ii. Label: The label tells the user what data is expected from them in any particular input field.

iii. Placeholder: Extra description about the Label.

iv. Error Message: Gives the user feedback on why their input in the input field is unacceptable.

v. Primary CTA button: A button at the end of the form which the user uses to submit the input(s) on the form.

Form States

At the very basics, there are 3 phases your form should go through during user interaction;

i. Default State: This is what your form looks like before any input from the user.

ii. Focus State: This places emphasis on the exact input field the user is interacting with. This helps improve focus & reduces scan time if a user turns away from their screen for a second.

iii. Feedback State: This is where the user receives feedback (most of the time error messages). Sometimes, this state can happen after the user moves to the next input field. However, if the data cannot be immediately verified, it happens when the user tries to submit the form by clicking a button.