#JP94 Mengirim Hasil Google Form Otomatis via Email (Auto Update Script)

Mengirim Hasil Google Form Otomatis via Email (Auto Update Script Semua Tipe Pertanyaan)




1. Buatlah Google Form





2. Sesuaikan/buatlah  pertanyaan pada Google Form dan buatlah Responses Spreadsheetnya.


3. Pergi ke menu Setelan samakan pengaturannya dengan gambar di bawah ini.


Sehingga pada Pertanyaan di paling atas akan bertambah mewajibkan memasukkan Email.


4. Buatlah Spreadsheet baru lagi untuk menyimpan mailteks. Ganti nama sheet1 menjadi mailteks.



5. Buatlah lembar kerja Apps Script dengan cara klik tanda titik 3 (tiga) di pojok kanan atas pada Google Form, lalu pilih Editor Skrip.


6. Pada lembar kerja Apps Script terdapat file Code.gs atau Kode.gs.


7. Copy dan pastekan script di bawah ini ke Code.gs atau Kode.gs

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

//Source Code by www.javabitpro.com

const FormSettings = {
  CC_EMAIL: "support@gmail.com",
  EMAIL_TEMPLATE: "Template-Email",
  SUBJECT: "Bukti Pendaftaran",
};

function sendEmailAlert(e) {
  const formResponse = e.response;
  const itemResponses = formResponse.getItemResponses();
  var responseArray = [];
  var jsonArr = {};
  for (var j = 0; j < itemResponses.length; j++) {
    var itemResponse = itemResponses[j];
    var response = itemResponse.getResponse();
    if (itemResponse.getItem().getType() == FormApp.ItemType.FILE_UPLOAD) {
      response = `https://drive.google.com/open?id=${response}`;
    }
    responseArray.push([itemResponse.getItem().getTitle(), response]);
    jsonArr[itemResponse.getItem().getTitle()] = response;
  }
  const respondentEmail = formResponse.getRespondentEmail();

  const emailTemplate = HtmlService.createTemplateFromFile(
    FormSettings.EMAIL_TEMPLATE
  );

  emailTemplate.name = jsonArr["Nama"];
  emailTemplate.data = responseArray;

  const html = emailTemplate.evaluate().getContent();
  MailApp.sendEmail({
    to: respondentEmail,
    cc: FormSettings.CC_EMAIL,
    subject: FormSettings.SUBJECT,
    htmlBody: html,
  });

  Debug({ respondentEmail, responseArray, jsonArr });
}

const Debug = (data) => {
  const ss = SpreadsheetApp.openById("ID_SPREADSHEET");

  const sheet = ss.getSheetByName("mailteks");
  sheet.appendRow([JSON.stringify(data, null, 2)]);
};


Ganti/Sesuaikan ID_SPREADSHEET nya dengan Id Spreadsheet mailteks yang telah dibuat di atas.

8. Buatlah file html pada lembar kerja Apps Script dengan cara klik tanda Plus (+) lalu pilih html dan beri nama Template-Email.





9. Copy dan pastekan script di bawah ini ke Template-Email.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">

  <p style="margin-bottom: 20px;">
    Kepada
    <?= name ?>,
  </p>
  <p style="margin-bottom: 20px;">
    Kami telah menerima permintaan layanan Anda dan akan segera menghubungi Anda kembali.
  </p>
  <p style="margin-bottom: 20px;">Berikut ringkasan permintaan Anda:</p>

<table style="width: 100%; border-collapse: collapse; margin-bottom: 20px; background-color: #eeeeee; border-radius: 10px; overflow: hidden;">
  <thead>
    <tr style="border-bottom: 2px solid #0b5394;">
      <td colspan="2" style="padding: 10px; border: 1px solid #0b5394; background-color: #bcbcbc; text-align: center;">Header Content</td>
    </tr>
  </thead>
  <tbody>
    <? for (var i = 0; i < data.length; i++) { ?>
    <tr style="border-bottom: 1px solid #0b5394;">
      <td style="padding: 10px; border: 1px solid #0b5394; text-align: left;width:40%;">
        <?= data[i][0] ?>
      </td>
      <td style="padding: 10px; border: 1px solid #0b5394; text-align: left; width:60%;">
        <?= data[i][1] ?>
      </td>
    </tr>
    <? } ?>
  </tbody>
  <tfoot>
    <tr style="border-top: 2px solid #0b5394;">
      <td colspan="2" style="padding: 10px; border: 1px solid #0b5394; background-color: #bcbcbc; text-align: center;">Footer Content</td>
    </tr>
  </tfoot>
</table>

</body>

</html>
  <div style="text-align: left; margin-bottom: 20px;">
  <img src="https://i.imgur.com/DTHPVOz.png" alt="Deskripsi Gambar" width="10%" height="10%">
</div>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.07.31.24 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>


10. Klik ikon Save.


11. Buatlah Trigger/Pemicu dengan cara klik menu Trigger/Pemicu pada menu sebelah kiri lalu, lalu klik tombol +Add Trigger atau +Tambahkan Pemicu.


12. Samakan pengaturannya seperti gambar di bawah ini lalu klik Simpan.


13. Lakukan otorisasi perizinan (Jika diperlukan). (Tutorial ada di video)

14. Google Form siap di gunakan.

NOTE.
Jika Google Form terdapat upload file, pastikan folder penyimpan file pada Google Drive berstatus Shared

SELESAI !!!








Previous Post Next Post

Promo