Form Integration

React Contact Form for Web App

Build and launch React contact forms with ease—no backend or server-side setup required. Simply use FormBold’s API endpoint to collect submissions instantly.

Contact Form in React with Backend API

Create powerful contact forms in your React projects without writing any backend code. With FormBold, you can set up a fully functional React contact form in minutes. Just use the provided API endpoint in your form handler and start capturing submissions with minimal setup.

react.tsx

import { useState } from "react";

export default function ContactForm() {
  const [loading, setLoading] = useState(false);
  const [responseMessage, setResponseMessage] = useState("");

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);

    const formData = new FormData(event.currentTarget);
    const json = JSON.stringify(Object.fromEntries(formData));

    try {
      const response = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: json,
      });
      const result = await response.json();

      if (response.ok) {
        setResponseMessage(result.message || "Message sent successfully!");
        (event.target as HTMLFormElement).reset();
      } else {
        setResponseMessage(result.message || "Something went wrong");
      }
    } catch (error) {
      setResponseMessage("Failed to send message.");
    } finally {
      setLoading(false);
      setTimeout(() => setResponseMessage(""), 4000);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-[452px] mx-auto">
      {/* Email Address */}
      <div className="flex flex-col gap-2">
        <label htmlFor="email" className="text-sm font-medium text-gray-700">
          Email Address<span className="ml-0.5 text-red-500">*</span>
        </label>
        <input
          type="email"
          name="email"
          id="email"
          placeholder="Enter your email"
          required
          className="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
        />
      </div>

      {/* Subject */}
      <div className="flex flex-col gap-2">
        <label htmlFor="subject" className="text-sm font-medium text-gray-700">
          Subject<span className="ml-0.5 text-red-500">*</span>
        </label>
        <input
          type="text"
          name="subject"
          id="subject"
          placeholder="Enter your subject"
          required
          className="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
        />
      </div>

      {/* Message */}
      <div className="flex flex-col gap-2">
        <label htmlFor="message" className="text-sm font-medium text-gray-700">
          Message<span className="ml-0.5 text-red-500">*</span>
        </label>
        <textarea
          name="message"
          id="message"
          rows={5}
          placeholder="Type your message..."
          required
          className="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
        />
      </div>

      {/* Submit Button */}
      <button
        type="submit"
        disabled={loading}
        className="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
      >
        {loading ? "Submitting..." : "Submit Message"}
      </button>

      {/* Response Notice */}
      {responseMessage && (
        <p className="rounded-xl p-3 text-center text-sm font-medium bg-gray-50 text-gray-800">
          {responseMessage}
        </p>
      )}
    </form>
  );
}

How it works

See How It Works

Integrating a contact form in React with FormBold is simple, fast, and requires no backend maintenance.

Create an Account

Generate your unique API endpoint by creating a form on FormBold.

Use the Action URL

Set up your React contact form to send a POST request to the provided endpoint.

Start Receiving Submissions

Form data is instantly routed to your dashboard, email, Slack, Notion, or any connected app.

Features

Key Features of FormBold

FormBold empowers your React forms with backend functionality—without writing a single server-side script.

No Backend Required

Easily connect your React app to FormBold’s API—no Express.js, PHP, or Node.js needed.

Instant Email Notifications

Get real-time submission alerts delivered to your email or team tools.

Spam Protection Built-In

Includes backend validation and optional Google reCAPTCHA for clean submissions.

File Upload Support

Allow users to upload files via your React contact form—CDN-hosted links are auto-generated.

Connect to 5+ Apps

Easily integrate with Slack, Notion, Google Sheets, Telegram, and more—without writing custom hooks or workflows.

FAQ's

Frequently Asked Questions

Here are answers to common questions about using FormBold with React contact forms.

Use FormBold’s API endpoint in your form submission handler. Use fetch or axios to send a POST request—no backend required.