Enhance : Contact-form layout with icons and Labels in index.html without using label tag.

[salonijoshi1980]

Description :

• This pull request improves the user experience and visual design of the Contact form on the index.html page by adding icons, updating styles, and removing label tags in favor of cleaner placeholder text. The aim is to create a more visually appealing and intuitive form layout that aligns with modern design standards.

Changes Made :

1.Icon Integration :

• Added icons for each input field (Name, Email, Feedback) to provide visual cues and improve usability.

2.Layout and Styling Adjustments :

1. Styled .input-flex class to align icons and input fields consistently, enhancing readability.
2. Adjusted input field background colors, padding, and margins for a cleaner look.
3. Updated border color and background color to match the existing theme and improve focus state.

3.Placeholder labels used without Labels tag :

• Doesn't use traditional tags in favor of descriptive placeholder text within each input field to reduce code lines , clutter and simplify the form layout.

Rationale :

• These changes aim to enhance the user experience by:
  1.Making the form fields more visually intuitive with icons, guiding users through the form.
  2.Reducing visual clutter by using placeholders instead of labels.
  3.Creating a cohesive, modern style that aligns with the rest of the page design and makes the form more inviting to complete.

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Screenshots / videos (if applicable)

Before solving issues : -

After solving the issue : -

Checklist:

• I have performed a self-review of my code
• I have read and followed the Contribution Guidelines.
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have commented my code, particularly in hard-to-understand areas.

Additional context:

[Include any additional information or context that might be helpful for reviewers.]

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buddy-trail	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 6, 2024 5:25am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our contributing.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

✅ Deploy Preview for buddytrail ready!

Name	Link
🔨 Latest commit	d04e6f7
🔍 Latest deploy log	https://app.netlify.com/sites/buddytrail/deploys/672afdd91deec60008f3a0d4
😎 Deploy Preview	https://deploy-preview-1860--buddytrail.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[salonijoshi1980]

@PriyaGhosal Assigned me with labels of gssoc extd , hactoberfest , level 2. If it beneficial for u..✨

[PriyaGhosal]

@salonijoshi1980 Resolve the conflicts .

[PriyaGhosal]

Please see the conflicts . Resolve the conflicts .