1

How can I add a timestamp on form submit and get their email address in my existing code.

Desired Output: – Once the user filled out the form, it will automatically capture a timestamp and their email.

Question:

  • Is it possible to convert this into a pop-up modal? I have an existing data table, and I'm looking to add a button for Feedback, it should prompt them to submit their feedback. But I can't figure it out, so I created another web app and just add a quick link to my data table.

Code.Gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
  
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function processForm(formObject){
  var url="";
  var ss= SpreadsheetApp.openByUrl(url);
  var ws=ss.getSheetByName("Feedback");

  ws.appendRow([

    formObject.need,
    formObject.message,

  ]);
}

Index. Html

<!DOCTYPE html>
<html>
  <head>
  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <?!= include('JavaScript'); ?>



  <style>
body {
    font-family: 'Lato', sans-serif;
}

h1 {
    margin-bottom: 40px;
}

label {
    color: #333;
}

.btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    width: 80%;
    margin-left: 3px;
    }
.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;

}

.card{
    margin-left: 10px;
    margin-right: 10px;
}

  </style>


  </head>
  
  <body>
<div class="container">
        <div class=" text-center mt-5 ">


            <h1 >App Directory Feedback Form</h1>
                
            
        </div>

    
    <div class="row ">
      <div class="col-lg-7 mx-auto">
        <div class="card mt-2 mx-auto p-4 bg-light">
            <div class="card-body bg-light">
       
            <div class = "container">
                           <form id="myForm" onsubmit="handleFormSubmit(this)">

            

            <div class="controls">

             <!--     <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="first_nam">Firstname *</label>
                            <input id="first_name" type="text" name="first_name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                            
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last_name">Lastname *</label>
                            <input id="last_name" type="text" name="last_name" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                                                            </div>
                    </div>
                </div>
             <!--   <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email">Email *</label>
                            <input id="email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                            
                        </div>
                    </div> -->
                     <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="need">Request Type *</label>
                            <select id="need" name="need" class="form-control" required="required" data-error="Please specify your need.">
                                <option value="" selected disabled>--Select Your Issue--</option>
                                <option >Add New Queue</option>
                                <option >Add Application</option>
                                <option >Update Information</option>
                                <option >Other</option>
                            </select>
                            
                        </div>
                    </div>
              </div> 
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="message">Message *</label>
                            <textarea id="message" name="message" class="form-control" placeholder="Write your message here." rows="7" required="required" data-error="Please, leave us a message."></textarea>
                            </div>

                        </div>


                    <div class="col-md-12">
                        
                        <input type="submit" class="btn btn-success btn-send  pt-2 btn-block" value="Submit Request" >
                    
                </div>
          
                </div>


        </div>
         </form>
            <div id="output"></div>
                </div>
        </div>
            </div>


    </div>
        <!-- /.8 -->

    </div>
    <!-- /.row-->

</div>
</div>

  </body>
</html>

JavaScript

<script>

  function preventFormSubmit(){
    var forms=document.querySelectorAll('form');
    for (var i=0;i<forms.length;i++){
      forms[i].addEventListener('submit',function(event){
        event.preventDefault();
      });
    }
  }
window.addEventListener('load',preventFormSubmit);

function handleFormSubmit(formObject){
  google.script.run.processForm(formObject);
  document.getElementById("myForm").reset();
}


</script>
coders_key
  • 61
  • 8
  • I have to apologize for my poor English skill. Which is your question is `How to add timestamp and capture email address of submitter` or `Is it possible to convert this into a pop-up modal? I have an existing data table, and I'm looking to add a button for Feedback, it should prompt them to submit their feedback. But I can't figure it out, so I created another web app and just add a quick link to my data table.`? – Tanaike Aug 31 '22 at 05:11
  • Hi Tanaike! Appreciate you checking this out. What I really want is to create a button (Send Feedback) in my existing data table created using a bootstrap. And when they clicked that button, a pop-up modal would appear asking details of their feedback, and it should be save to another Sheet and will notify me via email once submission was received. I hope this makes sense. Thank you. – coders_key Aug 31 '22 at 22:03
  • Thank you for replying. I would like to support you. But, I have to apologize for my poor English skill, again. Unfortunately, I cannot still understand your question. But I would like to try to understand it. When I could correctly understand it, I would like to think of a solution. I would be grateful if you can forgive my poor English skill. – Tanaike Sep 01 '22 at 00:58
  • Hi, since your question is `What I really want is to create a button (Send Feedback) in my existing data table created using a bootstrap. And when they clicked that button, a pop-up modal would appear asking details of their feedback, and it should be save to another Sheet and will notify me via email once submission was received.`, I think this is far too broad, and therefore I voted to close this. In any case, I don't think what you want to do is possible. – Iamblichus Sep 01 '22 at 08:53

2 Answers2

0

Timestamp and Email Address using onFormSubmit

function onMyFormSubmit(e) {
  //Logger.log(JSON.stringify(e));
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName("Sheet0");
  let o = [["Time Stamp:", e.namedValues["Timestamp"][0], "Email Address:", e.namedValues["Email Address"][0]]];
  sh.getRange(sh.getLastRow() + 1, 1, 1, 4).setValues(o);
}
Cooper
  • 59,616
  • 6
  • 23
  • 54
0

This was resolved, I just added this to appendRow. Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd")]);

coders_key
  • 61
  • 8