通過Google表單將內嵌圖像插入到自動電子郵件回復中

Question

我正在嘗試在自動發送的電子郵件中插入公司徽標，該電子郵件將發送給通過我們的網站（鏈接到Google表單）填寫表格的客戶。 我正在使用腳本生成自動電子郵件，但似乎無法找出如何插入嵌入式圖像。 我目前正在鏈接到我們擁有的在線圖像，但效果不佳，因為長寬比似乎會根據所使用的設備而有所不同。

有人可以在下面修改我的代碼，以便與內嵌圖片一起使用。 非常感謝。

/**
 * @OnlyCurrentDoc  Limits the script to only accessing the current form.
 */

var DIALOG_TITLE = 'Example Dialog';
var SIDEBAR_TITLE = 'Example Sidebar';

/**
 * Adds a custom menu with items to show the sidebar and dialog.
 *
 * @param {Object} e The event parameter for a simple onOpen trigger.
 */
function onOpen(e) {
  FormApp.getUi()
      .createAddonMenu()
      .addItem('Show sidebar', 'showSidebar')
      .addItem('Show dialog', 'showDialog')
      .addToUi();
}

/**
 * Runs when the add-on is installed; calls onOpen() to ensure menu creation and
 * any other initializion work is done immediately.
 *
 * @param {Object} e The event parameter for a simple onInstall trigger.
 */
function onInstall(e) {
  onOpen(e);
}

/**
 * Opens a sidebar. The sidebar structure is described in the Sidebar.html
 * project file.
 */
function showSidebar() {
  var ui = HtmlService.createTemplateFromFile('Sidebar')
      .evaluate()
      .setTitle(SIDEBAR_TITLE);
  FormApp.getUi().showSidebar(ui);
}

/**
 * Opens a dialog. The dialog structure is described in the Dialog.html
 * project file.
 */
function showDialog() {
  var ui = HtmlService.createTemplateFromFile('Dialog')
      .evaluate()
      .setWidth(350)
      .setHeight(170);
  FormApp.getUi().showModalDialog(ui, DIALOG_TITLE);
}

/**
 * Appends a new form item to the current form.
 *
 * @param {Object} itemData a collection of String data used to
 *     determine the exact form item created.
 */
function addFormItem(itemData) {
  // Use data collected from sidebar to manipulate the form.
  var form = FormApp.getActiveForm();
  switch (itemData.type) {
    case 'Date':
      form.addDateItem().setTitle(itemData.name);
      break;
    case 'Scale':
      form.addScaleItem().setTitle(itemData.name);
      break;
    case 'Text':
      form.addTextItem().setTitle(itemData.name);
      break;
  }
}

/**
 * Queries the form DocumentProperties to determine whether the formResponse
 * trigger is enabled or not.
 *
 * @return {Boolean} True if the form submit trigger is enabled; false
 *     otherwise.
 */
function getTriggerState() {
  // Retrieve and return the information requested by the dialog.
  var properties = PropertiesService.getDocumentProperties();
  return properties.getProperty('triggerId') != null;
}

/**
 * Turns the form submit trigger on or off based on the given argument.
 *
 * @param {Boolean} enableTrigger whether to turn on the form submit
 *     trigger or not
 */
function adjustFormSubmitTrigger(enableTrigger) {
  // Use data collected from dialog to manipulate form.

  // Determine existing state of trigger on the server.
  var form = FormApp.getActiveForm();
  var properties = PropertiesService.getDocumentProperties();
  var triggerId = properties.getProperty('triggerId');

  if (!enableTrigger && triggerId != null) {
    // Delete the existing trigger.
    var triggers = ScriptApp.getUserTriggers(form);
    for (var i = 0; i < triggers.length; i++) {
      if (triggers[i].getUniqueId() == triggerId) {
        ScriptApp.deleteTrigger(triggers[i]);
        break;
      }
    }
    properties.deleteProperty('triggerId');
  } else if (enableTrigger && triggerId == null) {
    // Create a new trigger.
    var trigger = ScriptApp.newTrigger('respondToFormSubmit')
        .forForm(form)
        .onFormSubmit()
        .create();
    properties.setProperty('triggerId', trigger.getUniqueId());
  }
}

