Build powerful forms
without a backend.

1"use client";
2import { useState } from "react";
3
4export default function ContactForm() {
5  const [status, setStatus] = useState<{
6    loading: boolean;
7    success: boolean;
8    error: string | null;
9  }>({ loading: false, success: false, error: null });
10
11  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
12    e.preventDefault();
13    setStatus({ loading: true, success: false, error: null });
14
15    const form = e.currentTarget;
16    const formData = new FormData(form);
17    const data = Object.fromEntries(formData.entries());
18
19    try {
20      const response = await fetch("https://api.formlynk.io/api/v1/forms/submit", {
21        method: "POST",
22        headers: {
23          "Content-Type": "application/json",
24          "X-API-Key": process.env.NEXT_PUBLIC_FORM_API_KEY!,
25        },
26        body: JSON.stringify({
27          form_id: "contact",
28          ...data,
29        }),
30      });
31
32      const result = await response.json();
33      if (response.ok && result.success) {
34        setStatus({ loading: false, success: true, error: null });
35        form.reset();
36      } else {
37        setStatus({
38          loading: false,
39          success: false,
40          error: result.error?.message || "Submission failed. Please try again.",
41        });
42      }
43    } catch (err) {
44      setStatus({ loading: false, success: false, error: "Network connection error." });
45    }
46  }
47
48  return (
49    <form onSubmit={handleSubmit} className="space-y-4">
50      {/* Honeypot field (hidden from real users, traps automated bots) */}
51      <input
52        type="text"
53        name="_gotcha"
54        style={{ display: "none" }}
55        tabIndex={-1}
56        autoComplete="off"
57      />
58
59      <div>
60        <label htmlFor="name" className="block text-sm font-medium text-slate-700">Name</label>
61        <input id="name" type="text" name="name" required className="w-full border px-3 py-2 rounded" />
62      </div>
63
64      <div>
65        <label htmlFor="email" className="block text-sm font-medium text-slate-700">Email</label>
66        <input id="email" type="email" name="email" required className="w-full border px-3 py-2 rounded" />
67      </div>
68
69      <div>
70        <label htmlFor="message" className="block text-sm font-medium text-slate-700">Message</label>
71        <textarea id="message" name="message" required rows={4} className="w-full border px-3 py-2 rounded" />
72      </div>
73
74      {status.error && <p className="text-sm text-red-600">{status.error}</p>}
75      {status.success && <p className="text-sm text-green-600">Thank you! Your message was received.</p>}
76
77      <button
78        type="submit"
79        disabled={status.loading}
80        className="px-5 py-2.5 bg-ink text-white font-medium rounded hover:bg-black transition"
81      >
82        {status.loading ? "Sending..." : "Send Message"}
83      </button>
84    </form>
85  );
86}