title: How to create HTML Data entry form using Google spreadsheet as backend
body: <p>I have a google spreadsheet, where some rows append on daily basis and using the google spreadsheet, the customer feedback team follows up.</p>
  
  <p>Google Spreadsheet Data.</p>
  
  <p><a href="https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing" rel="nofollow noreferrer">https://docs.google.com/spreadsheets/d/1V-XZdCUZAQVkfCat9vXVxITjjNMxNMPDin6B5j9uMWY/edit?usp=sharing</a></p>
  
  <p>The above mentioned Google Spreadsheet always have the below mentioned data at google sheet (Highlighted in blue):</p>
  
  <p>Ref ID
  Company Name
  Contact No.1
  Contact No.2
  Project Name
  Agent ID</p>
  
  <p>Rest of the mentioned details would be captured from the HTML UI basis the user response and finally click on 'Submit &amp; Next' or 'Next' the input get stored at google sheet.</p>
  
  <p>The User has to first enter the 'Agent Id' on HTML UI and accordingly one by one <code>Ref ID</code> detail would be given to particular 'Agent Id` user. </p>
  
  <p>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.</p>
  
  <p>Below mentioned particulars will be drop down or radio options basis user input:</p>
  
  <pre><code>Product : Lite, Lite-I, Elite
  Ref Code: LIT-1, LIT-2, LIT-3
  Status  : Accept, Reject, Pending
  Comment : Satisfied, Call Back, Pending
  </code></pre>
  
  <p>Below mentioned particulars will be derived:</p>
  
  <pre><code>Days Passed: It will be derived from the current system year - year mentioned in the `Date`
  </code></pre>
  
  <p>Below mentioned particulars will be user input as a free text.</p>
  
  <pre><code>Client Name
  Notes
  Final_Status
  </code></pre>
  
  <p><strong>Note:</strong> The agents will be assigned and shown only those <code>Ref ID</code> where the <code>Agent ID</code> is not blank and <code>Final_Status</code> is either blank or other than 'Submit &amp; Next' marked in Googlespread Sheet.</p>
  
  <p>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 <code>Final_Status</code> marked as 'Submit &amp; Next` or 'Next'</p>
  
  <p>Submit &amp; Next button would only be enable if all the details are captured by user. 
  Next Button would only be enable if <code>Comment</code> option is selected. </p>
  
  <p>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 &amp; Next' or 'Next' button.</p>
  
  <p>Expected UI:</p>
  
  <p><a href="https://i.stack.imgur.com/WXMpM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WXMpM.png" alt="enter image description here"></a></p>