Use this to have forms email their submissions in a nicely formatted way.
- 2021-11-10: Supports images and arbitrary form structures.
function onFormSubmit(e) { | |
const itemResponses = e.response.getItemResponses(); | |
const formData = itemResponses.map((ir) => { | |
const i = ir.getItem(); | |
return { | |
'question': i.getTitle(), | |
'response': getResponse(ir), | |
}; | |
}); | |
const emailData = { | |
'to': 'foo@example.com', | |
'bcc': null, | |
'replyTo': null, | |
'name': 'Form Script', | |
'noReply': true, | |
'subject': `Form submission (${new Date().toLocaleString()})`, | |
'htmlBody': generateHtmlBody(formData), | |
'inlineImages': generateInlineImages(itemResponses), | |
}; | |
MailApp.sendEmail(emailData); | |
}; | |
function generateHtmlBody(formData) { | |
const template = HtmlService.createTemplateFromFile('Email'); | |
template.data = formData; | |
return template.evaluate().getContent(); | |
}; | |
function generateInlineImages(itemResponses) { | |
const inlineImages = {}; | |
itemResponses.forEach((ir) => { | |
const type = ir.getItem().getType(); | |
switch (type) { | |
case FormApp.ItemType.FILE_UPLOAD: | |
const fileIDs = ir.getResponse(); | |
fileIDs.forEach((fid) => { | |
inlineImages[fid] = DriveApp.getFileById(fid); | |
}); | |
break; | |
} | |
}); | |
return inlineImages; | |
}; | |
function getResponse(itemResponse) { | |
const type = itemResponse.getItem().getType(); | |
switch (type) { | |
case FormApp.ItemType.TEXT: | |
case FormApp.ItemType.PARAGRAPH_TEXT: | |
return { | |
type: 'text', | |
data: itemResponse.getResponse(), | |
}; | |
case FormApp.ItemType.FILE_UPLOAD: | |
const fileIDs = itemResponse.getResponse(); | |
return { | |
type: 'images', | |
data: fileIDs, | |
}; | |
default: | |
console.error('Unsupported item type:', type.toString()); | |
return { | |
type: 'UNSUPPORTED', | |
data: itemResponse.getResponse(), | |
}; | |
} | |
}; |
<? for (var i = 0; i < data.length; i++) { ?> | |
<div style="margin: 10px 0;"> | |
<div style="margin-bottom: 5px;"><strong><?= data[i]['question'] ?></strong></div> | |
<? if (data[i]['response']['type'] === 'images') { ?> | |
<? for (var j = 0; j < data[i]['response']['data'].length; j++) { ?> | |
<p><img src="cid:<?= data[i]['response']['data'][j] ?>" style="display:block;width:100%;max-width:600px; margin-bottom: 10px;" /></p> | |
<? } ?> | |
<? } ?> | |
<? if (data[i]['response']['type'] === 'text') { ?> | |
<div style="background: #fafafa; border-radius: 5px; padding: 5px; white-space: pre-wrap;"><?= data[i]['response']['data'] ?></div> | |
<? } ?> | |
</div> | |
<? } ?> |