Amalesh-Frontend-Pages-For-New-Google-Form-Equivalent-For-Technical-Support-And-Advisory-Volunteer-Agreement

[Amalesh-A]

Description

Related PRS (if any):

This is a frontend PR.
To test this frontend PR you need to checkout the development branch of the backend.

Main changes explained:

• Added a new component TSAForm

How to test:

1. check into current branch.
2. do npm install and ... to run this PR locally.
3. Log in to the app.
4. Navigate to 'http://localhost:3000/tsaformpage1'.

Screenshots or videos of changes:

TSAFom.mp4

Verify the Following:

1. Check if the forms are accessible.
2. Check if you are able to answer the questions.
3. Check if you are able to navigate to the next page only if you answer the mandatory questions.
4. Check if you are able to see an error when you try to skip a mandatory question.
5. Check for UI responsiveness.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	02cf509
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67f1c43079eca30008680ce3
😎 Deploy Preview	https://deploy-preview-3356--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[manushajyasta30]

Cloned front end code branch and followed all the steps mentioned in the PR.

1. able to access the URL
2. validated the mandatory fields error on clicking next without filling mandatory fields.
3. Able to successfully submit the form.

[linh2020]

• Accessed the form at http://localhost:3000/tsaformpage1
• All 8 pages are accessible.
• Validation for required questions is working.
• Users cannot move forward unless required fields are filled.
• Error messages are shown properly.
• The UI is responsive and user-friendly.
• Final form submission works without errors.
• Everything works as expected.

[rsripathi2906]

Checked out the branch and tested the new TSAForm component.

1. Forms are accessible.
2. Able to answer questions without issues.
3. Mandatory question validation works correctly.
4. Navigation to the next page is restricted until required fields are filled.
5. Error messages appear when skipping mandatory questions.
6. UI responsiveness is working as expected.

Screen.Recording.2025-04-04.132915_1.mp4

[myeeli]

The form is accessible and i was able to move to next page only if i fill all the mandatory fields and i was able to submit it. The page works perfectly for varying screen sizes.

[Dharmik1710]

Reviewed the TSA Form pages and verified that the multi-page navigation, field validation, and required input enforcement are all functioning as expected. The form correctly prevents users from skipping required fields and maintains state across pages.

Tested in both light and dark modes and the layout remains responsive on smaller screen sizes. Error handling and transitions are smooth. No issues found with form validation, page navigation, or overall UX.

Everything looks good from the frontend perspective. Great work putting this together!

[vaibhavkoladiya]

Everything works perfectly – the forms are accessible, the validations are in place, errors show up when mandatory questions are skipped, and the UI is responsive. One thing I did notice, though – when I hit the back button, it seems like the user has to re-enter all the answers again. Correct me if I’m wrong, but is there a way we can retain those inputs to avoid re-filling the form?

Screen.Recording.2025-04-04.165646.mp4

[pavanputti]

The TSAForm component works as expected. The form fields are accessible, mandatory questions must be answered before proceeding, and error messages appear when skipped, and error handling prevents submission without required answers. Overall, the component is functioning well.

Screen.Recording.2025-04-04.at.8.59.50.PM.mov

[one-community]

Thank you all, merging!