/**
 * Responds to form submit events if a form summit trigger is enabled.
 * Collects some form information and sends it as an email to the form creator.
 *
 * @param {Object} e The event parameter created by a form
 *      submission; see
 *      https://developers.google.com/apps-script/understanding_events
 */
function respondToFormSubmit(e) {
  if (MailApp.getRemainingDailyQuota() > 0) {
    var form = FormApp.getActiveForm();
    var message = 'There have been ' + form.getResponses().length +
        ' response(s) so far. Latest Response:\n';
    var itemResponses = e.response.getItemResponses();
    for (var i = 0; i < itemResponses.length; i++) {
      var itemTitle = itemResponses[i].getItem().getTitle();
      var itemResponse = JSON.stringify(itemResponses[i].getResponse());
      message += itemTitle + ': ' + itemResponse + '\n';
    }
    MailApp.sendEmail(
        Session.getEffectiveUser().getEmail(),
        'Form response received for form ' + form.getTitle(),
        message,
        {name: 'Forms Add-on Template'});
  }
}


/* Send Confirmation Email with Google Forms */


function Initialize() {

    var triggers = ScriptApp.getProjectTriggers();

    for (var i in triggers) {
        ScriptApp.deleteTrigger(triggers[i]);
    }

    ScriptApp.newTrigger("SendConfirmationMail")
        .forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
        .onFormSubmit()
        .create();

}



function SendConfirmationMail(e) {

    try {

        var ss, bcc, sendername, subject, columns, submitter;
        var message, value, textbody, sender, aliases;

        // Log the aliases for this Gmail account and send an email as the first one.
        var aliases = GmailApp.getAliases();

        // This is your email address and you will be in the CC
        bcc = aliases[0];

        // This will show up as the sender's name
        sendername = "The Flatser Team";

        // This is the submitter's name
        submitter = e.namedValues["Full Name"].toString();

        // This is the submitter's email address
        sender = e.namedValues["Email Address"].toString();

        // Optional but change the following variable
        // to have a custom subject for Google Docs emails
        subject = "Please select a call time";

        // This is the body of the auto-reply
        message = "Dear "+ submitter + ", <br/><br/>Thank you for completing our form. Please fill in your availability for a telephone or skype call using the link below.<br/><br/>https://calendly.com/bcwolf/flatser-skype-call/06-23-2015<br/><br/><br/>Kind regards,<br/><br/>--<br/><br/><b>The Flatser Team</b><br/><a href='www.flatser.com'>www.flatser.com</a><br/><br/><img width='10%' height='10%' src='http://flatser.com/img/logo1.png'/>";

        ss = SpreadsheetApp.getActiveSheet();
        columns = ss.getRange(1, 1, 1, ss.getLastColumn()).getValues()[0];


        textbody = message.replace("<br>", "\n");

        GmailApp.sendEmail(sender, subject, textbody, 
                            {bcc: bcc, name: sendername, htmlBody: message, from: aliases[0] });

    } catch (e) {
        Logger.log(e.toString());
    }

} 

Answer 1

您可以使用媒體查詢根據電子郵件中的不同設備設置不同的寬度。

在您的情況下，我會將<style>放在函數SendConfirmationMail的消息變量中，並在該消息變量內的img標簽中添加類，該類將如下所示：

消息正文（假設您需要在移動設備上使用100px寬的徽標，在較大的屏幕上需要200px寬。另外請注意不要設置高度，因為如果計算不正確，它將破壞寬高比）

 // This is the body of the auto-reply
 // This is what i would add 
 message = "<style> @media (max-width:499px) { .logo__flaster { width: 100px; } @media (min-width:500px) { .logo__flaster { width: 200px; } </style>"

 // This is same, i have only removed width from img and added class logo__flaster which i used in the style above.
 message += "Dear "+ submitter + ", <br/><br/>Thank you for completing our form. Please fill in your availability for a telephone or skype call using the link below.<br/><br/>https://calendly.com/bcwolf/flatser-skype-call/06-23-2015<br/><br/><br/>Kind regards,<br/><br/>--<br/><br/><b>The Flatser Team</b><br/><a href='www.flatser.com'>www.flatser.com</a><br/><br/><img class='logo__flaster' src='http://flatser.com/img/logo1.png'/>";

有關更多信息，請閱讀HTML電子郵件中的媒體查詢文章，如果您想針對特定屏幕進行更多自定義，請參閱更多媒體查詢模板 。