Cara Menangani Pengiriman Form Webflow Tanpa Backend Kustom

Formulir kontak di Webflow memang terlihat bagus secara default, tapi Webflow hanya mengirimkan data pengisian via email ke pemilik situs - tidak ada penyimpanan ke database, tidak ada koneksi ke CRM, dan tidak ada logika kustom yang bisa dipicu. Kalau kamu butuh lebih dari sekadar notifikasi email biasa, kamu perlu mengarahkan kiriman formulir Webflow ke layanan eksternal. Kabar baiknya, ini bisa dilakukan tanpa menulis satu baris pun kode backend.

Apa yang Webflow Berikan Secara Default

Handler formulir bawaan Webflow melakukan tiga hal: mengirim notifikasi email ke pemilik situs, menampilkan pesan sukses, dan mencatat kiriman di dasbor Webflow (khusus paket berbayar). Ini cukup untuk formulir kontak sederhana di situs kecil, tapi langsung terasa kurang begitu kamu butuh salah satu dari hal berikut:

• Auto-responder ke orang yang mengisi formulir
• Kiriman diteruskan ke kotak masuk tim tertentu atau CRM
• Logika kondisional (misalnya, arahkan lead berdasarkan minat produk)
• Filter spam yang lebih canggih dari honeypot bawaan Webflow
• Catatan pengiriman yang andal lengkap dengan timestamp dan mekanisme retry

Semua itu tidak tersedia secara native. Kamu butuh lapisan eksternal, dan ada tiga cara realistis untuk menambahkannya.

Integrasi Native - Zapier dan Make

Webflow memiliki integrasi langsung dengan Zapier dan Make (sebelumnya Integromat). Setiap kali ada kiriman formulir baru masuk, trigger akan aktif dan kamu bisa merangkai aksi apa pun: tambah baris ke Google Sheets, buat kontak di HubSpot, kirim pesan Slack, dan sebagainya.

Ini adalah jalur no-code yang paling sering dipilih para desainer. Langkah pengaturannya seperti ini:

1. Di Webflow, buka Pengaturan Proyek > Integrasi dan hubungkan akun Zapier kamu.
2. Di Zapier, buat Zap baru dengan Webflow - New Form Submission sebagai trigger.
3. Pilih formulir tertentu berdasarkan namanya.
4. Tambahkan langkah aksi (Gmail, Slack, Airtable, dll.).
5. Uji dengan kiriman nyata lalu aktifkan Zap-nya.

Make lebih murah untuk alur kerja yang kompleks, tapi kedua platform ini menambah ketergantungan: kalau Zapier atau Make mengalami gangguan atau akunmu mencapai batas limit, kiriman formulir bisa gagal tanpa pemberitahuan atau menumpuk di antrean.

Menggunakan Webflow Webhook

Webflow webhook adalah jalur yang lebih langsung. Webflow mengirimkan HTTP POST ke URL yang kamu tentukan setiap kali ada formulir yang dikirim. Kamu yang mengontrol endpoint penerima, jadi kamu bisa melakukan apa pun dengan payload-nya.

Cara mengaturnya:

1. Buka Pengaturan Proyek > Integrasi > Webhooks di Webflow.
2. Klik Tambah Webhook , pilih trigger Form Submission .
3. Tempelkan URL endpoint layanan penerima kamu.
4. Simpan dan uji dengan kiriman nyata.

Payload yang dikirim Webflow adalah objek JSON berisi semua nilai field, nama formulir, dan metadata situs. Contoh payload-nya terlihat seperti ini:

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

Kendalanya: kamu butuh sesuatu untuk menerima webhook tersebut. Pilihannya antara lain sebuah Cloudflare Worker kecil, alur kerja Pipedream, atau backend formulir khusus. Membuat receiver sendiri adalah persis masalah "backend kustom" yang coba dihindari artikel ini. Di sinilah layanan form-to-email menjadi solusi paling bersih.

Ganti Endpoint Formulir dengan Layanan Form

Daripada menggunakan handler formulir bawaan Webflow sama sekali, kamu bisa mengarahkan atribut action formulir ke layanan form pihak ketiga. Layanan tersebut menerima POST, memvalidasinya, memfilter spam, lalu mengirimkan hasilnya ke emailmu. Tidak perlu backend di sisi kamu.

