How to create HTML Data entry form using Google spreadsheet as backend #86

New Issue

GiteaMirror · 2025-11-06T08:14:11-06:00

GiteaMirror commented

2025-11-06 08:14:11 -06:00

Originally created by @Mike7755 on GitHub (Dec 14, 2019).

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.

Also, If there is no new rows available in the googlesheet for the data entry using UI, the UI will throw the message to User that there is 'No New task available' on a blank screen by clicking on 'Submit & Next' or 'Next' button.

UI Would look like:

(https://ibb.co/njxp8bD)

Originally created by @Mike7755 on GitHub (Dec 14, 2019). 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. Also, If there is no new rows available in the googlesheet for the data entry using UI, the UI will throw the message to User that there is 'No New task available' on a blank screen by clicking on 'Submit & Next' or 'Next' button. UI Would look like: <img width="333" alt="Test" src="https://user-images.githubusercontent.com/58803285/70844656-62224080-1e6a-11ea-9047-aedd1b390406.PNG"> (https://ibb.co/njxp8bD)

GiteaMirror closed this issue

2025-11-06 08:14:11 -06:00

GiteaMirror commented

2025-11-06 08:14:13 -06:00

@oshliaer commented on GitHub (Dec 22, 2019):

Hi @Mike7755!

Sorry I don't see any code in your sheet. Do you want me to do this? You can hire me.

@oshliaer commented on GitHub (Dec 22, 2019): Hi @Mike7755! Sorry I don't see any code in your sheet. Do you want me to do this? You can hire me.