### Next.js App Router Client Component Fetch

Source: https://splitforms.com/docs

For real-time UI in Next.js App Router, use a client-component fetch. This example demonstrates the client-side form submission logic.

```typescript
"use client";
import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "err">("idle");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
    const formData = new FormData(e.currentTarget);
    formData.append("access_key", process.env.NEXT_PUBLIC_SPLITFORMS_KEY!);

    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: formData,
    });
    const data = await res.json();
    setStatus(data.success ? "ok" : "err");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text"  name="name"    required />
      <input type="email" name="email"   required />
      <textarea           name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} />
      <button type="submit">{status === "loading" ? "Sending..." : "Send"}</button>
      {status === "ok"  && <p>Thanks!</p>}
      {status === "err" && <p>Something went wrong.</p>}
    </form>
  );
}
```

--------------------------------

### Next.js App Router Server Action

Source: https://splitforms.com/docs

Use a server action in Next.js App Router to keep access keys on the server and get progressive enhancement. This example shows the action definition.

```typescript
// app/contact/actions.ts
"use server";

export async function sendContact(formData: FormData) {
  const res = await fetch("https://splitforms.com/api/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify({
      access_key: process.env.SPLITFORMS_KEY!,
      name:    formData.get("name"),
      email:   formData.get("email"),
      message: formData.get("message"),
    }),
    cache: "no-store",
  });
  if (!res.ok) throw new Error("submission failed");
  return { ok: true as const };
}
```

--------------------------------

### Read API Authentication with Bearer Token

Source: https://splitforms.com/docs

This example shows how to authenticate with the splitforms read API using a personal access token. The token should be sent as a Bearer token in the Authorization header.

```curl
curl https://splitforms.com/api/submissions \
  -H "Authorization: Bearer YOUR_PERSONAL_ACCESS_TOKEN"
```

--------------------------------

### Vue/Nuxt Form Component

Source: https://splitforms.com/docs

A Vue 3 component using `<script setup>` for handling form submissions with SplitForms. Includes state management for submission status.

```vue
<script setup>
import { ref } from "vue";

const status = ref("idle");

async function onSubmit(e) {
  status.value = "loading";
  const formData = new FormData(e.target);
  formData.append("access_key", import.meta.env.VITE_SPLITFORMS_KEY);

  const res = await fetch("https://splitforms.com/api/submit", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: formData,
  });
  const json = await res.json();
  status.value = json.success ? "ok" : "err";
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input name="name"  required />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
    <button>Send</button>
  </form>
</template>
```

--------------------------------

### Next.js Pages Router Direct Page Component Submission

Source: https://splitforms.com/docs

In Next.js Pages Router, fetch directly from a page component. This example shows the form submission logic within the page.

```typescript
// pages/contact.tsx
import { useState } from "react";

export default function Contact() {
  const [status, setStatus] = useState<"idle" | "ok" | "err">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    fd.append("access_key", process.env.NEXT_PUBLIC_SPLITFORMS_KEY!);
    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: fd,
    });
    const json = await res.json();
    setStatus(json.success ? "ok" : "err");
  }

```

--------------------------------

### Node.js Webhook Signature Verification

Source: https://splitforms.com/docs

Verify the authenticity and integrity of incoming webhook requests using HMAC-SHA256. This example uses Node.js and Express, requiring the raw request body for verification.

```javascript
import crypto from "node:crypto";

function verifyWebhook(rawBody, signatureHeader, secret) {
  const expected = 
    "sha256=" +
    crypto.createHmac("sha256", secret).update(rawBody, "utf8").digest("hex");
  return crypto.timingSafeEqual(
    Buffer.from(expected),
    Buffer.from(signatureHeader),
  );
}

// In an Express handler — you must read the RAW body, not the parsed JSON.
app.post("/webhook", express.raw({ type: "application/json" }), (req, res) => {
  const sig = req.header("X-Splitforms-Signature");
  if (!sig || !verifyWebhook(req.body, sig, process.env.SPLITFORMS_WEBHOOK_SECRET)) {
    return res.status(401).end();
  }
  const payload = JSON.parse(req.body);
  // ...do work with payload.submission
  res.status(200).end();
});
```

--------------------------------

### Svelte/SvelteKit Form Component

Source: https://splitforms.com/docs

A Svelte component demonstrating form submission using `fetch`. For SvelteKit, a form action is recommended for server-side key management and progressive enhancement.

```svelte
<script>
  let status = "idle";

  async function onSubmit(event) {
    status = "loading";
    const formData = new FormData(event.target);
    formData.append("access_key", import.meta.env.VITE_SPLITFORMS_KEY);

    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: formData,
    });
    const json = await res.json();
    status = json.success ? "ok" : "err";
  }
</script>

<form on:submit|preventDefault={onSubmit}>
  <input name="name"  required />
  <input name="email" type="email" required />
  <textarea name="message" required />
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
  <button>Send</button>
</form>
```

--------------------------------

### Basic HTML Form Submission

Source: https://splitforms.com/docs

This HTML snippet demonstrates a basic form submission to the splitforms API. Ensure you replace 'YOUR_ACCESS_KEY' with your actual key. The 'botcheck' input is a honeypot to deter bots.

