Teil 4
Das ist der vierte Teil meiner Website Redesign Dokumentation.
Falls du neu hier bist, empfehle ich dir beim ersten Teil anzufangen: Wie bereite ich mich auf ein Website Redesign vor?

Im diesem Artikel geht es um das Projektanfrage-Formular und wie ich damit Kunden filtere. Ich zeige dir, wie mir das Formular bei einer Zusammenarbeit hilft und was genau die Herausforderungen dabei waren.

Teil 4
Das ist der vierte Teil meiner Website Redesign Dokumentation.
Falls du neu hier bist, empfehle ich dir beim ersten Teil anzufangen: Wie bereite ich mich auf ein Website Redesign vor?

Im diesem Artikel geht es um das Projektanfrage-Formular und wie ich damit Kunden filtere. Ich zeige dir, wie mir das Formular bei einer Zusammenarbeit hilft und was genau die Herausforderungen dabei waren.

Das Problem

Warum brauche ich überhaupt ein Anfrageformular wenn es um eine Zusammenarbeit geht?

Bisher konnten mir Kunden nur über eine Email-Adresse auf der Kontaktseite eine Projektanfrage schicken. Das sah auf der alten Website so aus:

Kontakt
Über diesen Weg wurden mir auf der alten Website Projektanfragen geschickt

Das war zwar simpel, aber nicht sehr professionell und einfallsreich, wenn es darum geht, die Ziele des Kunden zu verstehen.

Projektanfragen, die mir direkt über meine Email-Adresse geschickt wurden, hatten keine sinnvolle Struktur. Sie waren alle in etwa so: Hi, wir brauchen das, es sollte sein wie das, was kostet das.

Nicht sehr aussagekräftig oder? Aber warum sollte es auch anders sein? Mein einziger Kontakt war eine schlichte Email-Adresse. Jedem war es also freigestellt, wie er mir seine Projektanfrage schickt. Dadurch kamen so unterschiedliche Nachrichten zustande, dass es für mich immer wieder eine Mühe war, Anfragen zu strukturieren und herauszufinden, um was es dabei wirklich geht.

Da ich das Problem aber selbst erkannte, konnte ich auch eine passende Lösung nach meinen Bedürfnissen formen.

Die Lösung

Ein Formular, das mir Zeit und Nerven spart und sogar noch Kunden filtert

Folgende Ziele hatte ich für diese Seite:

  • Jede Projektanfrage muss für mich schnell und einfach einsehbar sein
  • Es müssen direkt von Anfang an die Projekte gefiltert werden, die ich sowieso absagen würde
  • Ich muss Fragen vorgeben, die mir helfen, schnell die Ziele des Kunden zu verstehen
  • Indem ich die richtigen Fragen stelle, bekomme ich auch die Antworten, die ich brauche
  • Ich kann dem Kunden Arbeit abnehmen, indem ich ihn einen Fragebogen ausfüllen lasse

Das geplante Formular sollte von überall aus erreichbar sein. Also platzierte ich ein prominenten Störer dafür im Header.

Projektanfrage Button

Warum ist mir das Formular so wichtig?

Ich möchte herausfinden, wie leidenschaftlich ein potentieller Kunde mit seinem Projekt ist. Hat er genaue Zielvorstellungen? Zeigt er ein besonderes Interesse an meiner Arbeit? Die Antworten des Fragebogens helfen mir, ein grundlegendes Verständnis für das Projekt zu bekommen.

Es geht aber nicht nur um Verständnis. Das Anfrageformular erspart mir auch viel Zeit und Geld. Warum? Der Kern von vielen Anfragen ist durch eine einfach E-mail oft nicht direkt zu verstehen. In der Vergangenheit musste ich nicht selten vier bis fünf Emails schreiben, bis ich überhaupt wusste, um was es bei dem Projekt eigentlich geht. Dieses Formular übernimmt diese Aufgabe für mich.

Es liefert mir einen ersten Eindruck davon, welche Rolle meine Arbeit zukünftig spielen wird und wie klar die Ziele des Kunden formuliert werden können.

Projekt Anfrageformular
Ausschnitt des Layouts für das Projekt Anfrageformular

Das Formular ist der Beginn von einem Prozess, um die genauen Wünsche und Ziele des Kunden zu verstehen.

Einleitend habe ich auf der Seite nochmal einen kleinen Text geschrieben, der deutlich macht, wie wichtig mir dieses Formular ist.

Ich bin sehr wählerisch was Projekte angeht. Deshalb sollte sich jeder Kunde auch die Zeit nehmen, das Formular gründlich auszufüllen. Das dauert bei manchen vermutlich länger als eine halbe Stunde, aber genau darum geht es. Ich möchte, dass sich jeder intensiv mit seiner Idee beschäftigt hat, bevor er damit zu mir kommt.

Die Ziele des Projekts herauszufinden, steht bei mir immer an erster Stelle. Nur so kann ich auch passende Lösungen liefern.

