Hinweis
Diese Anleitung wird nicht mehr unterstützt, da Jotform Formulare nun standardmäßig für Mobilgeräte optimiert sind. Dies bedeutet, dass keine weitere Konfiguration erforderlich ist.
Mobile Webnutzung ist allgegenwärtig. Wenn Ihre Website im Web nicht korrekt angezeigt wird, entgehen Ihnen Nutzer. Nutzer nutzen häufig ihre Mobilgeräte, um auf Websites zuzugreifen. Dies gilt auch für Ihre Webformulare, z. B. Anmelde-, Kontaktformulare oder Formulare zur Lead-Generierung. Formulare sollten auf allen Geräten mobilfreundlich sein, um Benutzerfreundlichkeit und ein hochwertiges Nutzererlebnis zu gewährleisten. Eine Möglichkeit hierfür ist die mobile Responsive-Funktion Ihrer Formulare. Das bedeutet, dass Ihr Formular unabhängig vom Gerät, von dem aus ein Nutzer darauf zugreift, korrekt angezeigt wird. Nutzer müssen nicht hinein- oder herauszoomen, um es anzuzeigen. Dieses Tutorial zeigt Ihnen, wie Sie mit Jotform mobile Responsive-Formulare erstellen.
Jotform bietet verschiedene Möglichkeiten, Formulare mobil-responsiv zu gestalten – auch ohne eine einzige Zeile Code für nicht-technische Nutzer. So erstellen Sie mit Jotform mobilfreundliche Formulare.
Formular im Formular-Editor responsive gestalten
Dies ist die empfohlene Methode, da Ihr Formular dadurch vollständig mobil-responsiv auf verschiedenen Geräten wie iPhones und iPads im Hoch- und Querformat angezeigt wird. So aktivieren Sie dies in Ihrem Formular.
- Klicken Sie im Formular-Generator auf das Symbol Formular-Editor.
- Klicken Sie unten im Formular-Editor auf die Schaltfläche Erweiterter Designer.
- Gehen Sie im erweiterten Editor zum Abschnitt Formularlayout.
- Aktivieren Sie die Option Formular responsiv gestalten.
Tipp
Der Formular-Editor verfügt über einen integrierten Vorschaumodus für verschiedene Geräte und Ansichten. Klicken Sie oben links auf dem Bildschirm auf die Schaltfläche Speichern. Nach dem Speichern sollte das Vorschausymbol angezeigt werden.
Die Macht der CSS-Einfügung
Wenn Sie Ihren eigenen Stil bei der Formulargestaltung haben und benutzerdefinierten CSS-Code bevorzugen, ist dies genau das Richtige für Sie. Dies ist für fortgeschrittene Benutzer.
Sie können benutzerdefinierten CSS-Code über den Formular-Generator oder Formular-Editor einfügen. Hier finden Sie eine Anleitung zum Einfügen von CSS aus dem Formular-Generator. Der Formular-Editor ist komplexer, daher empfehlen wir, CSS dort zu schreiben. Um mit der Erstellung von benutzerdefiniertem CSS-Code zu beginnen, klicken Sie im Formular-Editor auf die Registerkarte CSS.
Kurztipps zum Einfügen von benutzerdefiniertem CSS:
@media query ist die typische Methode, um Webseiten responsive zu gestalten. Dies gilt auch für Formulare. Sie definiert unterschiedliche Stilregeln für unterschiedliche Medientypen/Geräte. Hier ist ein Beispiel für eine Media-Query-CSS, die auf bestimmte Breiten abzielt.
/* Zielt auf einen Anzeigebereich mit einer maximalen Breite von 768 Pixeln ab*/
@media screen and (max-width:768px) {
/* STYLES GO HERE */
} Hier ist eine gute Quelle, um mehr über Media Query CSS Codes Targeting zu erfahrenverschiedene Geräte.
Mobile Responsive Widgets verwenden
Wenn Sie ein Widget verwenden möchten, anstatt die beiden oben genannten Optionen beizubehalten oder Ihren eigenen CSS-Code einzufügen, ist dieses Widget bereits bestens geeignet und hat Millionen von Formularen geholfen, das zu erreichen, was sie brauchten – mobil responsive zu sein.
Wir empfehlen stattdessen die Verwendung einer der ersten beiden Optionen. Der Vollständigkeit halber sei jedoch darauf hingewiesen, dass dieses Widget eine hervorragende Möglichkeit bietet, dasselbe zu erreichen.
Weitere Informationen zum Hinzufügen von Widgets zu Ihren Formularen finden Sie unter So fügen Sie Ihrem Formular ein Widget hinzu.
Responsive Themes für Mobilgeräte
Manchmal ist das Theme die beste Wahl, um Ihr Formular ansprechend zu gestalten und gleichzeitig sorgen Sie dafür, dass sich Ihr Formular unabhängig vom Gerät optimal verhält. Holen Sie sich eines der attraktiven Themes, die Ihrem Formular den gewünschten Touch verleihen. Sie wurden von verschiedenen Designern handgefertigt und stehen hier für Sie bereit.
Hinweis
Mobile Responsiveness zu gewährleisten, kann eine komplexe Aufgabe sein. Angesichts der Vielzahl mobiler Geräte auf dem Markt und ihrer Leistung, die an die von Desktop-Computern heranreicht, kann es ohne die richtige Handhabung schwierig sein, nahtlose Responsiveness zu erreichen.
Wenn Sie Ihr Formular in Ihre Website einbetten und mit der Darstellung mit den beiden aktivierten Optionen unzufrieden sind, können Sie gerne experimentieren.
Sie können jede der oben genannten Kombinationen ausprobieren. Wenn Sie eine neue Möglichkeit zur mobilen Responsiveness finden, die hier nicht behandelt wird, teilen Sie uns dies bitte in den Kommentaren unten mit.
Erstellen Sie jetzt mobil responsive Formulare mit Jotform!
Kommentar abschicken: