Portfolio Redesign: Das Projektanfrage-Formular

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:

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.

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.

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.

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.

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.