feat: make contact us form accessible ⚒️✨

[0xabdulkhalid]

Is your feature request related to a problem? Please describe.

• This feature is related to the accessibility problem happens to screen readers like accessibility devices

Describe the solution you'd like.

• The solution is to make the contact us form accessible by following standard principles from A11y.
• As part of our commitment to inclusivity and ensuring equal access to our website's services, we need to address the accessibility concerns related to our "Contact Us" form.
• Currently, the form may present challenges to users with disabilities, hindering their ability to reach out and engage with us effectively.
• We need to properly link the label to the input element with attributes like name, id & for to make it accessible to screen readers like devices.
• Additionally we can add screen reader only styles with tailwind utility classes to the label, So that the label will be visually hidden but it can be visible to screen readers.
• This will results in making a perfect accessible Contact Us form which can used by every users around the world!

Describe alternatives you've considered.

• There's no alternative to improve accessibility of contact us page unless we make the changes regarding accessibility.

Add any other context or screenshots about the feature request here.

No response

Record

• [X] I agree to follow this project's Code of Conduct
• [X] I have checked the existing issues
• [X] I'm a GSSoC'23 contributor
• [X] I want to work on this issue

[0xabdulkhalid]

Hey there @agamjotsingh18 👋🏻

Please make sure to assign this issue to me to make the work done!

Thank you.

[agamjotsingh18]

Issue assigned already