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 class="formcontainer">
<div class=" text-center mt-5 ">
<h1>IM Enhancement Request 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-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 Request--</option>
<option>Add Queue</option>
<option>Add Application</option>
<option>Update App 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>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="FormControlFile">Upload File (Optional)</label>
<input name="myFile" class="form-control-file" type="file" id="FormControlFile" /> </div>
</div>
</div>
</div>
<br>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send pt-2 btn-block" value="Submit Request"> </div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<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 class="alert alert-success" 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 class="alert alert-danger" role="alert">'+ url +'!</div>';
}
}
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = '<div class="alert alert-danger" 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>
