Hinweis
Wir haben diese Anleitung veraltet, da die Formulare von Jotform jetzt standardmäßig mobil ansprechbar sind. Das bedeutet, dass keine weitere Konfiguration erforderlich ist.
Die mobile Nutzung des Internets gehört zum Mainstream. Wenn Ihre Website im Web nicht richtig angezeigt wird, entgehen Ihnen Nutzer. Die Menschen nutzen häufig ihre mobilen Geräte, um auf Websites zuzugreifen. Das gilt auch für Ihre Formulare, wie z.B. Anmelde-, Kontakt- oder Lead-Genregierungsformulare. Formulare sollten auf allen Geräten mobilfreundlich sein, um die Benutzerfreundlichkeit zu gewährleisten und ein hochwertiges Benutzererlebnis zu bieten. Eine Möglichkeit, dies zu erreichen, besteht darin, Ihre Formulare mobilfähig zu machen. Das bedeutet, dass Ihr Formular unabhängig davon, von welchem Gerät aus ein Benutzer darauf zugreift, entsprechend angezeigt wird. Sie müssen es nicht vergrößern oder verkleinern, um es zu sehen. In dieser Anleitung zeigen wir Ihnen, wie Sie mit Jotform mobile responsive Formulare erstellen können.
Jotform bietet mehrere Möglichkeiten, Formulare mobilfreundlich zu gestalten, auch ohne eine einzige Zeile Code für technisch nicht versierte Benutzer zu schreiben. Hier sind die Möglichkeiten, mit Jotform mobilfreundliche Formulare zu erstellen.
Formulare responsiv gestalten im Formular Designer
Dies ist die empfohlene Methode, da sie Ihr Formular in ein vollständig mobiles responsives Formular für verschiedene Geräte wie iPhones und iPads verwandelt, sowohl im Hoch- als auch im Querformat. Hier sind die Schritte, um dies für Ihr Formular zu aktivieren.
- Klicken Sie im Formular-Generator auf das Symbol Form Designer.
- Klicken Sie auf den Button Erweiterter Designer am unteren Rand des Formular-Designer-Panels.
- Gehen Sie im Erweiterten Designer zum Formular-Layout Abschnitt.
- Kreuzen Sie, die Dieses Formular responsiv machen Option an.
Tipp
Der Formulardesigner verfügt über einen eingebauten Vorschaumodus für verschiedene Geräte und Ansichten. Klicken Sie auf den Button Speichern oben links auf dem Bildschirm. Nach dem Speichern sollte das Vorschausymbol angezeigt werden.
Die Macht von Injecting CSS
Wenn Sie Ihren eigenen Stil bei der Gestaltung von Formularen haben und benutzerdefinierten CSS-Code bevorzugen, ist dies genau das Richtige für Sie. Dies ist für fortgeschrittene Benutzer.
Sie können die benutzerdefinierten CSS-Codes über den Formular-Generator oder den Formulardesigner einfügen. Hier finden Sie eine Anleitung, wie Sie CSS über den Formular-Generator einfügen können. Der Form Designer ist fortgeschrittener, daher empfehlen wir Ihnen, CSS dort zu schreiben. Um mit der Erstellung von benutzerdefiniertem CSS-Code zu beginnen, klicken Sie im Formulardesigner auf die Registerkarte CSS.
Schnelle Tipps zum Einfügen von benutzerdefiniertem CSS:
@media query ist die typische Methode, um Webseiten responsive zu machen. Das gilt auch für die Formulare. Sie definiert unterschiedliche Stilregeln für verschiedene Medientypen/Geräte. Hier ist ein Beispiel für eine CSS-Medienabfrage, die auf bestimmte Breiten abzielt.
/* Zielt auf einen Anzeigebereich mit einer maximalen Breite von 768px ab*/
@media screen and (max-width:768px) {
/* STILE KOMMEN HIER HIN */
} Hier ist eine gute Quelle, um etwas über Media Query CSS Codes für verschiedene Geräte zu lernen.
Verwendung Mobile Responsive Widget
Wenn Sie ein Widget verwenden möchten, anstatt die beiden obigen Optionen beizubehalten oder Ihren eigenen CSS-Code einzufügen, hat dieses Widget schon alles gesehen und Millionen von Formularen zu dem verholfen, was sie benötigten – nämlich mobil ansprechbar zu sein.
Wir empfehlen, stattdessen eine der ersten beiden Optionen zu verwenden, aber der Vollständigkeit halber sei gesagt, dass dieses Widget eine großartige Möglichkeit ist, dasselbe zu erreichen.
Wenn Sie mehr über das Hinzufügen von Widgets zu Ihren Formularen erfahren möchten, besuchen Sie Wie Sie ein Widget zu Ihrem Formular hinzufügen.
Mobile Responsive Themes
Manchmal ist ein Theme die beste Wahl, um Ihr Formular großartig aussehen zu lassen und gleichzeitig dafür zu sorgen, dass es sich so verhält, wie es sollte, egal auf welchem Gerät es geöffnet wird. Holen Sie sich eines der großartig aussehenden Themes, die von verschiedenen Designern entworfen wurden und die Sie hier finden.
Hinweis
Die Sicherstellung der mobilen Reaktionsfähigkeit kann eine komplexe Aufgabe sein. Bei der Fülle an mobilen Geräten auf dem Markt und deren Leistung, die sich der von Desktop-Computern annähert, kann es eine Herausforderung sein, eine nahtlose Reaktionsfähigkeit zu erreichen, wenn man nicht richtig damit umgeht.
Wenn Sie Ihr Formular in Ihre Website einbinden und nicht zufrieden sind, wie es aussieht, wenn die beiden Optionen aktiviert sind, können Sie ruhig ein wenig experimentieren.
Sie können jede der oben genannten Kombinationen ausprobieren, und wenn Sie eine neue Möglichkeit finden, mobile Reaktionsfähigkeit zu erreichen, die hier nicht behandelt wird, lassen Sie es uns bitte in den Kommentaren wissen.
Fangen Sie an, mit Jotform mobile responsive Formulare zu erstellen!
Kommentar abschicken: