Angular-Registrierungsformular
Baue ein Registrierungsformular in Angular, ganz ohne Backend. Deklariere die Felder als FormGroup mit Validatoren, poste den Wert einmal an Formpaste, und Anmeldungen landen in deinem Posteingang. 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 in deine App und importiere ReactiveFormsModule.
- 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
Formpaste ist ein Formular-Backend, kein Auth-Anbieter
Ein Registrierungsformular sammelt Angaben und schickt sie dir per E-Mail oder leitet sie an dein System weiter. Es erstellt keine Login-Konten und speichert keine Passwörter. Für echte Authentifizierung verbindest du die Einsendung mit deinem Auth-Tool und behandelst das Formular niemals als Speicherort für Zugangsdaten.
Verschicke niemals Passwörter im Klartext per E-Mail
Wenn du hier ein Passwort erfasst, leite die Einsendung per Webhook an deinen eigenen Registrierungs-Endpunkt weiter, statt sie in einem Posteingang landen zu lassen. Noch besser: Erfasse nur die Angaben, die du brauchst, und lass dein Auth-Tool das Passwort setzen.
Validiere auch clientseitig
Gleiche die beiden Passwortfelder ab und verlange im Browser ein gültiges E-Mail-Format, damit Fehler vor dem Absenden auffallen. Formpaste filtert Spam trotzdem serverseitig.
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">Vollständiger 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">Passwort wählen
<input type="text" name="password" formControlName="password" 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">Passwort bestätigen
<input type="text" name="confirm" formControlName="confirm" 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>
<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">Konto erstellen</button>
</form>
`,
})
export class ContactFormComponent {
sending = false;
form = new FormGroup({
name: new FormControl("", Validators.required),
email: new FormControl("", Validators.required),
password: new FormControl("", Validators.required),
confirm: new FormControl("", Validators.required),
});
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">Angular-Registrierungsformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.