Search code examples
google-apps-scriptgoogle-sheetsbootstrap-4bootstrap-modal

How to add timestamp and capture email address of submitter

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/[email protected]/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>
Solution

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