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 >
<div >
<h1 >App Directory Feedback Form</h1>
</div>
<div >
<div >
<div >
<div >
<div class = "container">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div >
<!-- <div >
<div >
<div >
<label for="first_nam">Firstname *</label>
<input id="first_name" type="text" name="first_name" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
</div>
</div>
<div >
<div >
<label for="last_name">Lastname *</label>
<input id="last_name" type="text" name="last_name" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
</div>
</div>
</div>
<!-- <div >
<div >
<div >
<label for="email">Email *</label>
<input id="email" type="email" name="email" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
</div>
</div> -->
<div >
<div >
<div >
<label for="need">Request Type *</label>
<select id="need" name="need" 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 >
<div >
<div >
<label for="message">Message *</label>
<textarea id="message" name="message" placeholder="Write your message here." rows="7" required="required" data-error="Please, leave us a message."></textarea>
</div>
</div>
<div >
<input type="submit" 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>
CodePudding user response：
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);
}
CodePudding user response：
This was resolved, I just added this to appendRow. Utilities.formatDate(new Date(), "GMT 5:30", "yyyy-MM-dd")]);