Download Perangkat Ajar di Website Kurmer

Cara Mudah Submit Formulir ke Spreadsheet google

Cara Mudah Submit Formulir ke Spreadsheet google, Pada tutorial ini saya ingin menuliskan langkah-langkah submit formulir ke google.
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
  4.  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()
      }
    } 
  5. Jangan lupa Simpan Projek

Jalankan Setup Function

  1. Klik Run > Run Function > Initial Setup
  2. untuk lebih mudahnya, samakan settingannya dengan gambar berikut
  3. Setelah itu akan muncul popup Dibutuhkan otorisasi klik Tinjau izin
  4. Silahkan masuk dengan Akun Google dan klik tulisan Lanjutan > Buka Project {Nama Projek} (tidak aman)
  5. 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
  3. 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
  4. 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 (emailKamu@gmail.com)
  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
Saat ini persiapan untuk membuat Formulir yang nantinya akan disubmit ke google spreadsheet telah siap, selanjutnya tinggal kita bermain di bagian html

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:
  5.   <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.

Jika header row di spreadsheet kalian berbeda dengan tutorial ini, kalian dapat menyesuaikan pada name yang ada di input.
Contohnya <input type="text" name="subjek" placeholder="Tulis Subjek disini..."> ubah name="subjek" menjadi name="nama header di spreadsheet google"
Kalo <form name="submit-to-google-sheet"> name di form kalian berbeda juga, kalian juga harus mengubah const form = document.forms['submit-to-google-sheet'] menjadi const form = document.forms['name-form-kalian']
Saya hampir lupa, dengan script yang diatas, setelah user berhasil mengirimkan pesan maka tidak ada perubahan yang terjadi di halaman Front end karena itulah, kalian boleh banget memanipulasi html dengan script.
Tapi, saya tidak melakukan itu. Saya hanya akan melakukan reset form ketika user sudah berhasil mengirimkan pesan, dengan cara menambahkan code berikut ini form.reset() pada kondisi ketika user berhasil mengirimkan pesan, sehingga script lengkap di halaman kontak akan seperti ini:
  
<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>
  

Nah, itulah Cara Mudah Submit Formulir ke Spreadsheet google Semoga tutorial ini dapat bermanfaat.

Sumber:
Github

Orang biasa yang memiliki tingkat kemalasan naik - turun.

1 komentar

  1. Terima kasih telah membuat artikel ini. Mudah dan sangat membantu. Lanjutkan karyanya ya mas, sukses selalu.