[launch week] Add submission form on the UI

[drguthals]

This PR adds a form that validates user input.

[drguthals]

@codecov-ai-reviewer review

[codecov]

❌ We are unable to process any of the uploaded JUnit XML files. Please ensure your files are in the right format.

[codecov-staging]

❌ We are unable to process any of the uploaded JUnit XML files. Please ensure your files are in the right format.

[codecov-qa]

❌ We are unable to process any of the uploaded JUnit XML files. Please ensure your files are in the right format.

[codecov-ai]

The handleSubmit function should be wrapped in a try-catch block to handle any unexpected errors during form submission.

Suggested change

	const handleSubmit = (event: Event): void => {
	event.preventDefault()
	const form = event.target as HTMLFormElement
	const formData: CustomFormData = {
	name: (form.elements.namedItem('name') as HTMLInputElement).value,
	email: (form.elements.namedItem('email') as HTMLInputElement).value,
	phoneNumber: (form.elements.namedItem('phone') as HTMLInputElement).value,
	}
	const errors = validateFormData(formData)
	if (errors.length > 0) {
	displayErrors(errors)
	} else {
	submitForm(formData)
	displaySuccessMessage('Form submitted successfully!')
	}
	} catch (error) {
	displayErrorMessage('Failed to submit the form.')
	}
	}
	dHJ5IHsKICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7CgogICAgY29uc3QgZm9ybSA9IGV2ZW50LnRhcmdldCBhcyBIVE1MRm9ybUVsZW1lbnQ7CiAgICBjb25zdCBmb3JtRGF0YTogQ3VzdG9tRm9ybURhdGEgPSB7CiAgICAgIG5hbWU6IChmb3JtLmVsZW1lbnRzLm5hbWVkSXRlbSgnbmFtZScpIGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlLAogICAgICBlbWFpbDogKGZvcm0uZWxlbWVudHMubmFtZWRJdGVtKCdlbWFpbCcpIGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlLAogICAgICBwaG9uZU51bWJlcjogKGZvcm0uZWxlbWVudHMubmFtZWRJdGVtKCdwaG9uZScpIGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlLAogICAgfTsKCiAgICBjb25zdCBlcnJvcnMgPSB2YWxpZGF0ZUZvcm1EYXRhKGZvcm1EYXRhKTsKCiAgICBpZiAoZXJyb3JzLmxlbmd0aCA+IDApIHsKICAgICAgZGlzcGxheUVycm9ycyhlcnJvcnMpOwogICAgfSBlbHNlIHsKICAgICAgc3VibWl0Rm9ybShmb3JtRGF0YSk7CiAgICAgIGRpc3BsYXlTdWNjZXNzTWVzc2FnZSgnRm9ybSBzdWJtaXR0ZWQgc3VjY2Vzc2Z1bGx5IScpOwogICAgfQogIH0gY2F0Y2ggKGVycm9yKSB7CiAgICBkaXNwbGF5RXJyb3JNZXNzYWdlKCdGYWlsZWQgdG8gc3VibWl0IHRoZSBmb3JtLicpOwogIH0KfTs=

[codecov-ai]

Instead of querying the form element directly in the global scope, consider using a React ref to manage the form element. This approach is more in line with React best practices.