Die? Kontaktieren Sie uns? zu oft wird form als schnelles nachträgliches geworfen und nicht als element, das den ton der kommunikation bestimmt. Heute werfen wir einen Blick auf einige einfache Techniken, mit denen Sie Ihre Kontaktformulare von langweilig bis brillant gestalten können.
Auf dem Weg werden wir einige Beispiele für großartige Kontaktformulare sehen, zusammen mit Ressourcen, wie Sie den Effekt auf Ihrer eigenen Website wiederherstellen können.
1: Gestalte es
Sie denken, das ist selbstverständlich, aber ich habe mir eine Menge angesehen? Seiten und Formulare zur Vorbereitung auf diesen Beitrag und 90% oder mehr davon verwendeten die standardmäßigen Browser-Benutzeroberflächenformulare (weiße, eckige Ecken, langweilig). Dies ist nicht unbedingt eine schlechte Sache, aber wenn Sie nach einer Möglichkeit suchen, Ihre Kontaktseite aufpeppen zu können, sind die Formularfelder selbst ein großartiger Anfang. Ändern Sie die Farbe der Felder, um sie besser an Ihre Website anzupassen, runden Sie die Ecken ab oder fügen Sie wie in den obigen Beispielen Striche hinzu. Ein wenig Styling trägt wesentlich dazu bei, dass Ihre Formulare individuell gestaltet werden.
Hilfreiche Ressource:
Wenn Sie Hilfe benötigen, lesen Sie diesen Beitrag von 40 CSS Web Form Style Tutorials für Webentwickler.
2: Gib es den Fokus
Besuchen Sie die Website oben und füllen Sie das Kontaktformular aus. Wenn Sie dies tun, wird die Website dunkler, sodass das Kontaktformular der einzige Fokus Ihrer Aufmerksamkeit ist. Dies ist eine wunderbare Möglichkeit, um sicherzustellen, dass Benutzer nicht erst anfangen, Sie zu kontaktieren, um sich von anderen Inhalten ablenken zu lassen. Es ist auch eine großartige Möglichkeit, um Ihre Besucher dazu zu bringen, "ooooh" zu sagen.
Hilfreiche Ressource:
Halten Sie bei Build Internet an, um zu erfahren, wie Sie mit jQuery Inhalte dimmen können.
3: Mach es doof
Wenn Sie die Benutzer wirklich dazu auffordern möchten, Sie zu kontaktieren, gestalten Sie die Umgebung des Kontaktformulars freundlich und einladend. Dies macht Ihr Unternehmen ansprechbarer und lässt Ihre Besucher unbewusst eine freundliche Antwort erwarten (stellen Sie sicher, dass Sie eine liefern!). In den obigen Beispielen werden helle Farben und dumme Illustrationen verwendet, um diese Aufgabe zu erfüllen. Sie können jedoch gerne mit Typografie, Symbolen oder anderen Elementen kreativ werden, um die Anspannung zu reduzieren, die ein Benutzer möglicherweise mit einer Frage oder einem Kommentar anspricht.
Hilfreiche Ressource:
Hier sind ein paar super billige, doofe Charaktere von Graphic River, um den Einstieg zu erleichtern.
4: Gib eine Karte
Wenn Ihre Website für "Ziegel und Mörtel" ist? Laden oder jede Art von physischem Standort ist die Integration einer Karte in Ihre Kontaktseite ein absolutes Muss, damit potenzielle Kunden Sie tatsächlich finden können. Dies kann so einfach sein wie eine stilisierte illustrierte Karte oder so umfassend wie eine interaktive Google Map. Bei den obigen Beispielen handelt es sich um den interaktiven Ansatz (meiner Meinung nach den besseren Weg), von dem der zweite sogar benutzerdefinierte Fahrtrichtungen integriert, die oben auf der Karte deutlich sichtbar angezeigt werden.
Hilfreiche Ressource:
Wenn Sie Hilfe benötigen, lesen Sie diesen kostenlosen Google Map Generator für Ihre Homepage.
5: Mach es schlau
Um zu sehen, was ich mit "smart" meine? Sehen Sie sich die beiden obigen Beispiele an. Die erste prüft den Inhalt, den der Benutzer in das Feld eingibt, um sicherzustellen, dass er korrekt ist (z. B. Formularüberprüfung). Wenn Sie zum Beispiel "Joe" eingeben? In das E-Mail-Adressfeld werden Sie aufgefordert, eine gültige E-Mail-Adresse einzugeben. Das zweite Beispiel implementiert die Formularhervorhebung einfach kreativ. Indem Sie das aktuelle Feld des Benutzers deutlich hervorheben, helfen Sie ihm, seinen Fokus und seine Position im Formular zu behalten. Es ist ein kleiner Usability-Touch, der wirklich jedem helfen kann, der Schwierigkeiten hat, in welchem Bereich er sich befindet.
Hilfreiche Ressourcen:
Keine Ahnung, wie man Formen formt? Hier sind einige Ressourcen zur Formularvalidierung, aus denen Sie auswählen können:
- Wirklich einfache Formularvalidierung
- Tutorial: Formularüberprüfung mit JavaScript
- Free Form Validation Script (Apple Developer Connection)
6: Gehen Sie durch sie hindurch
Wenn Sie bestimmte Informationen benötigen, die Sie vom Benutzer benötigen, z. B. Budgetanforderungen oder Interessenbereich, zählen Sie nicht dazu, dass der Benutzer diese Informationen enthält, auch wenn Sie ausdrücklich angeben, dass die Informationen vorhanden sein müssen. Verwenden Sie stattdessen Kontrollkästchen, Optionsfelder und Dropdown-Listen, um sicherzustellen, dass sie nicht ausgelassen werden. Diese Tools helfen Benutzern nicht nur dabei, sich an alles zu erinnern, was sie mit einschließen müssen, sondern erleichtern im Allgemeinen den Kontaktprozess erheblich, da der Schreibaufwand entfällt.
Hilfreiche Ressourcen:
Schauen Sie sich diese vollständige Liste der Benutzeroberflächenelemente an, die nach Browser und Betriebssystem aufgegliedert sind.
7: Animiere es
Beide Websites verwenden ein animiertes Dropdown-Menü für ihr Kontaktformular. Wenn Sie dieses Menü direkt auf der Startseite platzieren, können Besucher sich sehr leicht mit Ihnen in Verbindung setzen, ohne nach Kontaktinformationen zu suchen. Der Dropdown-Aspekt ermöglicht es, diese Aufgabe zu erledigen, ohne Ihre Homepage durcheinander zu bringen. Beachten Sie, dass das Blue Acorn-Menü den Website-Inhalt tatsächlich nach unten drückt, während Fred Maya über den vorhandenen Inhalt gleitet. Beide Möglichkeiten funktionieren gut, aber ich bevorzuge die Methode Blue Acorn, da sie nichts blockiert und ohne Transparenz leichter lesbar ist.
Hilfreiche Ressourcen:
Um einen ähnlichen Effekt auf Ihrer Website zu erzielen, lesen Sie das Noupe-Tutorial zum Erstellen von Dropdown-Menüs mit jQuery & CSS.
8: Theme it
Meine Standardantwort für alle kreativen Dinge: Kommen Sie einfach zu einem cleveren Thema! Wenn Sie eine Oberfläche mit einem Spiegel versehen, mit dem die Benutzer bereits vertraut sind, können Sie nicht nur großartige Designideen liefern, sondern auch Ihre Benutzerfreundlichkeit erhöhen (dies kann auch Ihre Benutzerfreundlichkeit beeinträchtigen, wenn Sie nicht aufpassen). Im obigen Beispiel wird ein iPod touch als Schnittstelle für das Kontaktformular verwendet. Denken Sie an etwas Einzigartiges für Sie! Die Möglichkeiten umfassen alles von einer Haftnotiz bis zu einer Visitenkarte.
9: Machen Sie Konversation
Das obige Beispiel war eine der einzigartigsten Ideen, auf die ich gestoßen bin. Wie beim Kontaktformular Mad Libs werden dem Benutzer ein paar Sätze gegeben und gebeten, die Lücken auszufüllen.Dies stellt sicher, dass Sie die Informationen erhalten, die Sie möchten, aber dem Benutzer angezeigt werden. Dies ist ein viel freundlicheres Format als bei einfachen alten Feldern mit Beschriftungen. Sicherlich ist es weniger brauchbar, da der Benutzer mehr lesen muss, aber es bekommt einen goldenen Stern zum Spaß!
10: Machen Sie es übergroß
Eine einfache Möglichkeit, die Aufmerksamkeit eines Benutzers mit allem, was Sie entwerfen, zu erhalten, besteht darin, es viel größer zu machen, als er es erwarten würde. Nachdem Sie eine Reihe von Kontaktformularen in normaler Größe verwendet hatten, wirkte das auf der oben genannten Website ausgesprochen groß. Die Überraschung war eine angenehme, obwohl ich das übergroße Gefühl der Formen und des Textes liebte. Ich weiß nicht genau warum, aber aus irgendeinem Grund fühlt sich big freundlich an!
Fazit
Sie sollten jetzt vor neuen Ideen stehen, wie Sie aus Ihrem eigenen Kontaktformular Stolz machen können. Erstelle fantastische Kontaktseiten und erzähle uns davon in den Kommentaren unten. Teilen Sie uns auch mit, welche der oben genannten Beispiele Ihr Favorit war und haben Sie Ihre eigenen Ideen, wie Sie diese verbessern können.