Alur kerjanya di Webflow adalah:

1. Di Webflow Designer, pilih elemen formulir kamu.
2. Di panel Pengaturan Formulir , isi field Action dengan URL endpoint layanan form kamu (misalnya, https://sendform.net/!your-form-id ).
3. Atur Method ke POST .
4. Pastikan setiap input memiliki atribut name - Webflow sudah mengaturnya secara default.
5. Publikasikan situs dan uji pengiriman formulir.

Pendekatan ini sepenuhnya melewati handler formulir Webflow. Kiriman langsung dikirim dari browser pengunjung ke layanan form. Kamu mendapat email, layanan tersebut menangani retry dan spam, sementara Webflow hanya berfungsi sebagai lapisan antarmuka.

Pola yang sama berlaku untuk situs statis atau no-code apa pun. Kalau kamu juga hosting di GitHub Pages atau Cloudflare Pages, artikel tentang hosting situs statis secara gratis dengan formulir kontak yang berfungsi membahas pendekatan yang persis sama.

Sendform vs. Alternatif Lainnya

Ada beberapa layanan form yang kompatibel dengan Webflow. Berikut perbandingan opsi utamanya berdasarkan hal-hal yang benar-benar penting untuk pengaturan formulir kontak:

Sendform unggul karena beberapa alasan konkret yang tidak cukup ditampilkan dalam tabel:

• Pengaturan tanpa hambatan: Kamu langsung mendapat URL endpoint formulir tanpa perlu membuat akun terlebih dahulu. Tempel ke field Action di Webflow, selesai.
• Tidak menyimpan kiriman secara default: Sendform meneruskan data via email dan tidak menyimpannya di server mereka - ini adalah default yang tepat untuk kepatuhan GDPR. Kompetitor seperti Formspree menyimpan semua kiriman di dasbor mereka, yang berarti data pengguna kamu tersimpan di server pihak ketiga tanpa batas waktu.
• Ramah developer tapi bisa dipakai tanpa koding: Tidak seperti Zapier, tidak ada alur kerja yang perlu dirawat. Tidak seperti Netlify Forms, tidak terikat pada hosting tertentu - bisa dipakai dengan Webflow, GitHub Pages, atau host apa pun.
• Paket gratis yang jujur: Tidak ada batasan tersembunyi seperti "upgrade untuk membuka fitur redirect" yang sering dipakai layanan lain untuk mendorong kamu ke paket berbayar.

Pendekatan Mana yang Harus Dipilih?

Jawaban yang tepat bergantung pada apa yang sebenarnya kamu butuhkan setelah formulir dikirim:

• Hanya notifikasi email: Gunakan Sendform. Tempel URL endpoint ke field Action di Webflow, selesai dalam dua menit.
• Email + sinkronisasi CRM atau spreadsheet: Gunakan Sendform untuk pengiriman email, lalu opsional tambahkan langkah Zapier yang dipicu oleh email masuk, atau gunakan output webhook Sendform jika tersedia di paket kamu.
• Otomasi multi-langkah yang kompleks: Webflow webhook ke Make atau Zapier masuk akal di sini, tapi siapkan anggaran untuk paket berbayar.
• Kamu sudah menggunakan Netlify: Netlify Forms cukup untuk kasus sederhana, tapi batas 100 kiriman per bulan akan cepat habis di situs yang aktif.

Untuk sebagian besar formulir kontak Webflow - field nama, email, dan pesan yang perlu masuk ke kotak masuk kamu secara andal - Sendform adalah jalur tercepat dan paling bersih. Tidak perlu backend, tidak ada batas task bulanan yang perlu dipantau, dan tidak ada data kiriman yang tersimpan di dasbor pihak ketiga yang terlupakan.

Tangani formulir kontak Webflow kamu tanpa menulis backend

Sendform memberi kamu endpoint formulir siap pakai yang bisa langsung ditempel ke field Action di Webflow - kiriman formulir Webflow kamu langsung masuk ke kotak masuk, lengkap dengan filter spam dan pengaturan default yang ramah GDPR.

Coba Sendform Gratis →