Form Verilerini Google Tablolara Kaydetme - Form to Google Sheets

Form işleri genelde canımı sıkmıştır 😄 Ücretsiz deploy aldığınız servislerde (github pages, netlify vb.) veritabanı gibi servisler olmadığı, php vb. çalıştıramadığımız form sorununa bu yazıda noktayı koymayı hedefliyorum.

Bir projede mail ile uğraşmadan direk sonuçları Google Sheets üzerinden kaydetmek istedim kısa bir araştırma sonucu (ilk durak chatgpt) gayet basit ama yeterli kaynak olmadığını gördüm.

Google Sheets apps komut dosyasına JavaScript yazmamıza izin veriyor. Bizde burada gelen veriyi parse edip gerekli yerlere zaman damgası ile yerleştireceğiz.

Lafı daha fazla uzatmadan kodlara geçelim.

Başlangıç #

Google Drive > Yeni > Google E-Tablolar Oluştur

Tablo Yapısı #

Google Sheets Script Kodları #

Uzantılar > Apps Komut Dosyası

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = JSON.parse(e.postData.contents);
  
  // Veriyi diziye dönüştür
  const rowData = [    new Date(), // Timestamp
    data.name,
    data.surname,
    data.company,
    data.email,
    data.phone
  ];
  
  // Yeni satır olarak ekle
  sheet.appendRow(rowData);
  
  // Başarılı yanıt döndür
  return ContentService.createTextOutput(JSON.stringify({
    'result': 'success',
    'message': 'Veri başarıyla kaydedildi'
  })).setMimeType(ContentService.MimeType.JSON);
}

Forma Dışarıdan Veri Kaydetme #

script.google ekranında; Dağıt > Yeni Dağıtım > Tür Seçin

Web uygulaması Ayarları; Şu Kullanıcı Olarak Çalıştır: Ben Erişimi Olanlar: Herkes Daha sonra > Dağıt

Erişim yetkisi ver > Bir hesap seçin (açık olan gmail oturumunuz)

Gelişmiş seçenekleri göster diyerek güvensiz bağlantıya devam edin. Bunun sebebi sizin yayınlamak istediğiniz projenin doğrulanmamış bir uygulama olması. Sorun değil, biz form verilerini sitemizden kaydedeceğiz.

Daha sonra uygulamanın Driver erişimine izin veriyoruz bunun sebebi e-tabloya veri yazabilmesi.

Sonraki ekran önemli **Burada çıkan Dağıtım Kimliği ve Web Uygulaması alanlarında yazanı bir yere not alın. JavaScript tarafında **“YOUR_GOOGLE_APPS_SCRIPT_URL” alanına linki yazıp formu post edeceğiz.

Basit Bir Örnek Yapalım #

HTML Form Yapısı #

<form id="dataForm">
    <div>
      <label for="name">Adınız</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div>
      <label for="surname">Soyadınız</label>
      <input type="text" id="surname" name="surname" required>
    </div>
    <div>
      <label for="company">İşyeri Adınız</label>
      <input type="text" id="company" name="company" required>
    </div>
    <div>
      <label for="email">E-Posta:</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div>
      <label for="tel">Telefon:</label>
      <input type="tel" id="phone" name="phone" required>
    </div>
    <button type="submit">Gönder</button>
</form>
<div id="response"></div>

Form JavaScript Kodları #

const form = document.getElementById('dataForm');
const responseDiv = document.getElementById('response');
// Google Apps Script'in deploy edilmiş web uygulaması URL'sini buraya ekleyin
const SCRIPT_URL = 'YOUR_GOOGLE_APPS_SCRIPT_URL';
form.addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    // Loading mesajı göster
    responseDiv.innerHTML = 'Gönderiliyor...';
    responseDiv.className = '';
    fetch(SCRIPT_URL, {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
        .then(response => {
            responseDiv.innerHTML = 'Form başarıyla gönderildi!';
            responseDiv.className = 'success';
            form.reset();
        })
        .catch(error => {
            responseDiv.innerHTML = 'Bir hata oluştu. Lütfen tekrar deneyin.';
            responseDiv.className = 'error';
            console.error('Error:', error);
        });
});

“YOUR_GOOGLE_APPS_SCRIPT_URL” alanını değiştirmeyi unutmayın.

Sonuç #

Google Sheets scriptte function doOptions(e) ile cors ekleyebilirsiniz. Ek güvenlik önlemleri alabiliriz. Fikiri tohum olması açısından paylaştım, geliştirmesi sizden.

Bonus: Eğer telefon numarasını +90 ile kayıt ederseniz sheets bunu formül olarak algılayıp Error dönecektir ’${data.phone} gibi bir yol izleyip çözebilirsiniz.