Efficient Form – Modernization Project

The goal of this project was to transform an outdated, unintuitive form into a modern and accessible version that reduces the time and clicks needed to complete it and improves the overall user experience.

Tech Stack

Features

• Updated typography more readable font
• Bootstrap framework for quick styling.
• Automatically fetched the user's country and country code based on IP.
• Autocomplete with suggestion list while typing a country
• Replaced small select dropdowns with radio
• Grouped related fields into sections using fieldset and legend, following accessibility (a11y) best practices.
• Organized the entire form into a single-column layout
• Enabled full keyboard navigation (Tab, Shift+Tab, Enter).
• Conditionally displayed optional fields (e.g., BLIK code and invoice fields)
• Added HTML5 validation and custom regex validation for fields.
• Improved accessibility for users relying on screen readers.

Check it out

Copy repository

git clone https://github.com/Meikelele/enchance-the-forms

Go to the proper dictionary

cd enchance-the-forms

Install dependencies

npm install

Run application

npm run dev

Comparision

Before

After

Overlook

Some validations

Shipping methods

Payment methods (+ BLIK Code)

Invoice

Whole filled up form

User data