I have this feedback form created, and I want to receive an email whenever there's a submission with the details and clear the form afterwards. The code that I have only clear the dropdown list, not the "message" part.
Result: – On New Form Submission
- Notify me via email with details of submission
- Grab email of the submitter at the back end without adding email form field and add to my sheets
- Clear or reset form (Currently it doesn't reset all fields in the form)
Code Gs:
var folderID = ""; //Replace the "root"with folder ID to upload files to a specific folder
var sheetName = "Data"; //Replace the "Data" with your data sheet name
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function uploadFiles(formObject) {
try {
var folder = DriveApp.getFolderById(folderID);
var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
var fileUrl = "";
var fileName = "";
//Upload file if exists and update the file url
if (formObject.myFile.length > 0) {
var blob = formObject.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " formObject.need);
fileUrl = file.getUrl();
fileName = file.getName();
} else{
fileUrl = "Record saved without a file";
}
//Saving records to Google Sheet
sheet.appendRow([
formObject.need,
formObject.message,
fileName,
fileUrl,
Utilities.formatDate(new Date(), "GMT 5:30", "yyyy-MM-dd")]);
// Return the URL of the saved file
return fileUrl;
} catch (error) {
return error.toString();
}
}
Index html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<?!= include('JavaScript'); ?>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: #161615;
background-image: linear-gradient(180deg, #161615 0%, #0f5e59 17%, #20abad 63%, #000000 100%);
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
color: white;
font-variant: small-caps;
text-align: center;
font-weight: bold;
padding: 15px 0px 15px 0px;
}
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>IM Enhancement Request Form</h1> </div>
<div >
<div >
<div >
<div >
<div >
<form id="myForm" onsubmit="handleFormSubmit(this)">
<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 Request--</option>
<option>Add Queue</option>
<option>Add Application</option>
<option>Update App 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>
<div >
<div >
<div >
<label for="FormControlFile">Upload File (Optional)</label>
<input name="myFile" type="file" id="FormControlFile" /> </div>
</div>
</div>
</div>
<br>
<div >
<input type="submit" value="Submit Request"> </div>
<br>
<div >
<div >
<div >
<label for="FormControlFile">Note: Do you want to request for additional queues and applications to be added to our Application Directory? Submit your request by selecting "Add Queue" or "Add Application" option. For feedback and suggestions, please choose "Other".</label>
</div>
</div>
</div>
<br>
<div id="output"></div>
</form>
</div>
</div>
</div>
<!-- /.8 -->
</div>
<!-- /.row-->
</div>
</div>
</body>
</html>
JS
<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.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
}
function handleFormSubmit(formObject){
google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
if(isValidURL(url)){
div.innerHTML = '<div role="alert"><a href="' url '">File uploaded successfully!</a></div>';
document.getElementById("myForm").reset();
}else{
//Show warning message if file is not uploaded or provided
div.innerHTML = '<div role="alert">' url '!</div>';
}
}
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = '<div role="alert">' error.message '!</div>';
}
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\ ~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\ .~#?&//=]*)/g);
return (res !== null);
}
</script>
CodePudding user response：
SUGGESTION:
You might want to look into these available services.
- GmailApp.sendEmail - For you to be able to send an email, for the body content, you can create/modify an HTML code structure to fetch the submitted data inside the body of the message.
- Fetching submitters email - This can be a little tricky because you would need to integrate Google Sign in to your Web App to be able to pull this off. This might be the good time to recommend using Google Forms instead since the feature is already built in.
Grab email of the submitter at the back end without adding email form field and add to my sheets
- Clearing form input after submission is already answered here:
CodePudding user response：
I got this solved for grabbing their email using this code: Session.getActiveUser().getEmail() And i added this to reset the form. $("#need").prop("selectedIndex", 0); $("#message").val('');