👋 Selamat Datang di Tutorial Ini!
Sering kali kita merasa dilematis saat membangun blog statis. Di satu sisi, performanya ngebut dan aman karena tidak ada database. Tapi di sisi lain, kita sering kebingungan pas mau bikin fitur interaktif seperti form kontak atau permintaan hapus data tanpa harus sewa VPS atau hosting backend.
Dulu, aku juga sempat bingung. Masalah utamanya bukan cuma kirim emailnya, tapi gimana cara nahan gempuran bot spam yang haus sangat ngisi form sembarangan. Nah, setelah ngulik sana-sini, akhirnya aku nemu kombinasi "tangguh" yang gratis dan super aman: **Cloudflare Turnstile** dan **Google Apps Script**. Yuk, kita bedah bareng-bareng! 🚀
🤔 Mengapa Kombinasi Ini Ideal untuk Blog Statis?
Kenapa sih tidak pakai layanan form pihak ketiga saja? Jawabannya simpel: kontrol penuh dan gratis! Dengan cara ini, data tidak "mampir" ke pihak ketiga yang tidak jelas, tapi langsung masuk ke ekosistem Google kamu sendiri.
Anti-Spam Canggih
Turnstile itu ramah banget. tidak ada lagi drama milih gambar zebra cross. Bot bakal minggat, manusia bakal lancar jaya.
Backend-less
Google Apps Script itu ibarat server gratisan yang siap siaga 24 jam buat dengerin request dari blog kamu.
Gratis Tis Tis! 🎉
Limitnya gede sangat buat ukuran blog pribadi atau web profil UMKM. Tidak bakal bikin kantong jebol.
Langkah 1: Mengatur Cloudflare Turnstile 🛡️
Turnstile adalah satpam di gardu depan blog kita. Dia yang bakal mastiin yang masuk itu beneran orang Balikpapan atau bot dari antah-berantah.
Daftar di Cloudflare
Langsung aja gas ke Dashboard Cloudflare Turnstile kamu. Pilih menu Turnstile, lalu tambahkan situs baru. Pilih mode **Managed** biar Cloudflare yang mikir gimana cara paling pas buat ngetes pengunjung.
Pasang Widget di HTML
Masukkan script API Turnstile di bagian atas halaman kamu, lalu tempelkan `div` widget di dalam form. Ingat, **Site Key** itu ibarat alamat rumah, sedangkan **Secret Key** jangan sampai ada yang tahu selain kamu dan script Google nanti.
<div class="cf-turnstile" data-sitekey="SITE_KEY_KAMU" data-callback="onSuccess"></div>Langkah 2: Mengatur Google Apps Script 📧
Buka Google Apps Script, Sekarang kita siapkan "otak" pengirim emailnya. Google Apps Script bakal nerima data dari form, ngecek validasi Turnstile, baru deh kirim email ke kamu.
Tanam Kode di Google Script
Buka *Google Script editor*, buat project baru, dan masukkan kode sakti di bawah ini. Kode ini udah lengkap dengan fitur verifikasi ke API Cloudflare biar makin aman.
function doPost(e) {
// 1. Cek apakah ada data yang masuk
if (!e || !e.parameter) {
return ContentService.createTextOutput("No data received").setMimeType(ContentService.MimeType.TEXT);
}
var data = e.parameter;
var secretKey = "SECRET_KEY_DARI_CLOUDFLARE_TURNSTILE"; // <-- GANTI DENGAN SECRET KEY KAMU!
var token = data['cf-turnstile-response'];
// 2. Verifikasi ke Cloudflare Turnstile
var verificationUrl = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
var options = {
'method' : 'post',
'payload' : {
'secret': secretKey,
'response': token
}
};
try {
var response = UrlFetchApp.fetch(verificationUrl, options);
var result = JSON.parse(response.getContentText());
if (result.success) {
// 3. JIKA LOLOS VERIFIKASI, KIRIM EMAIL
var body = "Ada permintaan hapus data baru (Cloudflare Turnstile Verified):\n\n" +
"Nama: " + (data.nama_tampilan || '-') + "\n" +
"Email: " + (data._replyto || '-') + "\n" +
"URL/ID: " + (data.url_atau_id || '-') + "\n" +
"Jenis: " + (data.jenis_data || '-') + "\n" +
"Ket: " + (data.keterangan || '-') + "\n\n" +
"Sent via Google Apps Script";
MailApp.sendEmail({
to: "[email protected]", // <-- GANTI DENGAN ALAMAT EMAIL TUJUAN KAMU!
subject: "🗑️ [website] Hapus Data: " + (data.nama_tampilan || 'Anonim'),
replyTo: data._replyto || "[email protected]", // <-- GANTI DENGAN ALAMAT EMAIL TUJUAN KAMU!
body: body
});
return ContentService.createTextOutput(JSON.stringify({ "success": true }))
.setMimeType(ContentService.MimeType.JSON);
} else {
// Gagal verifikasi Turnstile
return ContentService.createTextOutput(JSON.stringify({ "success": false, "error": "Invalid Captcha" }))
.setMimeType(ContentService.MimeType.JSON);
}
} catch (err) {
// Tangkap error jika ada masalah di MailApp atau UrlFetch
return ContentService.createTextOutput(JSON.stringify({ "success": false, "error": err.toString() }))
.setMimeType(ContentService.MimeType.JSON);
}
}**Penting:** Saat melakukan *Deployment* di Google Script, pastikan pilih akses untuk **"Anyone"** supaya blog kamu bisa kirim data tanpa perlu login akun Google.
👋 Penutup
Implementasi ini bukan cuma soal teknis, tapi soal kenyamanan pembaca. Dengan Turnstile, kita tidak lagi nyiksa pengunjung blog **Layar Kosong** dengan kuis-kuis gambar yang bikin pusing. Blog tetep statis, tapi fitur tetep dinamis dan aman.
Semoga tutorial ini ngebantu kamu yang lagi pengen bikin blog jadi lebih profesional. Kalau ada yang bingung pas pasang kodenya, tanya aja di kolom komentar ya! Sampai ketemu di update-an berikutnya! ✨