```html
<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <input type="text"   name="name"    placeholder="Your name"  required />
  <input type="email"  name="email"   placeholder="Your email" required />
  <textarea            name="message" placeholder="Message"    required></textarea>

  <!-- honeypot — bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />

  <button type="submit">Send</button>
</form>
```

--------------------------------

### React Form Submission with Fetch

Source: https://splitforms.com/docs

Use fetch from a client component in React. The browser handles FormData encoding. Inject the access key.

```javascript
import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function onSubmit(e) {
    e.preventDefault();
    setStatus("loading");
    const formData = new FormData(e.target);
    formData.append("access_key", import.meta.env.VITE_SPLITFORMS_KEY);

    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: formData,
    });
    const json = await res.json();
    setStatus(json.success ? "ok" : "err");
    if (json.success) e.target.reset();
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text"  name="name"  required />
      <input type="email" name="email" required />
      <textarea           name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} />
      <button type="submit">Send</button>
      {status === "ok"  && "Thanks!"}
      {status === "err" && "Error"}
    </form>
  );
}
```

--------------------------------

### HTML Form Submission with Redirect

Source: https://splitforms.com/docs

This HTML snippet shows how to configure a redirect URL after a successful form submission. The 'redirect' input specifies the URL to which the user will be sent.

```html
<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="redirect"   value="https://yoursite.com/thanks" />

  <input type="text"  name="name"  placeholder="Name"  required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea           name="message" placeholder="Message" required></textarea>
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />

```

--------------------------------

### Static HTML Form for SplitForms

Source: https://splitforms.com/docs

A standard HTML form for static sites that posts directly to the SplitForms API endpoint. Includes a hidden access key and a redirect URL.

```html
---
// src/pages/contact.astro
const ACCESS_KEY = import.meta.env.PUBLIC_SPLITFORMS_KEY;
---

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value={ACCESS_KEY} />
  <input type="hidden" name="redirect"   value="https://yoursite.com/thanks" />

  <input type="text"  name="name"  required />
  <input type="email" name="email" required />
  <textarea           name="message" required />
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />

```

--------------------------------

### Next.js App Router Server Action Form

Source: https://splitforms.com/docs

The corresponding form component for the Next.js App Router server action. It uses the imported `sendContact` action.

```typescript
// app/contact/page.tsx
import { sendContact } from "./actions";

export default function ContactPage() {
  return (
    <form action={sendContact}>
      <input name="name"  required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}
```

--------------------------------

### Next.js API Route for SplitForms

Source: https://splitforms.com/docs

A Next.js API route to handle form submissions server-side, forwarding data to the SplitForms API. Keeps the access key secure on the server.

```typescript
// pages/api/contact.ts
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") return res.status(405).end();

  const r = await fetch("https://splitforms.com/api/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ access_key: process.env.SPLITFORMS_KEY, ...req.body }),
  });
  res.status(r.status).json(await r.json());
}
```

--------------------------------

### React Form Component

Source: https://splitforms.com/docs

A basic React component for submitting form data to SplitForms. Handles form state and displays submission status.

```jsx
function ContactForm() {
  const [status, setStatus] = React.useState("idle");

  async function onSubmit(event) {
    event.preventDefault();
    setStatus("loading");
    const formData = new FormData(event.target);
    formData.append("access_key", import.meta.env.VITE_SPLITFORMS_KEY);

    const res = await fetch("https://splitforms.com/api/submit", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: formData,
    });
    const json = await res.json();

    if (json.success) {
      setStatus("ok");
    } else {
      setStatus("err");
      console.error(json);
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name"    required />
      <input name="email"   type="email" required />
      <textarea name="message" required />
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} />
      <button>Send</button>
      {status === "ok"  && "Thanks!"}
      {status === "err" && "Error"}
    </form>
  );
}
```

--------------------------------

### Generic Webhook Payload Structure

Source: https://splitforms.com/docs

This is the JSON body structure sent to non-Slack/Discord webhook targets. It includes event details and submission data.

```json
{
  "event": "submission.created",
  "submission": {
    "id": "sub_01HZX9...",
    "form_name": "Contact",
    "data": {
      "name": "Ada Lovelace",
      "email": "ada@example.com",
      "message": "Hello."
    },
    "ip_address": "203.0.113.7",
    "referer": "https://yoursite.com/contact",
    "created_at": "2026-05-04T14:31:04.123Z"
  }
}
```

--------------------------------

### Honeypot Spam Protection Field

Source: https://splitforms.com/docs

This HTML input field serves as a honeypot to catch bots. It is hidden from human users but filled by bots, allowing for silent spam detection.

```html
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
```

--------------------------------

### Redirect After Form Submission

Source: https://splitforms.com/docs

Use a hidden input field to specify a custom URL for redirecting users after a successful form submission. This overrides dashboard defaults.

```html
<input type="hidden" name="redirect" value="https://yoursite.com/thanks" />
```

--------------------------------

### Custom Email Subject Field

Source: https://splitforms.com/docs

Set a custom email subject for form submissions using a hidden input field. This allows for dynamic subject lines using template placeholders.

```html
<input type="hidden" name="subject" value="New lead from website" />
```

--------------------------------

### Webflow Hidden Form Fields

Source: https://splitforms.com/docs

Add these hidden input fields inside a Webflow embed element within your form to configure SplitForms. Ensure each input has a 'name' attribute.

```html
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="hidden" name="redirect"   value="https://yoursite.com/thanks" />
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.