Form Alert Form Alert

← All guides

Add form notifications to a React app

This guide shows you how to create a contact form component in React that sends submissions to your email via Form Alert.

Prerequisites

Contact form component

Create a new file ContactForm.jsx (or .tsx) and add the following component. Replace YOUR_ACCESS_KEY with your actual access key.

ContactForm.jsx
import { useState } from "react";

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

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");

    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);

    try {
      const res = await fetch(
        "https://api.form-alert.com/v1/submit",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        }
      );

      if (res.ok) {
        setStatus("sent");
        e.target.reset();
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="hidden"
        name="access_key"
        value="YOUR_ACCESS_KEY"
      />

      <label htmlFor="name">Name</label>
      <input type="text" name="name" id="name" required />

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

      <label htmlFor="message">Message</label>
      <textarea name="message" id="message" required />

      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send"}
      </button>

      {status === "sent" && <p>Message sent!</p>}
      {status === "error" && (
        <p>Something went wrong. Try again.</p>
      )}
    </form>
  );
}

Usage

Import and render the component anywhere in your app.

import ContactForm from "./ContactForm";

function App() {
  return (
    <div>
      <h1>Contact us</h1>
      <ContactForm />
    </div>
  );
}

With TypeScript

The same component works as a .tsx file. Just add a type annotation to the event handler.

async function handleSubmit(
  e: React.FormEvent<HTMLFormElement>
) {
  e.preventDefault();
  // ... same as above
}

Next steps