Webwissen: Gravity Forms Formulare mobil optimal nutzen

Etwa 60% der Zugriffe auf die von uns betreuten Websites kommen im November 2016 über Smartphones und Tablets. In 100% unserer Wordpress-Projekte setzen wir das Formular-Plugin "Gravity Forms" ein, um vom einfachen Kontakt-Formular bis hin zum komplexen Aboshop verschiedenste Anwendungsfälle einfach und unkompliziert zu realiseren. Was ihr tun müsst, damit euer Formular auch mobil richtig gut funtioniert, erfahrt ihr hier.

Eines gleich vorweg: Gravity Forms funktioniert mobil grundsätzlich schon sehr gut. Trotzdem gibt es ein paar Stellschrauben, die das mobile Erlebnis noch verbessern können.

Teil 1: Die richtige Tastatur für die Eingabe von Zahlen

Wer kennt (und hasst) dieses Verhalten nicht: Du füllst ein Formular auf dem Smartphone aus – und beim tippen ins Postleitzahlen-Feld erscheint die normale Buchstaben-Tastatur, anstatt des Ziffernblocks. Du musst also entweder die Tatstatur manuell umschalten, oder eben die Zahlen über die Buchstaben-Tastatur eingeben. In jedem Fall dauert es länger und als User ärgern wir uns, dass wir nicht gleich die zum Feld passende Tastatur angezeigt bekommen. Etwa so:
nummerntastatur

Das will ich auch – wie kann ich das einstellen?

  1. Grundsätzliche Einstellung in Gravity Forms: HTML5 Ausgabe
    Grundvoraussetzung für die richtige Auswahl der Tastatur ist, dass ihr in den Einstellungen von Gravity Forms (also in den globalen Einstellungen, nicht am einzelnen Formular) die Ausgabe in HTML5 aktiviert:
    gravity-forms-html5-mobile
  2. Das richtige Formularfeld auswählen: „Nummer“
    Damit auf mobilen Geräten die richtige Tastatur aufpoppt, müsst ihr nun noch sicherstellen, dass ihr im Formular auch die richtigen Felder verbaut habt. Oftmals wird einfach immer das Feld „einzeiliger Text“ verwendet, auch für Nummern. Am Desktop ist das auch kein Stress, mobil sieht die Welt also anders aus. Hier bitte bei Zahlen immer das etwas eigenartig benannte/schlecht übersetzte Feld „Nummer“ verwenden:
    gravity-forms-mobile-nummer
    Aber Achtung, beim Feld „Hausnummer“ werden oftmals auch Buchstaben eingegeben, daher ist hier das Feld nicht unbedingt geeignet.
  3. Formular speichern – und das war es dann auch schon!
    Zücke Dein Smartphone, teste es und freue Dich, dass es so einfach sein kann, Deine User happy zu machen!

Der nächste Teil folgt bald!

Alle Beiträge von Stephan

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.