[UI Bug]: UI inconsistencies in Contact Us form

[jyotidercima]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

The Contact Us form section has multiple UI inconsistencies that affect visual clarity and user experience:

• Having two buttons — "Send" and "Feedback" — in the same Contact Us form is confusing and unnecessary
• Icons are not aligned with the placeholder text inside input fields
• Input fields have inconsistent styles — some are straight-edged, others curved
• Spacing and padding between icons and text are uneven
• On mobile view, the illustration image overflows outside its container, breaking the layout at width less than 390px

Expected behavior

• From a UX perspective, users expect one primary action,
• All input icons should be vertically centered with their corresponding placeholder text.
• Input fields should have a consistent border style (either all straight or all curved).
• Spacing and padding between icons and text should be uniform across all fields.
• The form should maintain visual balance and look aligned on different screen sizes (especially mobile).
• Image should scale properly on mobile devices, without overflowing
• Overall, the form should appear clean, minimal, and easy to read.

Suggested Fixes:

• Use one button only like "Submit", "Send Message", or "Send Feedback".
• Use flexbox or grid on input field containers for better alignment
• Apply consistent padding, line-height, and font-size
• Use border-radius uniformly across all inputs
• For image:
• Set max-width: 100% and height: auto
• Wrap image in a responsive container
• Use media queries or responsive utility classes to manage layout

Add ScreenShots/Videos

📷 Screenshot for Reference: Contact Form UI Issue

The annotated image below highlights:

• Misalignment between icons and input placeholders
• Inconsistent input field styling (some straight, some curved)
• Uneven spacing and padding

This affects the overall visual balance and usability of the form.

Mobile view:

On which device are you experiencing this bug?

Windows

Record

• [x] I have read the Contributing Guidelines
• [ ] I'm a APERTRE 2025 contributor
• [ ] I'm a CODEPEAK 2025 contributor
• [x] I have starred the repository

[github-actions[bot]]

👋 Thanks for opening this issue! We appreciate your contribution. Please make sure you’ve provided all the necessary details and screenshots, and don't forget to follow our Guidelines and Code of Conduct. Happy coding! 🚀

[darapureddyrenuka]

Hi @apu52 , I'm a GSSoC'25 contributor and would love to work on this issue. Could you please assign it to me? Thank you! 🙌

[ghost]

Hlo, I'm a GSSoC'25 contributor and would love to work on this issue. Could you please assign it to me? Thank you!

[Aditimall-gif]

Hey, I'm a GSSoC'25 contributor and would love to work on this issue. Could you please assign it to me? Thank you!