Cara menggunakan form spreadsheet

Cara Mudah Submit Formulir ke Spreadsheet google - Pada tutorial ini saya ingin menuliskan langkah-langkah submit formulir ke google. Hal ini saya gunakan untuk mensubmit kontak formulir yang ada pada blog ini dan dikirimkan ke spreadsheet google, bukan mengirimkan ke email.

Langkah Submit Form Ke Spreadsheet Google

Membuat Google Spreadsheet baru

1. Masuk ke Google Spreadsheet dan buat spreadsheet baru
   
2. Ubah nama Spreadsheet menjadi Kontak Form Blogger atau apalah, terserah kalian
3. Masukkan header sesuai yang kamu butuhkan
   

Membuat Google Apps Script

1. Klik di menu Tools > Script Editor... Jika kamu menggunakan bahasa Indonesia, cari di menu Alat > Editor Skrip... Anda akan dibawa ke halaman tab baru.
2. Setelah itu, hapus function myFunction() {} yang ada di Kode.gs
3. Silahkan Copy dan paste Script di bawah ini dan klik Simpan Projek

 Script Google Spreadsheet 

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
} 

4. Jangan lupa Simpan Projek

Jalankan Setup Function

1. Klik Run > Run Function > Initial Setup
untuk lebih mudahnya, samakan settingannya dengan gambar berikut

2. Setelah itu akan muncul popup Dibutuhkan otorisasi klik Tinjau izin
3. Silahkan masuk dengan Akun Google dan klik tulisan Lanjutan > Buka Project {Nama Projek} (tidak aman)
4. Silahkan Izinkan semua yang diminta

Menambahkan Project Trigger baru

1. Silahkan klik menu Pemicu/Trigger yang ada di sebelah kiri dengan icon jam
2. Klik tombol Tambahkan Pemicu yang ada di bawah kanan
Setelah itu akan muncul pop up dialog, lakukan settingan berikut :
1. Pilih fungsi yang ingin dijalankan doPost
2. Pilih sumber acara Dari Spreadsheet / From Spreadsheet
3. Pilih jenis acara Saar mengirim formulir / On Form Submit
3. Klik Simpan dan lakukan Otorisasi kembali jika diperlukan.

Publish / Terapkan Project

1. Klik Terapkan/Publish > Deployment baru Setelah itu akan muncul popup.
2. Klik Ikon Gear > Aplikasi Web
3. Untuk pilihan jalankan sebagai, ubah menjadi Saya ([email protected])
4. Untuk pilihan yang memiliki akses, ubah menjadi Siapa saja / Anyone, even anonymous
5. Jangan lupa Publish/Terapkan
6. Copy URL Aplikasi Web yang Anda dapatkan pada pop up
7. Sudah deh, tinggal klik Selesai

Masukkan ke Halaman Blog

1. Nah, sekarang kita beralih ke Blogger > Buat Halaman Baru
2. Masukkan judul halaman Hubungi Kami atau apalah, terserah kalian.
3. Bagian menulis konten, Pindahkan ke Tampilan HTML
4. Masukkan Script berikut ini:

  <h1>Hubungi Kami</h1>
<form name="submit-to-google-sheet">
    
    <label>Nama Lengkap :</label>
    <input type="text" name="" placeholder="Tulis Nama disini...">
    
    <label>Email :</label>
    <input type="email" name="email" placeholder="Tulis Email disini...">
    
    <label>Nomor HP :</label>
    <input type="text" name="subjek" placeholder="Tulis Subjek disini...">

    <label>Pesan :</label>
    <textarea name="pesan" placeholder="Masukkan Pesan disini"></textarea>
    <button class="btn" type="submit">Kirim</button>
    
</form>


<script>
const scriptURL ='<SCRIPT URL KAMU >'
const form = document.forms['submit-to-google-sheet']

form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
})
</script>
  

Warning!
Jangan lupa untuk edit <SCRIPT URL KAMU> dengan URL Script yang kamu dapatkan setelah mempublish project.

  
<h1>Hubungi Kami</h1>
<form name="submit-to-google-sheet">
    
    <label>Nama Lengkap :</label>
    <input type="text" name="nama" placeholder="Tulis Nama disini...">
    
    <label>Email :</label>
    <input type="email" name="email" placeholder="Tulis Email disini...">
    
    <label>Subjek :</label>
    <input type="text" name="subjek" placeholder="Tulis Subjek disini...">

    <label>Pesan :</label>
    <textarea name="pesan" placeholder="Masukkan Pesan disini"></textarea>

    <button class="btn" type="submit">Kirim</button>
    
</form>


<script>
    const scriptURL ='<SCRIPT URL KAMU >'
    const form = document.forms['submit-to-google-sheet']

    form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => {
  		// Kondisi ketika user berhasil mengirimkan pesan
        console.log('Success!', response);
        form.reset();
    })
        .catch(error => console.error('Error!', error.message))
    })
</script>
  

Demo Kontak

Sumber:
Github

Bagaimana cara menghubungkan Google Form dengan spreadsheet?

Apa itu spreadsheet di Google Form?

Langkah langkah mengerjakan spreadsheet?

Kenapa Google Form tidak masuk ke spreadsheet?