Handle a Next.js Form Without Another API Route

The client component sends the request and handles the JSON response returned by SmartFormify.

"use client";

import { useState } from "react";

const ENDPOINT_URL = process.env.NEXT_PUBLIC_SMARTFORMIFY_ENDPOINT;

export default function ContactForm() {
  const [state, setState] = useState({ status: "idle", message: "" });

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.reportValidity()) return;

    setState({ status: "loading", message: "" });
    const data = Object.fromEntries(new FormData(form).entries());

    try {
      const response = await fetch(ENDPOINT_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ data })
      });
      const result = await response.json();

      if (!response.ok || !result.success) {
        throw new Error(result.message || "Submission failed.");
      }

      if (result.data.redirect_url) {
        window.location.assign(result.data.redirect_url);
        return;
      }

      setState({
        status: "success",
        message: result.data.thank_you_content
      });
      form.reset();
    } catch (error) {
      setState({ status: "error", message: error.message });
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button disabled={state.status === "loading"}>
        {state.status === "loading" ? "Sending..." : "Send"}
      </button>
      {state.message && (
        <div
          role={state.status === "error" ? "alert" : "status"}
          dangerouslySetInnerHTML={{ __html: state.message }}
        />
      )}
    </form>
  );
}