Connect a React Form Without a Custom API

This form uses FormData and React state to handle the JSON returned by SmartFormify. The same request shape works with a controlled form.

import { useState } from "react";

const ENDPOINT_URL = "https://api.smartformify.com/fe/YOUR_ENDPOINT_KEY";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");
  const [message, setMessage] = useState("");

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;

    if (!form.reportValidity()) return;

    setStatus("loading");
    setMessage("");

    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;
      }

      setMessage(result.data.thank_you_content);
      setStatus("success");
      form.reset();
    } catch (error) {
      setMessage(error.message);
      setStatus("error");
    }
  }

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