As a potential customer, I seek a user-friendly, non-distracting contact form consistent with the design system. Effortless navigation via keyboard and touch as well as feedback on validation issues and form submission is essential for me. The form should allow easy attachment of relevant content (PDFs, images, videos, and links). I want quick access to alternative forms like a booking form, to make an informed decision which is right for my use case. I would appreciate options to specify my inquiry and a custom field for unique requests since they allow me to communicate my intent clearly to get a more targeted response. I enjoy getting a confirmation that my data has been received and a confirmation email for trust-building. If I decide not to finish my form, I would welcome to be able to easily navigate away from it and still find the data I entered in the form when I return.
Requirements:
UI:
[x] user-friendly and intuitive-to-use design on both mobile and desktop
[ ] provides users with a clear feedback for success or error
[x] design consistent with the design system
[x] allows for keyboard navigation
[x] is optimized for touch input
[x] radio buttons with a custom input field
[x] email input field
[x] text input field
[x] optional file input field allowing to attach relevant file types
Logic:
[x] input validation providing relevant feedback to the user
[ ] on form submission render received data to the screen and return a success message or in case of error show the error message
[ ] on form submission send an email confirmation
[ ] store data entered in the form in the browser cache for the user to be able to return to the form later and still find their data
[ ] on form submit send myself an email notification with form data
MVP To Do:
[x] Remove the file upload option and make sure the form works in production
[ ] Send an email to myself on form submit using SendGrid
[estimated time: 2 hours]
To Do:
[ ] To fix: on submit: form data is validated and formatted, then added to the potential-client database and is identified with a unique ID => this works in the dev env but not in production, data is not added to file storage or db, success message is not received in production environment, unexpected error is thrown, in Vercel logs ReferenceError: File is not defined is shown => using browser file API in a server component, strangely works in the dev environment on the server but not in production, potential fix is to move File object validation logic to the client side and receive a file buffer object on the server, process it and send it to Supabase, for this it's required to find out which part of the code causes this error !
[ ] On successful submit: thank-you modal is shown, showing the submitted data in a style consistent with the design system, allows closing to return to the contact page or to click to redirect home !!
[ ] On unsuccessful submit: custom error message is shown in a modal in a user-friendly way with instructions to resolve if possible !!
Lower Priority To Do:
If there is no more time, these tasks can be done in the next sprint.
[ ] On successful submit: mail is sent to my Gmail with SendGrid, form submit event with all valid data is sent to Amplitude for analysis (8 hours)
[ ] Add a glowing border to the submit button on click, animate the forms in on tab change (4 hours)
[ ] Store data entered in the cache when the user navigates away for them to return and continue (3 hours)
Estimated Time: 39 hours for full feature**
Estimated Time for MVP: 2 hours => Stick to MVP features in this sprint
As a potential customer, I seek a user-friendly, non-distracting contact form consistent with the design system. Effortless navigation via keyboard and touch as well as feedback on validation issues and form submission is essential for me. The form should allow easy attachment of relevant content (PDFs, images, videos, and links). I want quick access to alternative forms like a booking form, to make an informed decision which is right for my use case. I would appreciate options to specify my inquiry and a custom field for unique requests since they allow me to communicate my intent clearly to get a more targeted response. I enjoy getting a confirmation that my data has been received and a confirmation email for trust-building. If I decide not to finish my form, I would welcome to be able to easily navigate away from it and still find the data I entered in the form when I return.
Requirements:
UI:
Logic:
MVP To Do:
[estimated time: 2 hours]
To Do:
Lower Priority To Do:
If there is no more time, these tasks can be done in the next sprint.
Estimated Time: 39 hours for full feature**
Estimated Time for MVP: 2 hours => Stick to MVP features in this sprint
Ressources: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations https://react.dev/reference/react/use-server