Angular-Umfrageformular
Baue ein Umfrageformular in Angular, ganz ohne Backend. Binde die Dropdowns mit formControlName, halte ein offenes Feld für Kommentare bereit, und Antworten 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 und passe die Optionen an deine Fragen an.
- 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
Kurz halten für eine hohe Abschlussquote
Jede zusätzliche Frage kostet Antworten. Ein paar Dropdowns und ein offenes Kommentarfeld liefern meist alles, was du brauchst, ohne Ermüdung.
Dropdowns schlagen Freitext bei der Auswertung
Feste Auswahlmöglichkeiten (Select-Felder) lassen sich später leicht auszählen. Heb dir das Textfeld für die eine offene Frage auf, die es wirklich braucht.
Mach die E-Mail optional für ehrliche Antworten
Anonyme Antworten sind oft ehrlicher. Frag nur nach der E-Mail, wenn du nachfassen musst, und markiere sie als optional.
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">E-Mail (optional)
<input type="email" name="email" formControlName="email" placeholder="du@beispiel.de" 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">Was trifft am besten auf dich zu?
<select name="role" formControlName="role" 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">
<option>Entwickler</option>
<option>Designer</option>
<option>Gründer</option>
<option>Sonstiges</option>
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Wie zufrieden bist du?
<select name="satisfaction" formControlName="satisfaction" 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">
<option>Sehr zufrieden</option>
<option>Zufrieden</option>
<option>Neutral</option>
<option>Unzufrieden</option>
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Möchtest du noch etwas ergänzen?
<textarea name="comments" formControlName="comments" 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">Umfrage absenden</button>
</form>
`,
})
export class ContactFormComponent {
sending = false;
form = new FormGroup({
email: new FormControl(""),
role: new FormControl("", Validators.required),
satisfaction: new FormControl("", Validators.required),
comments: 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">Angular-Umfrageformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.