React + n8n Entegrasyonu: Formdan Slack'e Otomatik Akış

React + n8n Entegrasyonu: Form Verisini Slack’e Gönder

Özellikle yeni başlayan Frontend geliştiriciler bilir: sadece basit bir form göndermek istedin, ama bir anda kendini backend yazarken, Express server kurarken ve CORS hatalarıyla boğuşurken buldun. 🙃

İşte burada n8n sahneye çıkar. Backend’siz otomasyon sihirbazın.

Bu rehberde şunları yapacağız:

• React’te basit bir form oluşturacağız.
• Form verisini Slack’e gönderen bir n8n workflow’u kuracağız.
• (Opsiyonel) Google Sheets’e kayıt ekleyeceğiz.

Ön Gereksinimler

• Bir React uygulaması
• n8n hesabı (self-hosted veya cloud)
• Slack workspace + bot token
• Bir tutam merak

Adım 1: n8n Workflow Kurulumu

1. Yeni bir workflow oluştur → Adı: FormToSlack
2. Webhook node’u ekle → Method: POST

1. Slack node’u ekle → Action: Send Message

     Yeni form gönderimi! 🎉
     İsim: {{$json["name"]}}
     E-posta: {{$json["email"]}}
     

1. (Opsiyonel) Google Sheets node’u ekle → Action: Add Row

Execute Workflow’a tıkla → webhook isteğini bekle → tamamdır.

n8n tarafı hazır. ✅

Adım 2: React Form

import { useState } from "react";

function App() {
  const [formData, setFormData] = useState({ name: "", email: "" });
  const [status, setStatus] = useState("");

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Gönderiliyor...");

    try {
      const response = await fetch(
        "https://senin-n8n-adresin.com/webhook/form-submit",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(formData),
        }
      );
      if (response.ok) setStatus("Başarılı 🎉");
      else setStatus("Bir şeyler ters gitti 😕");
    } catch {
      setStatus("Bağlantı hatası 😭");
    }
  };

  return (
    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
      <h2>n8n Form Demo</h2>
      <form onSubmit={handleSubmit}>
        <input name="name" placeholder="İsim" onChange={handleChange} />
        <br />
        <input name="email" placeholder="E-posta" onChange={handleChange} />
        <br />
        <button type="submit">Gönder</button>
      </form>
      <p>{status}</p>
    </div>
  );
}

export default App;

Artık Gönder’e tıkla — ve Slack’e bak. Şunu göreceksin:
> İsim: Cansu
> E-posta: [email protected]

🎉 Tebrikler — React uygulaman, backend olmadan Slack’le konuştu.

Adım 3: Daha da İleri Git

• Google Sheets node’u ekle → tüm form gönderimlerini kaydet.
• E-posta node’u ekle → kullanıcıya teşekkür mesajı gönder.
• Webhook’una API anahtarı ekleyerek güvenliği artır.

💡 Frontend Geliştiriciler İçin Neden Önemli?

Artık şunları yapabilirsin:

• Sunucu kurmadan entegrasyon yap.
• Gerçek iş akışlarını otomatikleştir.
• API entegrasyonlarını görsel olarak öğren.