How to make HTML form using googlesheet as a Database

I have a google spreadsheet, where some rows append on daily basis and using the google spreadsheet, the customer feedback team follows up.

Google Spreadsheet Data.

https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing

The above mentioned Google Spreadsheet always have the below mentioned data at google sheet (Highlighted in blue):

Ref ID
Company Name
Contact No.1
Contact No.2
Project Name
Agent ID

Rest of the mentioned details would be captured from the HTML UI basis the user response and finally click on 'Submit & Next' or 'Next' the input get stored at google sheet.

The User has to first enter the 'Agent Id' on HTML UI and accordingly one by one Ref ID detail would be given to particular 'Agent Id` user.

As mentioned in the attached screenshot, The left side of the information would be static as per the googlespread sheet, and right hand side information would be filled by the user basis the telephonic conversation.

Below mentioned particulars will be drop down or radio options basis user input:

Product : Lite, Lite-I, Elite
Ref Code: LIT-1, LIT-2, LIT-3
Status  : Accept, Reject, Pending
Comment : Satisfied, Call Back, Pending

Below mentioned particulars will be derived:

Days Passed: It will be derived from the current system year - year mentioned in the `Date`

Below mentioned particulars will be user input as a free text.

Client Name
Notes
Final_Status

Note: The agents will be assigned and shown only those Ref ID where the Agent ID is not blank and Final_Status is either blank or other than 'Submit & Next' marked in Googlespread Sheet.

We need to add one more column in the Googlespread sheet, Which capture the Date time stamp as per the system date as soon as the Final_Status marked as 'Submit & Next` or 'Next'

Submit & Next button would only be enable if all the details are captured by user.
Next Button would only be enable if Comment option is selected.