【Next.js】お問い合わせフォームの作り方をコード付きで解説

// app/contact/ContactForm.tsx
  "use client";
  
  import { useActionState } from "react";
  import { sendContact, type ContactState } from "./actions";
  
  const initialState: ContactState = { ok: false, errors: {}, values: {} };
  
  const inputClass =
    "mt-2 w-full rounded-lg border border-zinc-300 bg-white px-4 py-3 text-base outline-none focus:border-zinc-900 aria-[invalid=true]:border-red-500";
  
  export function ContactForm() {
    const [state, formAction, pending] = useActionState(sendContact, initialState);
  
    if (state.ok) {
      return (
        <p role="status" className="rounded-xl bg-zinc-100 p-6 text-sm">
          送信しました。2営業日以内にメールでご返信します。
        </p>
      );
    }
  
    return (
      <form action={formAction} noValidate className="space-y-5">
        <div>
          <label htmlFor="name" className="text-sm font-medium">お名前</label>
          <input
            id="name"
            name="name"
            autoComplete="name"
            defaultValue={state.values.name}
            aria-invalid={Boolean(state.errors.name)}
            aria-describedby={state.errors.name ? "name-error" : undefined}
            className={inputClass}
          />
          {state.errors.name && (
            <p id="name-error" className="mt-1 text-xs text-red-600">{state.errors.name}</p>
          )}
        </div>
  
        <div>
          <label htmlFor="email" className="text-sm font-medium">メールアドレス</label>
          <input
            id="email"
            name="email"
            type="email"
            autoComplete="email"
            defaultValue={state.values.email}
            aria-invalid={Boolean(state.errors.email)}
            aria-describedby={state.errors.email ? "email-error" : undefined}
            className={inputClass}
          />
          {state.errors.email && (
            <p id="email-error" className="mt-1 text-xs text-red-600">{state.errors.email}</p>
          )}
        </div>
  
        <div>
          <label htmlFor="message" className="text-sm font-medium">ご用件</label>
          <textarea
            id="message"
            name="message"
            rows={5}
            defaultValue={state.values.message}
            aria-invalid={Boolean(state.errors.message)}
            aria-describedby={state.errors.message ? "message-error" : undefined}
            className={inputClass}
          />
          {state.errors.message && (
            <p id="message-error" className="mt-1 text-xs text-red-600">{state.errors.message}</p>
          )}
        </div>
  
        <button
          type="submit"
          disabled={pending}
          className="w-full rounded-full bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-zinc-700 disabled:opacity-60"
        >
          {pending ? "送信中…" : "相談を送る"}
        </button>
        <p className="text-center text-xs text-zinc-500">2営業日以内にメールでご返信します。</p>
      </form>
    );
  }

// app/contact/actions.ts
  "use server";
  
  export type ContactState = {
    ok: boolean;
    errors: { name?: string; email?: string; message?: string };
    values: { name?: string; email?: string; message?: string };
  };
  
  export async function sendContact(
    _prev: ContactState,
    formData: FormData,
  ): Promise<ContactState> {
    const name = String(formData.get("name") ?? "").trim();
    const email = String(formData.get("email") ?? "").trim();
    const message = String(formData.get("message") ?? "").trim();
    const values = { name, email, message };
  
    const errors: ContactState["errors"] = {};
    if (!name) errors.name = "お名前を入力してください。";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      errors.email = "メールアドレスの形式を確認してください。";
    }
    if (message.length < 10) errors.message = "ご用件は10文字以上で入力してください。";
  
    if (Object.keys(errors).length > 0) {
      return { ok: false, errors, values };
    }
  
    // ここでメール送信や保存の処理を呼ぶ
    return { ok: true, errors: {}, values: {} };
  }

<section className="mx-auto grid max-w-5xl gap-12 px-6 py-24 lg:grid-cols-2">
    <div>
      <h2 className="text-3xl font-semibold tracking-tight">30分のデモを予約する</h2>
      <ul className="mt-6 space-y-3 text-sm text-zinc-600">
        <li>所要時間は30分。画面共有で実際の操作をお見せします。</li>
        <li>送信後、候補日をメールでお送りします。</li>
        <li>いただいた情報は、ご連絡のためだけに使います。</li>
      </ul>
    </div>
    <ContactForm />
  </section>