Die falschen Projekte und unprofessionelle Kunden filtern

Eines meiner Ziele bei diesem Redesign ist, mich lieber auf vier bis fünf größere Aufträge im Jahr zu konzentrieren, als mehrere „kleine“ Projekte zu betreuen.

Deshalb hat das Formular auch gleichzeitig eine Filterfunktion. Viele, die ein wirklich gutes Projekt in Planung haben, beschäftigen sich auch intensiv damit. Für sie ist es also kein Problem, mir ein genaues Bild von ihrem Vorhaben zu schildern. „Kleine“ Projekt müssen oft schneller gehen und die Kunden haben nur wenig Zeit. Demzufolge ist es für sie aufwändiger, sich über jede Frage genaue Gedanken zu machen und wirklich professionell in diesem projekt mit mir zu arbeiten.

Egal ob ich jetzt eine Anfrage direkt über meinen Mailaccount bekomme oder über eine andere Plattform, ich kann jeden auf diese Anfrage-Seite weiterleiten.

Auto height und keine Scrollbalken

Gerade weil das Formular mit mehr als 13 Feldern sehr „massiv“ daherkommt, sollte es trotzdem angenehm zum Ausfüllen sein.

Ich wusste, dass es bei einigen Fragen wirklich um tiefe Einblicke geht. Diese sind nicht so einfach in zwei Sätzen zu beschreiben. Die Höhe von jedem Textfeld ist aber fest definiert und würde sozusagen die Eingabe von einem längeren Text verstecken. Deshalb sollte die Höhe jedes Feldes variabel sein und während der Eingabe wachsen.

Formular wächst automatisch in der Höhe
Die Höhe eines Textfeldes ist variabel und wächst automatisch, je mehr Textinhalt geschrieben wird.

Das hat folgende Vorteile:

  • Durch eine wachsende Höhe entstehen keine Scrollbalken
  • Der Kunde kann sofort nachlesen, was er geschrieben hat und muss nicht erst in dem Textfeld scrollen
  • Das Formular bekommt einen eigenen Charakter durch den Mix von längeren und kürzeren Antworten

Dafür habe ich folgenden Code gefunden:

$('textarea').each(function () {
 this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
 this.style.height = 'auto';
 this.style.height = (this.scrollHeight) + 'px';
});

Fade in/out von Textfeldern

Bei einer Eingabe sollte sich jeder zu 100% auf die gestellte Frage konzentrieren.

Formulare Kontakt ausgefüllt

Man schreibt sozusagen auf dem „Grund“, was sich deutlich von den umliegenden, nicht fokussierten Feldern, unterscheidet. Das hilft, sich auf einen Bereich zu fokussieren.

Das Projekt Anfrageformular findest du hier.

Portfolio Redesign: Das Projektanfrage-Formular
  • Dieser Beitrag enthält eine Podcastfolge!

    Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.

  • Dieser Beitrag enthält ein Video!

    Das Video wird dir auf Patreon freigeschalten.

Diesen Beitrag als Podcast hören

Das Problem

Warum brauche ich überhaupt ein Anfrageformular wenn es um eine Zusammenarbeit geht?

Bisher konnten mir Kunden nur über eine Email-Adresse auf der Kontaktseite eine Projektanfrage schicken. Das sah auf der alten Website so aus:

Kontakt
Über diesen Weg wurden mir auf der alten Website Projektanfragen geschickt

Das war zwar simpel, aber nicht sehr professionell und einfallsreich, wenn es darum geht, die Ziele des Kunden zu verstehen.

Projektanfragen, die mir direkt über meine Email-Adresse geschickt wurden, hatten keine sinnvolle Struktur. Sie waren alle in etwa so: Hi, wir brauchen das, es sollte sein wie das, was kostet das.

Nicht sehr aussagekräftig oder? Aber warum sollte es auch anders sein? Mein einziger Kontakt war eine schlichte Email-Adresse. Jedem war es also freigestellt, wie er mir seine Projektanfrage schickt. Dadurch kamen so unterschiedliche Nachrichten zustande, dass es für mich immer wieder eine Mühe war, Anfragen zu strukturieren und herauszufinden, um was es dabei wirklich geht.

Da ich das Problem aber selbst erkannte, konnte ich auch eine passende Lösung nach meinen Bedürfnissen formen.

Die Lösung

Ein Formular, das mir Zeit und Nerven spart und sogar noch Kunden filtert

Folgende Ziele hatte ich für diese Seite:

  • Jede Projektanfrage muss für mich schnell und einfach einsehbar sein
  • Es müssen direkt von Anfang an die Projekte gefiltert werden, die ich sowieso absagen würde
  • Ich muss Fragen vorgeben, die mir helfen, schnell die Ziele des Kunden zu verstehen
  • Indem ich die richtigen Fragen stelle, bekomme ich auch die Antworten, die ich brauche
  • Ich kann dem Kunden Arbeit abnehmen, indem ich ihn einen Fragebogen ausfüllen lasse

