Membuat Formulir atau Dashboard Interaktif

Mau buat formulir interaktif atau dashboard di Google Sheets?

📌 Formulir Interaktif

Bisa dibuat dengan Google Forms (otomatis masuk ke Sheets)
Bisa juga pakai HTML+Apps Script untuk lebih custom

📌 Dashboard Interaktif

Bisa pakai Google Sheets dengan Apps Script
Bisa ada tombol, filter, grafik, dan otomatisasi data

contohnya

Berikut contoh Formulir Interaktif dengan Apps Script yang bisa menginput data langsung ke Google Sheets tanpa Google Forms.

Fitur:

✅ Formulir input data langsung di Google Sheets
✅ Data otomatis tersimpan ke Spreadsheet
✅ Tampilan HTML sederhana

Langkah 1: Buat Spreadsheet

Buka Google Sheets dan buat sheet baru, beri nama "Data".
Buat header di baris pertama, misalnya: Nama, Email, Pesan.
Buka Extensions → Apps Script untuk menambahkan kode.

Langkah 2: Tambahkan Apps Script

Di editor Apps Script, tambahkan kode berikut:

javascript
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Formulir');
}

function submitData(form) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
  sheet.appendRow([form.nama, form.email, form.pesan, new Date()]);
  return "Data berhasil dikirim!";
}

Langkah 3: Buat File HTML untuk Formulir

Di Apps Script, klik File → New → HTML lalu beri nama Formulir.html, lalu tambahkan kode ini:

html
<!DOCTYPE html>
<html>
  <body>
    <h2>Formulir Input Data</h2>
    <form onsubmit="submitForm(event)">
      Nama: <input type="text" id="nama" required><br><br>
      Email: <input type="email" id="email" required><br><br>
      Pesan: <textarea id="pesan" required></textarea><br><br>
      <button type="submit">Kirim</button>
    </form>
    <p id="status"></p>

    <script>
      function submitForm(e) {
        e.preventDefault();
        var formData = {
          nama: document.getElementById("nama").value,
          email: document.getElementById("email").value,
          pesan: document.getElementById("pesan").value
        };

        google.script.run.withSuccessHandler(function(response) {
          document.getElementById("status").innerText = response;
        }).submitData(formData);
      }
    </script>
  </body>
</html>

Langkah 4: Jalankan Formulir

Simpan semua file di Apps Script.
Klik Deploy → New Deployment, pilih Web App.
Set access ke "Anyone", lalu klik Deploy.
Dapatkan URL Web App, lalu buka di browser untuk mengisi formulir.

Hasil

🎯 Setiap kali seseorang mengisi formulir, datanya langsung masuk ke Google Sheets di tab "Data"!

SEMUA DEH ADA DISINI