React + n8n Integration: From Form to Slack Workflow

React + n8n Integration: Send Form Data to Slack

Especially beginner Frontend developers know the pain — you just wanted to send a simple form, and suddenly you’re writing a backend, setting up an Express server, and dealing with CORS errors. 🙃

Enter n8n. Your backend-free automation wizard.

In this guide, we’ll:

• Build a form in React.
• Create an n8n workflow that sends the data to Slack.
• (Optionally) Add Google Sheets logging.

Prerequisites

• One React app
• An n8n account (self-hosted or cloud)
• A Slack workspace with a bot token
• And curiosity

Step 1: Set Up n8n Workflow

1. Create a new workflow → Name it FormToSlack.
2. Add a Webhook node → Method: POST.

1. Add a Slack node → Action: Send Message.

     New form submission! 🎉
     👤 Name: {{$json["name"]}}
     📧 Email: {{$json["email"]}}
     

1. (Optional) Add Google Sheets node → Action: Add Row.

Click Execute Workflow → Wait for webhook → Done.

n8n side = ready. ✅

Step 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("Sending...");

    try {
      const response = await fetch(
        "https://your-n8n-instance.com/webhook/form-submit",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(formData),
        }
      );
      if (response.ok) setStatus("Success 🎉");
      else setStatus("Something went wrong 😕");
    } catch {
      setStatus("Connection error 😭");
    }
  };

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

export default App;

Now hit Send — and check Slack. You’ll see:
> Name: Cansu
> Email: [email protected]

🎉 Congratulations — your React app just talked to Slack without any backend.

Step 3: Go Further

• Add Google Sheets → log all submissions.
• Add an Email node → send a thank-you message.
• Secure your Webhook with API keys.

💡 Why This Matters for Frontend Devs

You can finally:

• Skip server setup.
• Build real-world automations.
• Learn API integration visually.