Ein Kontaktformular in deine Portfolio-Website einbauen

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.

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

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:

<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:

<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 dasselbe Formularmuster in Next.js, Astro, SvelteKit, Nuxt, React und Vue. Static-Site-Generatoren haben eigene Einrichtungsseiten, etwa Jekyll und Hugo.

Die richtigen Anfragen zuerst beantworten

Ikiform sendet jede Anfrage auf dieselbe Weise; das Filtern nach Budget passiert in dem Tool, das den Webhook empfängt. Füge in Zapier oder n8n vor dem Nachrichtenschritt einen Filter auf budget hinzu. Um dein Handy direkt zu erreichen, folge der Anleitung für Telegram oder Slack.

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. 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

Fragen