Form Integration

Next.js Contact Form for Web App

Build and launch high-performing contact forms in Next.js—no backend or API routes required. Just connect your form to FormBold’s API endpoint and start collecting submissions instantly.

Next.js Contact Form with Backend API

Easily add a working contact form to your Next.js project without writing a single line of backend logic. FormBold simplifies the process—just point your form’s action to a unique API endpoint and handle submissions in seconds.

nextjs.tsx

"use client";

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 (err) {
      setResponseMessage("Failed to submit form.");
    } 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>

      {/* Feedback Alert */}
      {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

Setting up a contact form in Next.js with FormBold is quick, clean, and completely backend-free.

Create an Account

Paste the Action URL

Use FormBold’s example code and set the form action to your unique endpoint.

Start Receiving Submissions

All form submissions are securely sent to the dashboard, inbox, Slack, Notion, or other connected apps.

Features

Key Features of FormBold

FormBold brings seamless backend functionality to your Next.js contact form—without setting up API routes or serverless functions.

No Backend or API Routes Needed

Use FormBold’s endpoint directly in your form—skip pages/api/ entirely.

Instant Email Notifications

Get real-time notifications via email or connected team tools like Slack and Telegram.

Spam Filtering & Validation

Includes server-side validation and optional Google reCAPTCHA to block spam.

File Upload Support

Allow users to upload files through your form with secure, CDN-hosted download links.

Connect to 5+ Apps

Sync with Notion, Google Sheets, Telegram, and more—no custom integrations required.

FAQ's

Frequently Asked Questions

Answers to common questions about using FormBold with a Next.js contact form.

Use FormBold’s API endpoint as the form action and set the method to POST. No need to create an API route.