Website Me Contact Form Kaise Lagaye Bina Backend Ke

Agar tumhari website static hai — matlab GitHub Pages, Netlify, ya kisi bhi simple hosting pe hai — toh tumhe pata hoga ki form banana easy hai, lekin uska data receive karna mushkil hai. HTML sirf form dikhata hai, usse kahi bhejta nahi. Iske liye backend chahiye.

Lekin ab nahi. Rowen ek aisa tool hai jo tumhare form ka data receive karta hai bina tumhe ek bhi line server code likhne ki zaroorat ke. Aao step by step dekhte hain.

Kya Chahiye?

• Ek website — HTML, React, Next.js, kuch bhi chalega jisme <form> tag ho
• Ek free Rowen account — rowen.in/signup pe bana lo

Step 1 — Rowen Pe Form Endpoint Banao

rowen.in pe signup karo aur dashboard open karo. Wahan "+ New Form" pe click karo. Rowen turant ek unique URL generate karega, kuch aisa:

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

Ye URL copy kar lo. Bas itna hi chahiye Rowen ki taraf se.

Step 2 — Apna HTML Form Likho

Ab apne HTML form ke action attribute me Rowen ka URL paste karo. Ye dekho ek complete working example:

<form action="https://rowen.in/api/f/YOUR_FORM_ID" method="POST">
  <label for="name">Naam</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Bhejo</button>
</form>

Bas. Ho gaya. Koi JavaScript nahi, koi fetch call nahi, koi API key nahi. Jab koi visitor ye form fill karke Bhejo pe click karega, data seedha Rowen ke paas jayega. Rowen usse tumhare dashboard me store karega aur tumhe email bhi bhejega.

Step 3 — Spam Protection Lagao

Rowen me built-in honeypot system hai. Ek hidden field add karo form me — bots isse fill kar dete hain, aur Rowen unhe automatically block kar deta hai:

<input type="text" name="_gotcha" style="display:none" />

Real users ko ye field dikhai nahi deti, toh unke submissions normally jaate hain. Is technique se 99% se zyada spam bots block ho jaate hain — bina kisi annoying CAPTCHA ke.

Step 4 — Custom Redirect Set Karo (Optional)

Default me Rowen ek simple "Thank you" page dikhata hai form submit hone ke baad. Agar tum apna khud ka thank-you page dikhana chahte ho, toh ye hidden input add karo:

<input type="hidden" name="_redirect" value="https://tumhari-site.com/dhanyavaad" />

Rowen data capture karega aur phir browser ko tumhare URL pe redirect kar dega.

Step 5 — Email Notifications Enable Karo

Rowen dashboard me form settings kholo. Yahan tum configure kar sakte ho:

• Email notifications — har submission pe turant email aayegi.
• Auto-reply emails — form bharne wale ko automatic confirmation email jayegi.
• Webhooks — data Slack, Discord, Zapier, ya kisi bhi custom URL pe real-time me forward hoga.

JavaScript (fetch) Se Kaise Use Kare

Agar tum chahte ho ki form submit hone pe page reload na ho, toh AJAX use kar sakte ho. Ye dekho simple example:

const form = document.querySelector("form");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(form);

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

  if (res.ok) {
    alert("Message bhej diya!");
    form.reset();
  }
});

Rowen automatically CORS headers handle karta hai, toh kisi bhi domain se cross-origin request kaam karegi.

React ya Next.js Me Kaise Use Kare

React component me pattern bilkul same hai:

async function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);

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

Koi backend route nahi, koi API middleware nahi, koi environment variables manage nahi karna. Bas Rowen endpoint pe point karo aur submit karo.

Behind the Scenes Kya Hota Hai

Jab submission aati hai, Rowen 400 milliseconds se kam me ye sab karta hai:

1. Payload validate karta hai aur spam check karta hai server-side pattern recognition se.
2. Clean data tumhare dashboard me securely store karta hai.
3. Tumhe email notification bhejta hai (agar enable hai).
4. Configure kiye hue webhooks fire karta hai.
5. User ko tumhare thank-you page pe redirect karta hai ya default confirmation dikhata hai.

Summary

Pehle static website me contact form lagane ke liye server setup karna padta tha, SMTP configure karna padta tha, validation logic likhna padta tha. Ab Rowen ke saath — ek HTML form likho, ek URL paste karo, aur baaki sab Rowen handle karega. Spam filtering, email delivery, data storage, integrations — sab kuch.

Abhi free account banao rowen.in/signup pe aur 30 seconds me apna pehla form chalu karo.