[Feat] Redesign Form Layout in registerOPD page for Better Usability, Visual Appeal, and Responsiveness

[Md-SabbirHosen]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

• On desktop, redesign the form to display two input fields per line to reduce height.
• Some input fields (e.g., Reason) will take full width for better visual balance.
• On mobile, stack all 11 input fields vertically for easy navigation.
• Example: place the two input fields like this (input design will not be change)-

Use Case

Users filling out the form will experience a more organized layout on desktop, reducing form height and enhancing readability. On mobile, users will have a streamlined, stackable layout, ensuring the form remains accessible and easy to use.

Benefits

• Improved form usability and visual appeal.
• More compact and efficient layout on desktop.
• Full responsiveness across devices, enhancing user experience on mobile and tablet.
• Better alignment with modern UI standards, reducing visual clutter.

Priority

High

Record

• I agree to follow this project's Code of Conduct
• I'm a GSSOC contributor
• I want to work on this issue
• I'm willing to provide further clarification or assistance if needed.

[Luson045]

@Md-SabbirHosen 👍🏻👍🏻 okay but make sure that UX is good.

[Md-SabbirHosen]

Sure. Please assign me under hacktoberfest and gssoc-ex label.