Das geplante Formular sollte von überall aus erreichbar sein. Also platzierte ich ein prominenten Störer dafür im Header.

Projektanfrage Button

Warum ist mir das Formular so wichtig?

Ich möchte herausfinden, wie leidenschaftlich ein potentieller Kunde mit seinem Projekt ist. Hat er genaue Zielvorstellungen? Zeigt er ein besonderes Interesse an meiner Arbeit? Die Antworten des Fragebogens helfen mir, ein grundlegendes Verständnis für das Projekt zu bekommen.

Es geht aber nicht nur um Verständnis. Das Anfrageformular erspart mir auch viel Zeit und Geld. Warum? Der Kern von vielen Anfragen ist durch eine einfach E-mail oft nicht direkt zu verstehen. In der Vergangenheit musste ich nicht selten vier bis fünf Emails schreiben, bis ich überhaupt wusste, um was es bei dem Projekt eigentlich geht. Dieses Formular übernimmt diese Aufgabe für mich.

Es liefert mir einen ersten Eindruck davon, welche Rolle meine Arbeit zukünftig spielen wird und wie klar die Ziele des Kunden formuliert werden können.

Projekt Anfrageformular
Ausschnitt des Layouts für das Projekt Anfrageformular

Das Formular ist der Beginn von einem Prozess, um die genauen Wünsche und Ziele des Kunden zu verstehen.

Einleitend habe ich auf der Seite nochmal einen kleinen Text geschrieben, der deutlich macht, wie wichtig mir dieses Formular ist.

Ich bin sehr wählerisch was Projekte angeht. Deshalb sollte sich jeder Kunde auch die Zeit nehmen, das Formular gründlich auszufüllen. Das dauert bei manchen vermutlich länger als eine halbe Stunde, aber genau darum geht es. Ich möchte, dass sich jeder intensiv mit seiner Idee beschäftigt hat, bevor er damit zu mir kommt.

Die Ziele des Projekts herauszufinden, steht bei mir immer an erster Stelle. Nur so kann ich auch passende Lösungen liefern.

Die falschen Projekte und unprofessionelle Kunden filtern

Eines meiner Ziele bei diesem Redesign ist, mich lieber auf vier bis fünf größere Aufträge im Jahr zu konzentrieren, als mehrere „kleine“ Projekte zu betreuen.

Deshalb hat das Formular auch gleichzeitig eine Filterfunktion. Viele, die ein wirklich gutes Projekt in Planung haben, beschäftigen sich auch intensiv damit. Für sie ist es also kein Problem, mir ein genaues Bild von ihrem Vorhaben zu schildern. „Kleine“ Projekt müssen oft schneller gehen und die Kunden haben nur wenig Zeit. Demzufolge ist es für sie aufwändiger, sich über jede Frage genaue Gedanken zu machen und wirklich professionell in diesem projekt mit mir zu arbeiten.

Egal ob ich jetzt eine Anfrage direkt über meinen Mailaccount bekomme oder über eine andere Plattform, ich kann jeden auf diese Anfrage-Seite weiterleiten.

Auto height und keine Scrollbalken

Gerade weil das Formular mit mehr als 13 Feldern sehr „massiv“ daherkommt, sollte es trotzdem angenehm zum Ausfüllen sein.

Ich wusste, dass es bei einigen Fragen wirklich um tiefe Einblicke geht. Diese sind nicht so einfach in zwei Sätzen zu beschreiben. Die Höhe von jedem Textfeld ist aber fest definiert und würde sozusagen die Eingabe von einem längeren Text verstecken. Deshalb sollte die Höhe jedes Feldes variabel sein und während der Eingabe wachsen.

Formular wächst automatisch in der Höhe
Die Höhe eines Textfeldes ist variabel und wächst automatisch, je mehr Textinhalt geschrieben wird.

Das hat folgende Vorteile:

  • Durch eine wachsende Höhe entstehen keine Scrollbalken
  • Der Kunde kann sofort nachlesen, was er geschrieben hat und muss nicht erst in dem Textfeld scrollen
  • Das Formular bekommt einen eigenen Charakter durch den Mix von längeren und kürzeren Antworten

Dafür habe ich folgenden Code gefunden:

$('textarea').each(function () {
 this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
 this.style.height = 'auto';
 this.style.height = (this.scrollHeight) + 'px';
});

Fade in/out von Textfeldern

Bei einer Eingabe sollte sich jeder zu 100% auf die gestellte Frage konzentrieren.

Formulare Kontakt ausgefüllt

Man schreibt sozusagen auf dem „Grund“, was sich deutlich von den umliegenden, nicht fokussierten Feldern, unterscheidet. Das hilft, sich auf einen Bereich zu fokussieren.

Das Projekt Anfrageformular findest du hier.