I am developing a web app for my organisation, it needs to take user input add this detail to a spreadsheet so that we have trackable data and fire off an email to the user thanking them for their query. This part of the application is complete, yet I find myself stuck on the second part.
The user has a number of options to select and depending on the option selected an email should fire off to the relevant team/department with the users message. This is where I'm stuck as it's a little beyond me in terms of development skills at this point.
You'll see my code below, the first section is my index.html (note this is developed in Google App Script):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
background: linear-gradient(0deg, white, transparent 90%);
margin: 0;
font: 1.5em/1.5 Arial;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
color: rgba(255,255,255,1);
text-transform: uppercase;
font-weight: normal;
line-height: 1.3;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
margin: 12px 0 0;
}
h2 {
font-size: 3.3125em; /* 53px/16px */
font-weight: normal;
line-height: 1.1;
margin: 0 0 .5em; /* 0 0 26px */
}
/* Main Styles --------------------- */
.main-header {
padding-top: 20px;
background: linear-gradient(180deg, #141760, #007DAD, transparent 90%);
background-size: cover;
}
.title {
letter-spacing: .065em;
font-weight: 200;
border-bottom: 2px solid;
margin: 0 550px 0 550px;
padding: 10px;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.main-footer {
background: linear-gradient(10deg, #141760, #007DAD, #00AEEF, #55225D, #73498C, #9E005E, #CB007A, #00A651, #6D9C2D, #ED5913, #FBAD18, transparent 90%);
}
.input-field {
border-radius: 10px;
font-size: 24px;
width: 300px;
}
input:focus,
</style>
</head>
<body>
<div class="primary-content">
<header class="main-header">
<p class="title">Promoting the wellbeing of</p>
<h1>AUE</h1>
</header>
<div id="container" class="primary-content">
<h2>Contact us</h2>
<form id="responderForm">
First Name: <input type="text" name="firstName" class="input-field"><br><br>
Last Name: <input type="text" name="lastName" class="input-field"><br><br>
Email: <input type="email" name="email" class="input-field"><br><br>
<select id="service" class="input-field">
<option class="input-field"value=""disabled selected>Please select your option:</option>
<option id="volunteering" value="Volunteering" name="service">Volunteering</option>
<option value="Home Help Service" name="service">Home Help Service</option>
<option value="Befriending Service" name="service">Befriending Service</option>
<option value="Information & Advice" name="service">Information & Advice</option>
<option value="Advocacy" name="service">Advocacy</option>
<option value="Fundraising" name="service">Fundraising</option>
<option value="Marketing" name="service">Marketing</option>
<option value="Chief Executive Office" name="service">Chief Executive Office</option>
<option value="Invoice Query" name="service">Invoice Query</option>
<option value="Compliment" name="feedback">Compliment</option>
<option value="Comment" name="feedback">Comment</option>
<option value="Complaint" name="feedback">Complaint</option>
<option value="Reference requests" name="references">Reference Requests</option>
<option value="Reference requests" name="references">Employment Opportunities</option>
<option value="consent" name="gdprRights">Withdraw Consent</option>
<option value="rightoferasure" name="gdprRights">Right to Erasure</option>
<option value="datarequest" name="gdprRights">Data Subject Access Request</option>
</select><br><br>
<label id="enquiry_label" class="text-label">Please enter your message below:</label><br>
<p style="text-align: center;">↓</p>
<textarea id="enquiry_form" class="text-input" rows="10" cols="50"></textarea><br><br>
<input type="submit" name="submit" value="SUBMIT" class="event input-field"><br>
</form>
</div>
<footer class="main-footer">
<p>© All rights reserved to Age UK Essex</p>
</footer>
<script>
const myForm = document.querySelector('#responderForm');
console.log(myForm);
myForm.addEventListener('submit', function(e){
e.preventDefault();
let myData = {
'first' : this.querySelector('input[name="firstName"]').value,
'last' : this.querySelector('input[name="lastName"]').value,
'email' : this.querySelector('input[name="email"]').value,
'service' : this.querySelector('option[id="volunteering"]').value,
'enquiry': this.querySelector('textarea[id="enquiry_form"]').value
}
google.script.run.withSuccessHandler(onSuccess).addData(myData);
console.dir(myData);
})
function onSuccess(data){
console.log(data);
}
</script>
</div>
</body>
</html>
Here is my code.gs:
function doGet(e){
try {
var output = HtmlService.createTemplateFromFile('index');
var html = output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
catch(e){
return ContentService.createTextOutput(JSON.stringify({
'error' : e
})).setMimeType(ContentService.MimeType.JSON);
}
}
function getRandom(){
return (new Date().getTime()).toString(36);
}
function addData(data){
Logger.log(data)
var ss = SpreadsheetApp.openById('1EcjX0SjZpX7qRyDuNOKdiXovgrV3au_Z8WywPIo994Y');
var sheet = ss.getSheetByName('Response');
var user = Session.getActiveUser().getEmail();
var createdDate = Date();
var newId = getRandom();
var holder = [data.first,data.last,data.email, createdDate, newId, data.services, data.enquiry, user];
sheet.appendRow(holder);
sendAnEmail(holder);
return {
'trackingid':newId,
'status':true,
'added': holder
}
function sendAnEmail(holder){
var emailAddress = holder[2] || Session.getActiveUser().getEmail();
var message = '<h1>Thank you for your Enquiry '+holder[0]+'</h1><br><h4>Your message has been sent sucssesfully.</h4> <p> Your query has been forwarded to the relevant department and will be dealt with as soon as possible.</p> ';
var docInfo = DriveApp.getFileById('1NQUEmE-CW0aTYCYMrahK1Ejv3S1DmbndLWvVMfDWV60');
var blob = docInfo.getAs('application/pdf');
MailApp.sendEmail(emailAddress, ""+holder[0]+" your Query ID: "+holder[4]+" has been received.", '',{
htmlBody:message,
name:'Enquiry Thanks',
});
}
}
Super stuck if anyone can explain the answer to me that would be great.
Thanks in advance :)
switchoption could go crazy very fast. I usually prefer creating a dictionary and then look for the email there. - Raserhin