NEXTJS Integration

Overview

Learn how to use Voieform in Next.js projects using either Client Components or Server Actions.

Build with AI (LLM Prompt)

promptprompt

Create a Next.js contact form component using React Server Actions to submit the form data to Voieform:
https://voieform.com/f/<YOUR-FORM-API-KEY-HERE>

What you'll get out of the box:

Compatible with Next.js 14 & 15 App Router

Support for Server Actions to hide API keys

Zero-latency client-side submissions using useForm hook

Automatic CSRF protection

Setup instructions

bashbash

npm install @voieform/react

Code Example

javascriptjavascript

"use client";

import React from "react";
import { useForm } from "@voieform/react";

export default function NextContactForm() {
  const { submit, loading, error, success } = useForm({
    apiKey: "YOUR_FORM_API_KEY"
  });

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    await submit(data);
  };

  if (success) return <p className="text-emerald-500 font-bold">Inquiry sent successfully!</p>;

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm">
      <input name="email" type="email" placeholder="Your email" required className="border p-2 w-full rounded" />
      <textarea name="message" placeholder="Message" required className="border p-2 w-full rounded" />
      <button type="submit" disabled={loading} className="bg-blue-600 text-white px-4 py-2 rounded w-full">
        {loading ? "Sending..." : "Submit"}
      </button>
      {error && <p className="text-red-500 text-xs">{error}</p>}
    </form>
  );
}

Need help?

Contact Support