1565: Frontend Contact Us Form

[Sun-Mountain]

Changes Made:

• Added new route /contact for Contact Us page
• Created a form component to capture user inputs
• Implemented form validation for required fields
• Added a POST request to submit form data
• Added success and error messages
• Made sure styling was responsive

Screenshots

[mflymfly]

• Box border radius: 8px
• .contact-us-container: margin == .container plus (should line up with the content above). Let me know if you want me to redline any screens.
• .contact-info: 24px between "Contact Information" and address info
• New: address line top margin from 16px to 4px
• email form: include icon and placeholder text (same as on homepage email subscribe form)
• email error validation: no error shows when an email is submitted like this "mflynn@fearless"
• New: move "A red asterisk" text line up to below the "Please reach out" text. Now updated in the designs(Sorry, my mistake there!)
• Text input: please include "Your message" placeholder text
• Text input box: 100 px height
• Update the character count to 1000 characters for now. We need to confirm that but your point about the URL is great and I want to be wary of that for now.
• Add in second gray info box regarding reporting training issues (now in designs and annotated)
• new: unstyled "Clear form" button now has underline (like the clear all button on the Training Explorer search)

Tablet (1024px)

• top margin of content: 48px

Mobile size

• .contact-us-content margin: 32px 16px

• buttons can be horizontally aligned side by side like in design here

[ChelseaKR]

LGTM, pending design changes requested by @mflymfly. Thanks so much @Sun-Mountain!! great job w/ this