> ## Documentation Index
> Fetch the complete documentation index at: https://formpaste.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Framework-Snippets

> Ein schlichtes, fertig verdrahtetes Formular für jedes unterstützte Framework - füge es ein und es funktioniert.

Jeder Snippet unten macht dasselbe: Er sendet an
`https://api.formpaste.com/submit` mit dem `access_key` deines Formulars
und behandelt die Erfolgs-/Fehlerantwort. Diese sind bewusst schlicht
gehalten, ein E-Mail-Feld, ein Nachrichtenfeld und die Absende-Behandlung,
keine gestylte Komponentenbibliothek. Tausche `YOUR_ACCESS_KEY` gegen den
Zugangsschlüssel, der im Setup-Tab deines Formulars angezeigt wird.

<Tabs>
  <Tab title="HTML">
    Ein einfaches Formular, kein JavaScript erforderlich.

    ```html theme={null}
    <form action="https://api.formpaste.com/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
      <input type="email" name="email" placeholder="Your email" required>
      <textarea name="message" placeholder="Your message" required></textarea>
      <button type="submit">Send</button>
    </form>
    ```
  </Tab>

  <Tab title="React">
    <Tabs>
      <Tab title="TypeScript">
        ```tsx theme={null}
        import { useState } from "react";

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

          async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
            e.preventDefault();
            setStatus("sending");
            const form = new FormData(e.currentTarget);
            const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
            setStatus(res.ok ? "ok" : "error");
          }

          if (status === "ok") return <p>Thanks - your message was sent.</p>;

          return (
            <form onSubmit={onSubmit}>
              <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
              <input type="email" name="email" placeholder="Your email" required />
              <textarea name="message" placeholder="Your message" required />
              <button type="submit" disabled={status === "sending"}>Send</button>
              {status === "error" && <p>Something went wrong. Please try again.</p>}
            </form>
          );
        }
        ```
      </Tab>

      <Tab title="JavaScript">
        ```jsx theme={null}
        import { useState } from "react";

        export function ContactForm() {
          const [status, setStatus] = useState("idle"); // "idle" | "sending" | "ok" | "error"

          async function onSubmit(e) {
            e.preventDefault();
            setStatus("sending");
            const form = new FormData(e.currentTarget);
            const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
            setStatus(res.ok ? "ok" : "error");
          }

          if (status === "ok") return <p>Thanks - your message was sent.</p>;

          return (
            <form onSubmit={onSubmit}>
              <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
              <input type="email" name="email" placeholder="Your email" required />
              <textarea name="message" placeholder="Your message" required />
              <button type="submit" disabled={status === "sending"}>Send</button>
              {status === "error" && <p>Something went wrong. Please try again.</p>}
            </form>
          );
        }
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Next.js">
    Eine Client-Komponente, füge `"use client"` hinzu, da sie den
    Formularstatus hält.

    <Tabs>
      <Tab title="TypeScript">
        ```tsx theme={null}
        "use client";
        import { useState } from "react";

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

          async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
            e.preventDefault();
            setStatus("sending");
            const form = new FormData(e.currentTarget);
            const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
            setStatus(res.ok ? "ok" : "error");
          }

          if (status === "ok") return <p>Thanks - your message was sent.</p>;

          return (
            <form onSubmit={onSubmit}>
              <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
              <input type="email" name="email" placeholder="Your email" required />
              <textarea name="message" placeholder="Your message" required />
              <button type="submit" disabled={status === "sending"}>Send</button>
              {status === "error" && <p>Something went wrong. Please try again.</p>}
            </form>
          );
        }
        ```
      </Tab>

      <Tab title="JavaScript">
        ```jsx theme={null}
        "use client";
        import { useState } from "react";

        export function ContactForm() {
          const [status, setStatus] = useState("idle"); // "idle" | "sending" | "ok" | "error"

          async function onSubmit(e) {
            e.preventDefault();
            setStatus("sending");
            const form = new FormData(e.currentTarget);
            const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
            setStatus(res.ok ? "ok" : "error");
          }

          if (status === "ok") return <p>Thanks - your message was sent.</p>;

          return (
            <form onSubmit={onSubmit}>
              <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
              <input type="email" name="email" placeholder="Your email" required />
              <textarea name="message" placeholder="Your message" required />
              <button type="submit" disabled={status === "sending"}>Send</button>
              {status === "error" && <p>Something went wrong. Please try again.</p>}
            </form>
          );
        }
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Astro">
    Ein No-JS-Formular, funktioniert genauso wie die einfache HTML-Version.

    ```astro theme={null}
    ---
    // src/components/ContactForm.astro - a no-JS form that posts to Formpaste.
    ---
    <form action="https://api.formpaste.com/submit" method="POST">
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="email" name="email" placeholder="Your email" required />
      <textarea name="message" placeholder="Your message" required></textarea>
      <button type="submit">Send</button>
    </form>
    ```
  </Tab>

  <Tab title="Vue">
    <Tabs>
      <Tab title="TypeScript">
        ```vue theme={null}
        <script setup lang="ts">
        import { ref } from "vue";

        const status = ref<"idle" | "sending" | "ok" | "error">("idle");

        async function onSubmit(e: Event) {
          status.value = "sending";
          const form = new FormData(e.target as HTMLFormElement);
          const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
          status.value = res.ok ? "ok" : "error";
        }
        </script>

        <template>
          <p v-if="status === 'ok'">Thanks - your message was sent.</p>
          <form v-else @submit.prevent="onSubmit">
            <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
            <input type="email" name="email" placeholder="Your email" required />
            <textarea name="message" placeholder="Your message" required></textarea>
            <button type="submit" :disabled="status === 'sending'">Send</button>
            <p v-if="status === 'error'">Something went wrong. Please try again.</p>
          </form>
        </template>
        ```
      </Tab>

      <Tab title="JavaScript">
        ```vue theme={null}
        <script setup>
        import { ref } from "vue";

        const status = ref("idle"); // "idle" | "sending" | "ok" | "error"

        async function onSubmit(e) {
          status.value = "sending";
          const form = new FormData(e.target);
          const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
          status.value = res.ok ? "ok" : "error";
        }
        </script>

        <template>
          <p v-if="status === 'ok'">Thanks - your message was sent.</p>
          <form v-else @submit.prevent="onSubmit">
            <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
            <input type="email" name="email" placeholder="Your email" required />
            <textarea name="message" placeholder="Your message" required></textarea>
            <button type="submit" :disabled="status === 'sending'">Send</button>
            <p v-if="status === 'error'">Something went wrong. Please try again.</p>
          </form>
        </template>
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Svelte">
    <Tabs>
      <Tab title="TypeScript">
        ```svelte theme={null}
        <script lang="ts">
          let status: "idle" | "sending" | "ok" | "error" = "idle";

          async function onSubmit(e: SubmitEvent) {
            status = "sending";
            const form = new FormData(e.target as HTMLFormElement);
            const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
            status = res.ok ? "ok" : "error";
          }
        </script>

        {#if status === "ok"}
          <p>Thanks - your message was sent.</p>
        {:else}
          <form on:submit|preventDefault={onSubmit}>
            <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
            <input type="email" name="email" placeholder="Your email" required />
            <textarea name="message" placeholder="Your message" required></textarea>
            <button type="submit" disabled={status === "sending"}>Send</button>
            {#if status === "error"}<p>Something went wrong. Please try again.</p>{/if}
          </form>
        {/if}
        ```
      </Tab>

      <Tab title="JavaScript">
        ```svelte theme={null}
        <script>
          let status = "idle"; // "idle" | "sending" | "ok" | "error"

          async function onSubmit(e) {
            status = "sending";
            const form = new FormData(e.target);
            const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
            status = res.ok ? "ok" : "error";
          }
        </script>

        {#if status === "ok"}
          <p>Thanks - your message was sent.</p>
        {:else}
          <form on:submit|preventDefault={onSubmit}>
            <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
            <input type="email" name="email" placeholder="Your email" required />
            <textarea name="message" placeholder="Your message" required></textarea>
            <button type="submit" disabled={status === "sending"}>Send</button>
            {#if status === "error"}<p>Something went wrong. Please try again.</p>{/if}
          </form>
        {/if}
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

> Schau dir unsere anpassbaren und fertig zum Copy-Paste bereiten [Kontaktformular-Vorlagen hier](https://formpaste.com/templates/) an.

## Den Snippet mit deinem echten Zugangsschlüssel bereits eingesetzt bekommen

Statt `YOUR_ACCESS_KEY` von Hand zu kopieren und einzufügen, kannst du:

* Den Snippet aus dem **Setup**-Tab des Formulars im [Dashboard](https://app.formpaste.com) kopieren, dort ist dein Zugangsschlüssel bereits eingebaut.
* Einen über den [MCP-Server](/docs/agents/mcp-server) verbundenen Agenten bitten,
  [`get_snippet`](/docs/agents/get-snippet) mit deiner `formId` aufzurufen, er
  liefert denselben Snippet mit dem echten Zugangsschlüssel statt eines
  Platzhalters zurück.

## Reservierte Feldnamen

Ein paar Feldnamen werden von `/submit` besonders behandelt, vermeide es,
sie für deine eigenen Daten wiederzuverwenden:

| Feld         | Zweck                                                                                                                           |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| `access_key` | Erforderlich. Identifiziert, zu welchem Formular die Einsendung gehört.                                                         |
| `botcheck`   | Honeypot. Lass es leer und für echte Besucher verborgen, siehe [Spam-Filterung](/docs/de/features/spam-filtering).                   |
| `_ts`        | Optional. Ein Zeitstempel, der für zeitbasierte Spam-Heuristiken verwendet wird.                                                |
| `redirect`   | Optional. Eine URL, zu der nach einem erfolgreichen No-JS-Versand umgeleitet wird, siehe [Umleitungen](/docs/de/features/redirects). |

Jeder andere Feldname gehört dir, `email`, `message`, `name`, oder was auch
immer dein Formular sonst braucht.