Skip to content

"Your Message" textarea lacks focus animation - label doesn't move up like other input fields #805

@Afraar99

Description

@Afraar99

Describe the bug

The feedback form has inconsistent animation behavior across input fields. When clicking on the "Email Address" field, the label properly animates upward with a highlight effect, creating a smooth user experience. However, when clicking on the "Your Message" textarea field, the label "Your Message" remains static and doesn't animate or move to the top, breaking the visual consistency of the form.

Image

Image

To Reproduce

Steps to reproduce the behavior:

  1. Visit https://eventra.sandeepvashishtha.tech/contact on a mobile device or use mobile view in browser DevTools
  2. Navigate to the Feedback form
  3. Click on the "Email Address" input field - observe the label animates upward and highlights properly
  4. Click on the "Your Message" textarea field - notice the label does NOT animate or move
  5. Compare the behavior between both fields

Expected behavior

The "Your Message" textarea should have the same animation behavior as other form fields:

  • When clicked/focused, the label "Your Message *" should animate and move to the top of the textarea
  • The border should highlight in blue (similar to Email Address field)
  • The animation should be smooth and consistent with other form fields
  • This creates a cohesive and professional user experience throughout the form

Additional context

This appears to be a missing CSS animation or JavaScript focus handler for the textarea element. All form fields should have consistent interaction patterns to maintain good UX standards. The floating label animation is a modern design pattern that improves form usability by clearly showing which field is active and preventing label-input overlap.

Please assign this issue to me under Hacktoberfest. I would like to work on this and contribute to the project. Thank you!

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions