# Ein Kontaktformular in deine Portfolio-Website einbauen

> Ein Portfolio-Kontaktformular mit den Fragen, die du im ersten Gespräch stellen würdest: Projekt, Budget, Zeitplan und ein Link, ohne Server und mit Antworten aus deinem Postfach.

Veröffentlicht am 2026-10-25 · https://ikiform.com/de/guides/contact-form-static-site/portfolio-website

Frag nach den vier Dingen, die du vor einem ersten Gespräch brauchst: worum es im Projekt geht, eine Budgetspanne, wann es losgeht und einen Link zum Ansehen. Sende das Formular aus deinem statischen Portfolio an Ikiform, damit jede Anfrage in deinem Postfach landet und **Reply** an den Kunden geht. Füll die Projektart anhand der Case Study vor, von der der Besucher kam, damit du weißt, was ihn überzeugt hat.

## Was bei einem Portfolio-Formular anders ist

In einem Portfolio ist das Kontaktformular der Vertriebstrichter. Ein nacktes Formular mit Name, E-Mail und Nachricht bringt dir Nachrichten, die du mit Gegenfragen beantworten musst: Wie hoch ist das Budget, wann soll es losgehen, gibt es schon eine Website? Fragst du das vorab, sparst du dir eine E-Mail-Runde, und die Antworten sagen dir, welche Anfragen du zuerst beantworten solltest.

Portfolios liegen außerdem oft auf kostenlosem statischem Hosting, einmal gebaut und dann monatelang nicht angefasst. Das Formular muss ohne einen Server, den man patchen müsste, und ohne dass du ein Dashboard prüfst, weiter funktionieren.

| Feld | Warum es da ist | Typ |
| --- | --- | --- |
| `project` | Wer antworten soll und was du zurückschickst | `select`, darauf lässt sich also sicher filtern |
| `budget` | Spannen filtern besser als eine offene Zahl, und die Leute beantworten sie auch | `radio` mit Spannen |
| `start` | „Diesen Monat“ und „später, noch in Planung“ brauchen unterschiedliche Antworten | `select` |
| `link` | Ihre aktuelle Website oder ein Briefing, damit du mit etwas Konkretem antwortest | `url` |
| `message` | Das Projekt in ihren eigenen Worten | `textarea`, mindestens 30 Zeichen |

Lass Telefonnummern und Firmengröße weg. Jedes zusätzliche Pflichtfeld kostet Anfragen, und beides erfährst du im ersten Gespräch.

Formular: Work with me

- **Dein Name** (`name`, text, Pflichtfeld)
- **E-Mail** (`email`, email, Pflichtfeld)
- **Was brauchst du?** (`project`, select, Pflichtfeld)
- **Budget** (`budget`, radio, Pflichtfeld)
- **Wann möchtest du starten?** (`start`, select)
- **Deine aktuelle Website oder ein Briefing** (`link`, url)
- **Erzähl mir vom Projekt** (`message`, textarea, Pflichtfeld)
- **Gekommen von** (`seen`, text)

Füge diese Definition im Tab **Fields** des Formulars ein. Ikiform akzeptiert dann nur die aufgeführten Budget- und Projektwerte und lehnt eine Nachricht unter 30 Zeichen mit einem Feldfehler ab. `seen` steht in der Definition, weil ein Formular mit Feldern jedes Eingabefeld ablehnt, das nicht aufgeführt ist; auf der Seite ist es ein verstecktes Eingabefeld.

> Datei-Uploads werden noch nicht unterstützt. Ein Post mit einer Datei bekommt `422 files_not_supported`.

## Das Formular

Einfaches HTML, es funktioniert also in einem handgeschriebenen Portfolio, einem Jekyll- oder Hugo-Theme oder einem Astro-Template. Das Skript am Ende füllt die Projektart anhand des Links vor, über den der Besucher kam, und hält fest, welche Seite das war:

`contact.html`:

