React Ya Next.js Me Contact Form Kaise Add Kare Bina Backend Ke

Tumne React ya Next.js app bana liya hai aur ab contact form chahiye. Traditional tarika hai — API route banao, SendGrid ya Nodemailer configure karo, server pe validation likho, error states handle karo. Ek simple "mujhe message bhejo" form ke liye bahut zyada kaam hai.

Rowen ke saath ye sab skip ho jaata hai. Apne form ko Rowen endpoint pe point karo, aur submissions tumhare dashboard me store ho jaayengi, tumhe email aayega, aur chahiye toh Google Sheets me bhi sync ho jaayega. Aao step by step dekhte hain.

Kya Chahiye

• Ek React ya Next.js project (Pages Router aur App Router dono ke saath kaam karta hai)
• Ek free Rowen account — rowen.in/signup pe sign up karo

Step 1 — Rowen Endpoint Lo

Rowen dashboard me login karo aur "+ New Form" pe click karo. Endpoint URL copy karo:

https://rowen.in/api/f/YOUR_FORM_ID

Step 2 — Form Component Banao

Ye dekho ek complete, production-ready contact form component jisme loading state, error handling, aur success feedback sab hai:

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle"); // idle | loading | success | error

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("loading");

    const formData = new FormData(e.target);

    try {
      const res = await fetch("https://rowen.in/api/f/YOUR_FORM_ID", {
        method: "POST",
        body: formData,
      });

      if (res.ok) {
        setStatus("success");
        e.target.reset();
      } else {
        setStatus("error");
      }
    } catch (err) {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Tumhara naam" required />
      <input type="email" name="email" placeholder="Tumhara email" required />
      <textarea name="message" placeholder="Tumhara message" rows={5} required />

      {/* Honeypot spam protection */}
      <input type="text" name="_gotcha" style={{ display: "none" }} />

      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Bhej rahe hain..." : "Message Bhejo"}
      </button>

      {status === "success" && <p>Message bhej diya gaya!</p>}
      {status === "error" && <p>Kuch gadbad ho gayi. Dobara try karo.</p>}
    </form>
  );
}

Step 3 — Page Me Use Karo

Component ko jahan chahiye wahan import karo:

import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
  return (
    <main>
      <h1>Humse Baat Karo</h1>
      <ContactForm />
    </main>
  );
}

Next.js App Router: Server Actions?

Agar tum Next.js App Router use kar rahe ho aur server actions prefer karte ho, toh bhi Rowen use kar sakte ho. Lekin sabse simple approach hai ki form ko client component rakho (file ke top pe "use client" add karo) aur upar dikhaya gaya fetch pattern use karo. Server action se route karne ka koi fayda nahi jab Rowen ka endpoint already sab kuch server-side handle kar raha hai.

TypeScript Version

Agar tumhara project TypeScript use karta hai, toh ye dekho typed version submit handler ka:

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  setStatus("loading");

  const formData = new FormData(e.currentTarget);

  try {
    const res = await fetch("https://rowen.in/api/f/YOUR_FORM_ID", {
      method: "POST",
      body: formData,
    });
    setStatus(res.ok ? "success" : "error");
    if (res.ok) e.currentTarget.reset();
  } catch {
    setStatus("error");
  }
}

Form Ko Style Karo

Rowen koi styling force nahi karta. Form ek standard HTML form hai, toh tum Tailwind, CSS Modules, styled-components, ya plain CSS — kuch bhi use kar sakte ho. Ye dekho ek quick Tailwind example:

<input
  type="text"
  name="name"
  className="w-full rounded border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
  placeholder="Tumhara naam"
  required
/>

Backend Code Likhe Bina Kya Milta Hai

• Saari submissions Rowen dashboard me stored
• Har submission pe email notification
• Honeypot se spam filtering (CAPTCHA ki zaroorat nahi)
• Google Sheets sync (free)
• Webhook forwarding Slack, Discord, ya kisi bhi URL pe

Summary

React ya Next.js me contact form ke liye API route, database, ya email service ki zaroorat nahi. Rowen ke saath ek single client component likho, endpoint pe point karo, aur kaam ho gaya. Free account banao rowen.in/signup pe aur do minute me form chalu karo.