Mehrstufiges Angular-Formular
Baue ein mehrstufiges Formular in Angular, ganz ohne Backend. Halte jedes Feld in einer einzigen FormGroup, zeige im Template jeweils einen Schritt an und poste den gesamten Wert am Ende einmal. Kopiere die Komponente und ergänze deinen Zugangsschlüssel.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Kopiere die Komponente oben und teile das Template in Schritte auf.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und deploye.
Angular-Fallstricke
Ein Angular-Kontaktformular ist eine Komponente mit einer FormGroup und einem Submit-Handler, der an Formpaste postet. Es gibt kein eigenes Backend und keine eigene API. Baue die Group, binde sie an das Template und poste den Wert.
ReactiveFormsModule importieren
Die Template-Direktiven sind nicht global verfügbar. Eine Standalone-Komponente braucht ReactiveFormsModule in ihrem imports-Array, eine App auf Basis von NgModule braucht es im Modul. Wird das ausgelassen, ist das meist der Grund, warum formGroup und formControlName scheinbar nichts tun.
Die Group binden, nicht jedes Feld einzeln
Setze formGroup auf das Formular-Element und formControlName auf jedes Feld. Angular hält die Werte in der Group, sodass der Submit-Handler this.form.value ausliest, statt das DOM anzufassen.
Keine eigene API-Route
Die Komponente postet direkt an den Formpaste-Endpunkt, wodurch du dir einen Mailer und einen Speicher für Einsendungen sparst, den du sonst selbst bauen müsstest. HttpClient funktioniert ebenfalls, wenn du es bereits injizierst, aber einfaches fetch reicht aus.
Validatoren sind clientseitig
Validators.required und ähnliche verbessern das Formular im Browser. Sie filtern keinen Spam, und bei dir läuft nichts auf einem Server, daher wendet Formpaste seine eigene Spam-Filterung nach dem Post an.
Worauf es ankommt
Ein Formular, mehrere Bildschirme
Ein mehrstufiges Formular ist eine einzige Einsendung, die in der UI auf mehrere Schritte verteilt ist. Sammle alle Felder im Client-State und poste am Ende einmal.
Eine eigene Route pro Schritt ist optional
Du kannst jedem Schritt eine eigene URL geben, um den Zurück-Button zu unterstützen, oder alles auf einer Seite mit lokalem State belassen. Beide Varianten posten dieselbe finale Payload.
Poste die gesamte Payload einmal
Poste nicht bei jedem Schritt. Sammle die Felder, während der Nutzer weitergeht, und sende eine Anfrage, wenn er fertig ist.
So funktioniert es
Drei einfache Schritte, bis Formular-Einsendungen in deinem E-Mail-Posteingang landen.
Erstelle dein Formular, setze die action-URL auf den Formpaste-Endpunkt und trage deinen Zugangsschlüssel ein.
Formular erstellen
Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.
Code kopieren
Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.
import { Component } from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
const ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
@Component({
selector: "app-contact-form",
standalone: true,
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Name
<input type="text" name="name" formControlName="name" placeholder="Dein Name" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">E-Mail
<input type="email" name="email" formControlName="email" placeholder="du@beispiel.de" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nachricht
<textarea name="message" formControlName="message" class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
</label>
<button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" [disabled]="sending">Absenden</button>
</form>
`,
})
export class ContactFormComponent {
sending = false;
form = new FormGroup({
name: new FormControl("", Validators.required),
email: new FormControl("", Validators.required),
message: new FormControl(""),
});
async onSubmit() {
this.sending = true;
await fetch("https://api.formpaste.com/submit", {
method: "POST",
body: new URLSearchParams({
access_key: ACCESS_KEY,
...Object.fromEntries(
Object.entries(this.form.value).map(([k, v]) => [k, v ?? ""]),
),
}),
});
this.sending = false;
this.form.reset();
}
}Zugangsschlüssel hinzufügen
Ersetze den Platzhalter durch deinen Zugangsschlüssel, um Einsendungen zu empfangen.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Mehrstufiges Angular-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.