```html
<form id="enquiry" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" maxlength="120" required />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="project">What do you need?</label>
  <select id="project" name="project" required>
    <option value="website">A website</option>
    <option value="branding">Branding</option>
    <option value="product">Product design</option>
    <option value="other">Something else</option>
  </select>

  <fieldset>
    <legend>Budget</legend>
    <label><input type="radio" name="budget" value="under_5k" required /> Under $5k</label>
    <label><input type="radio" name="budget" value="5k_15k" /> $5k to $15k</label>
    <label><input type="radio" name="budget" value="over_15k" /> Over $15k</label>
    <label><input type="radio" name="budget" value="unsure" /> Not sure yet</label>
  </fieldset>

  <label for="start">When would you like to start?</label>
  <select id="start" name="start">
    <option value="now">This month</option>
    <option value="soon">In 1 to 3 months</option>
    <option value="later">Later, still planning</option>
  </select>

  <label for="link">Your current site or a brief</label>
  <input id="link" name="link" type="url" placeholder="https://" />

  <label for="message">Tell me about the project</label>
  <textarea id="message" name="message" rows="6" minlength="30" required></textarea>

  <input type="hidden" name="seen" value="" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send enquiry</button>
</form>

<script>
  const params = new URLSearchParams(location.search);
  const enquiry = document.querySelector("#enquiry");
  const project = params.get("project");
  if (project && enquiry.project.querySelector(`option[value="${CSS.escape(project)}"]`)) {
    enquiry.project.value = project;
  }
  enquiry.seen.value = params.get("from") ?? document.referrer;
</script>
```

Verlinke auf jeder Case Study das Formular mit der Projektart und dem Seitennamen:

`case-studies/northwind.html`:

```html
<a href="/contact.html?project=branding&from=case-study-northwind">Start a branding project</a>
```

