Add contact form to /contact page

[marcoow]

In order to make it easier for people to reach out to us, we want to add a contact form to the existing /contact page. That way people can send messages directly from the site without having to leave their browser.

The form has 3 fields for name, email and message and a send button. Once the message has been sent, the complete form is replaced by a confirmation text (along with the option of sending another message):

The form has states for success, sending and error (see linked designs). The only field that is required to be filled in is the email which can be validated using HTML5 form validation. We send the email via an AWS Lambda function that is already running (see API documentation below).

TODOs

• add a new loading state for the <Button> component that prevents clicks on the button while active and changes the button's visual appearance (see designs below)
• add a new <ContactForm> component that implements the form with inputs for name (input[type="text"]), email(input[type="email"]), and message(textarea), as well as a submit button
  • while the form is submitting, enable the <Button> component's loading state and disable all fields
  • once the form has submitted successfully, show the success message instead of the input elements (see designs below)
    • when clicking the button for sending another message in the success message, switch the component back to its original state to show the input elements instead of the success message (reset all previously captured values so the fields are cleared)
  • if the form fails to submit, show the error state (see designs below)
  • disable submission of the form when the user's browser is offline (and re-enable when it comes back online):
    • in the component's constructor, register event handlers for the window's "online" and "offline" events and enable/disable submission of the form accordingly (leaving the input elements active)
    • remove the event handlers when the component is destroyed to avoid memory leaks (using the willDestroy method)
• add the component to the /contact page

Resources

• design for contact page: https://share.goabstract.com/58772aee-9859-438e-94e0-7740b4fe4dd1?mode=design&sha=2831eee022bc8af61dc8061d3cf9d62368994fce
• designs for successful submission state: https://share.goabstract.com/f2017ba3-fcc3-4519-96bb-69e810777c87?mode=design&sha=2831eee022bc8af61dc8061d3cf9d62368994fce
• design for submitting state: https://share.goabstract.com/d2b08144-dda2-40c2-82e2-84c52102a251?mode=design&sha=2831eee022bc8af61dc8061d3cf9d62368994fce
• design for error state: https://share.goabstract.com/d42cf7b3-224e-4d8a-ada0-cb6920b805e4?mode=design&sha=2831eee022bc8af61dc8061d3cf9d62368994fce
• request for submitting the form: curl 'https://guqdu9qkgf.execute-api.eu-central-1.amazonaws.com/production' -H 'authority: guqdu9qkgf.execute-api.eu-central-1.amazonaws.com' -H 'cache-control: max-age=0' -H 'sec-fetch-dest: empty' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36' -H 'content-type: application/json' -H 'accept: */*' -H 'origin: https://simplabs.com' -H 'sec-fetch-site: cross-site' -H 'sec-fetch-mode: cors' -H 'referer: https://simplabs.com/contact/' -H 'accept-language: en-US,en;q=0.9,de-DE;q=0.8,de;q=0.7' --data-binary '{"name":"","email":"fdsfsd@gfgf.de","message":""}' --compressed