DocsGetting StartedEndpoint Examples

Formnex Integration Examples

Examples of how to use Formnex Endpoints and Webhooks in HTML, React, and Next.js projects.

Formnex Integration

This guide provides real-world examples of how to integrate Formnex Endpoints and handle Webhooks in various environments including plain HTML, React, and Next.js.

Formnex allows you to handle form submissions effortlessly by sending data to your configured endpoints. You can also receive real-time data using webhooks.

Make sure to replace your-endpoint with your actual Formnex endpoint slug and also add your API key in the .env file.

HTML Example

For basic HTML sites, you can submit directly to a Formnex endpoint using the <form> tag.

<form action="https://formnex.vercel.app/api/endpoints/your-endpoint" method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send</button>
</form>

React Example

In React, you can use fetch to programmatically submit the form data.

import { useState } from "react";
 
export default function ContactForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
 
  const handleSubmit = async (e) => {
    e.preventDefault();
 
    const res = await fetch("https://formnex.vercel.app/api/endpoints/your-endpoint", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    });
 
    const data = await res.json();
    console.log("Response:", data);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Your Name"
        required
      />
      <input
        name="email"
        type="email"
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        placeholder="Your Email"
        required
      />
      <textarea
        name="message"
        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
        placeholder="Your Message"
        required
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Next.js API Route Example (Webhook Handler)

If you've configured a Webhook URL in Formnex, here's how to handle it in a Next.js API route:

pages/api/webhook.js

export default async function handler(req, res) {
  if (req.method === "POST") {
    const { endpoint, data, type, submittedAt } = req.body;
 
    console.log("Received submission from:", endpoint);
    console.log("Type:", type);
    console.log("Form data:", data);
 
    // TODO: Save to DB or trigger internal process
 
    res.status(200).json({ received: true });
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

Use this route as your webhook destination and paste its URL in the Webhook URL field on your Formnex dashboard.
Next.js App Router Integration Example If you're using the App Router structure in Next.js 13+, you can create a route handler like this:

/app/api/webhook/route.ts

import { NextRequest, NextResponse } from 'next/server';
 
export async function POST(req: NextRequest) {
  const body = await req.json();
 
  console.log("Webhook received:", body);
 
  return NextResponse.json({ status: "ok" }, { status: 200 });
}

For more details on Webhooks integeration, check out the Formnex Webhooks documentation.

🛡️ Remember to validate incoming requests or add authentication if needed.

Tips for Successful Integration

Always match your field names in the form with the ones expected in the Formnex schema.
For React or Next.js, use Content-Type: application/json and JSON.stringify() the body.
Test Webhooks using tools like Webhook.site or locally with ngrok.
Monitor real-time logs in your Formnex dashboard for debugging.

Resources

Let us know if you want to see examples in other frameworks like Vue, Svelte, or Astro!

Webhooks Create endpoints