- Das Skript wählt nur einen Projektwert aus, der in der Liste existiert, ein von Hand bearbeiteter Link kann also keine neuen Werte hinzufügen.
- `seen` enthält den Namen der Case Study oder, falls es keinen gibt, den Referrer. Nach ein paar Monaten sagt dir die CSV, welche Arbeit welche Anfragen bringt.
- Behalte `email` als Feldnamen. Benachrichtigungs-E-Mails setzen es als Reply-To, sodass du aus deinem eigenen Postfach antwortest.
- Für ein Portfolio mit Framework hat die [Hauptanleitung](https://ikiform.com/de/guides/contact-form-static-site.md#form) dasselbe Formularmuster in Next.js, Astro, SvelteKit, Nuxt, React und Vue. Static-Site-Generatoren haben eigene Einrichtungsseiten, etwa [Jekyll](https://ikiform.com/de/docs/guides/jekyll.md) und [Hugo](https://ikiform.com/de/docs/guides/hugo.md).

## Die richtigen Anfragen zuerst beantworten

Diagramm: Wohin eine Portfolio-Anfrage geht, nachdem der Besucher auf Senden klickt

1. Ein Besucher kommt von einer Case Study, und das Formular öffnet sich mit bereits gewählter Projektart.
2. Das Formular sendet an Ikiform, das die Spamprüfungen ausführt und die Anfrage speichert.
3. Du bekommst eine Benachrichtigungs-E-Mail, und mit Antworten schreibst du direkt an den Kunden zurück.
4. Ein Webhook sendet dieselbe Anfrage an Telegram oder Slack, wo eine Automatisierung dich nur bei großen Budgets alarmieren kann.
5. Jede Anfrage bleibt im Dashboard, sodass du ein Jahr davon als CSV exportieren und sehen kannst, welche Arbeit sie gebracht hat.

Für den Anfang reicht E-Mail. Füge die Handy-Benachrichtigung hinzu, wenn dir wegen langsamer Antworten Aufträge entgehen.

Ikiform sendet jede Anfrage auf dieselbe Weise; das Filtern nach Budget passiert in dem Tool, das den Webhook empfängt. Füge in [Zapier](https://ikiform.com/blog/form-submissions-to-zapier.md) oder [n8n](https://ikiform.com/blog/form-submissions-to-n8n.md) vor dem Nachrichtenschritt einen Filter auf `budget` hinzu. Um dein Handy direkt zu erreichen, folge der Anleitung für [Telegram](https://ikiform.com/blog/form-submissions-to-telegram.md) oder [Slack](https://ikiform.com/blog/form-submissions-to-slack.md).

Ikiform schickt der Person, die das Formular ausfüllt, keine E-Mail. Benachrichtigungs-E-Mails gehen nur an dich und dein Team, es gibt also keinen Autoresponder, keine Bestätigungs-E-Mail und kein Double-Opt-in. Verschicke sie aus deinem E-Mail-Tool, ausgelöst durch einen [Webhook](https://ikiform.com/de/docs/webhooks.md). Bei einem Portfolio erledigt eine kurze Dankeseite, die sagt, wann du antwortest, das meiste von dem, was ein Autoresponder tun würde.

## Eine Dankeseite, über die man den Termin bucht

Setze **Redirect after submit** auf eine eigene Dankeseite. In einem Portfolio kann sie mehr als Danke sagen: Verlinke deine Kalender-Buchungsseite für alle, die jetzt reden wollen, und sag allen anderen, wann du antwortest. Füge zwei oder drei Case Studies hinzu, die sie noch nicht gesehen haben; sie entscheiden sich ja noch.

Halte die Seite mit einem `noindex`-Meta-Tag aus den Suchergebnissen heraus und zähle Besuche darauf in deiner Analyse nicht als Conversion, ohne auch das Dashboard zu prüfen, weil Spam dieselbe Weiterleitung bekommt wie eine echte Anfrage.

## Spam bei Portfolios

Portfolios bekommen eine bestimmte Art von Spam: SEO-Angebote, Gastbeitrags-Pitches und „Redesign your site“-Vorlagen. Die Bewertung von Ikiform vergibt +2 für bekannte Spam-Phrasen, +3 für einen Link im Namensfeld und +2 für drei oder mehr Links; ab 5 wird eine Nachricht als Spam gespeichert und löst keine E-Mail aus.

Ein Kunde schickt selten zwei Anfragen in zehn Minuten, also setze das Rate-Limit auf Strict, 2 alle 10 Minuten pro Besucher. Füge deine Domain unter **Allowed domains** hinzu und wirf in den ersten Wochen ab und zu einen Blick in den Filter **Spam**: Eine echte Anfrage mit drei Links zu früheren Arbeiten kann hoch bewertet werden.

## Prüfen, ob es funktioniert

1. Füge unter **Allowed domains** des Formulars die Domain deiner Site hinzu, plus `localhost`, während du entwickelst. Lass das Feld leer, um Posts von überall anzunehmen.
2. Öffne `contact.html?project=branding&from=test` und prüfe, ob **Branding** ausgewählt ist.
3. Sende eine Anfrage. Unter **Submissions** sollte `seen` den Wert `test` haben.
4. Entferne in den Devtools deines Browsers `minlength` aus der Textarea und sende eine Nachricht aus drei Wörtern. Ikiform lehnt sie mit `422 validation_failed` ab und nennt `message`.
5. Prüfe das Postfach jedes Benachrichtigungsempfängers. Jeder bekommt eine E-Mail mit den Feldern, und **Reply** geht an den Absender, wenn das Formular ein `email`-Feld hat.
6. Nichts angekommen? Stell den Statusfilter im Dashboard auf **Spam**. Spam bekommt dieselbe Erfolgsantwort wie eine echte Einsendung.

## Stolperfallen

| Problem | Was zu tun ist |
| --- | --- |
| `422 validation_failed` für `budget` | Ein `value` eines Radiobuttons im HTML passt nicht zu den Optionen der Definition. Sie müssen exakt übereinstimmen, einschließlich Unterstrichen. |
| Die Projektart ist nicht vorausgefüllt | Der `project`-Wert im Link ist keiner der Optionswerte. Prüfe Schreibweise sowie Groß- und Kleinschreibung. |
| Die Anfrage eines echten Kunden liegt im Spam | Drei oder mehr Links erhöhen den Score, und kommt eine Phrase aus der Spamliste oder eine Wegwerfadresse dazu, überschreitet er die Schwelle. Markiere sie als kein Spam; dann gehen ihre E-Mail und Webhooks raus. |
| `422 files_not_supported` | Das Formular hat ein `<input type="file">` mit ausgewählter Datei. Datei-Uploads werden noch nicht unterstützt; entferne das Eingabefeld oder bitte stattdessen um einen Link. |

## Fragen

### Sollte ein Portfolio-Kontaktformular nach dem Budget fragen?

Meist ja, als Spannen statt als Zahl. Spannen sind leicht zu beantworten und sagen dir, welche Anfragen eine schnelle Antwort brauchen. Biete eine Option Noch unklar an, damit niemand abspringt.

### Können Kunden ein Briefing oder Dateien anhängen?

Über Ikiform noch nicht. Bitte stattdessen um einen Link: ein geteiltes Dokument, einen Drive-Ordner oder die aktuelle Website. Das url-Feld prüft, ob es eine echte Webadresse ist.

### Brauche ich einen Server für ein Portfolio-Kontaktformular?

Nein. Das Portfolio bleibt auf jedem Host statisch, und das Formular sendet an Ikiform, das jede Anfrage speichert und dir eine E-Mail schickt.

### Wo sehe ich, welche Case Study eine Anfrage gebracht hat?

Im Feld seen jeder Einsendung. Filtere oder durchsuche es im Dashboard oder exportiere alle paar Monate eine CSV und zähle die Anfragen pro Seite.

### Ist Ikiform kostenlos?

Nein, es gibt keinen kostenlosen Tarif. Testen ist kostenlos: Du kannst 50 Testeinsendungen pro Monat von localhost senden, bevor du zahlst. Für den Livebetrieb startet Pro bei $6/Monat für 500 Einsendungen, oder du zahlst einmalig 10.000 Einsendungen für $49 oder 50.000 Einsendungen für $149, mit Guthaben, das nie verfällt.

## Weitere Anleitungen

- [Kontaktformular auf einer statischen Site](https://ikiform.com/de/guides/contact-form-static-site.md): Bau ein funktionierendes Kontaktformular in eine statische Site ohne Server ein: wohin der POST geht, Spam, Antworten per E-Mail und Code für jeden Host und jedes Framework.
- [GitHub Pages](https://ikiform.com/de/guides/contact-form-static-site/github-pages.md): GitHub Pages kann keinen Servercode ausführen, also bekommt ein Formular-POST 405 Not Allowed; sende an ein Formular-Backend und setze Weiterleitungen für Projekt-Sites richtig.
- [Netlify](https://ikiform.com/de/guides/contact-form-static-site/netlify.md): Betreib ein Kontaktformular auf einer Netlify-Site ohne Netlify Forms: keine Erkennung beim Build, JSON-Posts aus React und ein eigenes Formular für Deploy Previews.
- [Vercel](https://ikiform.com/de/guides/contact-form-static-site/vercel.md): Eine statische Seite auf Vercel beantwortet einen Formular-POST mit 405 Method Not Allowed; hier steht, warum, und wie du das Formular stattdessen an ein Backend sendest.
- [Cloudflare Pages](https://ikiform.com/de/guides/contact-form-static-site/cloudflare-pages.md): Bau ein Kontaktformular in Cloudflare Pages ein, ohne eine Function zu schreiben: an ein Formular-Backend senden, Header in _headers setzen und eigene Turnstile-Schlüssel nutzen.
- [Amazon S3](https://ikiform.com/de/guides/contact-form-static-site/aws-s3.md): S3-Website-Endpunkte akzeptieren nur GET und HEAD über einfaches HTTP, also sende das Kontaktformular an ein Formular-Backend und setze Weiterleitungen mit CloudFront richtig.