Fix Contact Form layout on Contact Us page

[Skydodle]

Overview

On the Contact Us page, the current contact form's styling does not match our Figma design. We need to update the form's styling and layout to match the Figma design in preparation for pre-launch.

Action Items

• Inspect the screenshots of 'current layout' & 'expected layout' below in Resources/Instructions to compare the visual difference on the forms
• Review the Figma design file in Figma Resources below to inspect the CSS layout requirements such as properties for each input field on the contact form
• Review the ContactForm.jsx component in codebase
• If needed, familiarize yourself with MUI Components documentation specifically on Grids and Forms
• Make changes to the codebase so that our contact form match with the Figma design
• Test the changes to confirm it's bug free prior to pushing and making a pull request

Resources/Instructions

Screenshot of current layout

Screenshot of expected layout (from Figma)

Note: just work on the form for this issue, ignore the other design differences on the page for now

Figma Resources

• Link to Figma File
• Page Name:⭐⭐⭐ V1.2 HAND-OFF
• Section Name: Contact Us

[ryanfchase]

@Skydodle this looks like sufficient detail for a dev to get started. I'm going to take off the ready for dev and draft label and put this in Prioritized Backlog so it can be assigned.

Also - the Pre-Launch label is a good idea, but PMs were reluctant to implement this and instead preferred to go with tracking via the Epic of Epics. I'll leave the label here in case we decide we want to add Pre-Launch to all other tickets later 😄

[bphan002]

ETA: Monday, February 5
Availability: Saturday, February 3