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.
- HTML
- React
- Next.js
- Astro
- Vue
- Svelte
Ein einfaches Formular, kein JavaScript erforderlich.
<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>
- TypeScript
- JavaScript
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>
);
}
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>
);
}
Eine Client-Komponente, füge
"use client" hinzu, da sie den
Formularstatus hält.- TypeScript
- JavaScript
"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>
);
}
"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>
);
}
Ein No-JS-Formular, funktioniert genauso wie die einfache HTML-Version.
---
// 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>
- TypeScript
- JavaScript
<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>
<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>
- TypeScript
- JavaScript
<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}
<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}
Schau dir unsere anpassbaren und fertig zum Copy-Paste bereiten Kontaktformular-Vorlagen hier an.
Den Snippet mit deinem echten Zugangsschlüssel bereits eingesetzt bekommen
StattYOUR_ACCESS_KEY von Hand zu kopieren und einzufügen, kannst du:
- Den Snippet aus dem Setup-Tab des Formulars im Dashboard kopieren, dort ist dein Zugangsschlüssel bereits eingebaut.
- Einen über den MCP-Server verbundenen Agenten bitten,
get_snippetmit deinerformIdaufzurufen, 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. |
_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. |
email, message, name, oder was auch
immer dein Formular sonst braucht.