React

use-formspark

TIP

Check out our official React hooks: use-formspark.

import { useState } from "react";
import { createRoot } from "react-dom/client";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

const Application = () => {
  const [submit, submitting] = useFormspark({
    formId: FORMSPARK_FORM_ID,
  });

  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await submit({ message });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
};

createRoot(document.getElementById("root")).render(<Application />);

Fetch

import { useState } from "react";
import { createRoot } from "react-dom/client";

const FORMSPARK_ACTION_URL = "https://submit-form.com/your-form-id";

const Application = () => {
  const [message, setMessage] = useState("");

  const onSubmit = async (e) => {
    e.preventDefault();
    await fetch(FORMSPARK_ACTION_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        message,
      }),
    });
    alert("Form submitted");
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
};

createRoot(document.getElementById("root")).render(<Application />);

React Hook Form

React Hook Form pairs nicely with use-formspark for validation and field state.

import { useForm } from "react-hook-form";
import { useFormspark } from "@formspark/use-formspark";

const FORMSPARK_FORM_ID = "your-form-id";

export default function ContactForm() {
  const [submit, submitting] = useFormspark({ formId: FORMSPARK_FORM_ID });
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm();

  const onSubmit = async (data) => {
    await submit(data);
    reset();
    alert("Form submitted");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        <span>Email</span>
        <input type="email" {...register("email", { required: true })} />
      </label>
      {errors.email && <p>An email address is required.</p>}

      <label>
        <span>Message</span>
        <textarea {...register("message", { required: true, minLength: 10 })} />
      </label>
      {errors.message && <p>Please write at least 10 characters.</p>}

      <button type="submit" disabled={submitting}>
        Send
      </button>
    </form>
  );
}