Notiz
Wir haben diesen Leitfaden eingestellt, da Jotform Formulare jetzt standardmäßig mobilfreundlich sind. Das bedeutet, dass keine weitere Konfiguration erforderlich ist.
Die mobile Internetnutzung ist heutzutage weit verbreitet. Wenn Ihre Website nicht korrekt auf mobilen Geräten angezeigt wird, verlieren Sie Nutzer. Immer mehr Menschen greifen mit ihren mobilen Geräten auf Websites zu, einschließlich Ihrer Webformulare wie Anmelde-, Kontakt- oder Lead-Generierungsformulare. Formulare sollten auf allen Geräten benutzerfreundlich und für eine hochwertige Nutzererfahrung optimiert sein. Eine Möglichkeit, dies zu erreichen, besteht darin, Ihre Formulare mobil responsiv zu gestalten. Das bedeutet, dass Ihr Formular unabhängig vom verwendeten Gerät korrekt angezeigt wird. Die Nutzer müssen nicht hinein- oder herauszoomen, um es zu sehen. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Jotform mobil responsive Formulare erstellen können.
Jotform bietet mehrere Möglichkeiten, Formulare mobilfreundlich zu gestalten, selbst ohne dass nicht-technische Nutzer auch nur eine einzige Zeile Code schreiben müssen. Hier erfahren Sie, wie Sie mit Jotform mobilfreundliche Formulare erstellen können.
Formulare im Form Designer responsiv gestalten
Diese Methode wird empfohlen, da sie Ihr Formular in ein vollständig mobilfreundliches Formular für verschiedene Geräte wie iPhones und iPads verwandelt, sowohl im Hoch- als auch im Querformat. Hier sind die Schritte, um dies in Ihrem Formular zu aktivieren.
- Klicken Sie im Formular-Generator auf das Formular-Designer Symbol.
- Klicken Sie auf die Schaltfläche Erweiterter Designer unten im Formulardesigner Panel.
- Gehen Sie im Advance Designer zum Abschnitt Formularlayout.
- Aktivieren Sie die Option Dieses Formular responsiv gestalten.
Tip
Der Formulardesigner verfügt über einen integrierten Vorschaumodus für verschiedene Geräte und Ansichten. Klicken Sie auf die Schaltfläche Speichern oben links auf dem Bildschirm. Nach dem Speichern sollte Ihnen das Vorschau-Symbol angezeigt werden.
Die Macht von CSS-Injektionen
Wenn Sie Ihren eigenen Stil beim Formulardesigner und benutzerdefinierten CSS-Code bevorzugen, ist dies genau das Richtige für Sie. Dies richtet sich an fortgeschrittene Benutzer.
Sie können die benutzerdefinierten CSS-Codes über den Form Builder oder den Form Designer einfügen. Hier finden Sie Anleitungen zum Einfügen von CSS im Form Builder. Der Form Designer ist fortschrittlicher, daher empfehlen wir, CSS dort zu schreiben. Um mit dem Erstellen benutzerdefinierter CSS-Codes zu beginnen, klicken Sie auf die Registerkarte CSS im Form Designer.
Schnelle Tipps zum Einfügen von benutzerdefiniertem CSS:
@media query ist die typische Methode, um Webseiten responsiv zu gestalten. Dies gilt auch für Formulare. Es definiert unterschiedliche Stilregeln für verschiedene Medientypen/Geräte. Hier ist ein Beispiel für ein Media Query CSS, das auf bestimmte Breiten abzielt.
/* Targets display area with 768px maximum width */
@media screen and (max-width: 768px) {
/* STYLES GO HERE */
}Hier ist eine gute Quelle, um mehr über CSS-Media-Queries für verschiedene Geräte zu lernen.
Verwendung des Mobile Responsive Widgets
Wenn Sie lieber ein Widget verwenden möchten, anstatt die beiden oben genannten Optionen zu nutzen oder eigenen CSS-Code einzufügen, ist dieses Widget die perfekte Lösung. Es hat bereits Millionen von Formularen dabei geholfen, genau das zu tun, was sie sollten – mobilfreundlich zu sein.
Wir empfehlen, stattdessen eine der ersten beiden Optionen zu verwenden, aber der Vollständigkeit halber ist dieses Widget eine großartige Möglichkeit, dasselbe zu erreichen.
Um mehr darüber zu erfahren, wie Sie Widgets zu Ihren Formularen hinzufügen können, besuchen Sie Wie man ein Widget zu seinem Formular hinzufügt.
Mobilfreundliche Themes
Manchmal ist ein Theme die beste Wahl, um Ihr Formular großartig aussehen zu lassen und gleichzeitig sicherzustellen, dass es auf jedem Gerät korrekt funktioniert. Holen Sie sich eines der ansprechend gestalteten Themes, die Ihrem Formular den gewünschten Vorteil verschaffen. Diese wurden von verschiedenen Designern handgefertigt und stehen Ihnen hier zur Verfügung.
Note
Die Gewährleistung der mobilen Responsivität kann eine komplexe Aufgabe sein. Angesichts der Vielzahl an mobilen Geräten auf dem Markt und deren Leistungsfähigkeit, die der von Desktop-Computern nahekommt, kann es herausfordernd sein, eine nahtlose Responsivität ohne die richtige Handhabung zu erreichen.
Wenn Sie Ihr Formular in Ihre Website einbetten und mit dem Aussehen bei eingeschalteten Optionen unzufrieden sind, können Sie gerne mit Anpassungen experimentieren.
Sie können jede der oben genannten Kombinationen ausprobieren. Sollten Sie eine neue Methode entdecken, um die mobile Reaktionsfähigkeit zu verbessern, die hier nicht behandelt wurde, lassen Sie es uns bitte in den Kommentaren unten wissen.
Legen Sie los und erstellen Sie mobilfreundliche Formulare mit Jotform!
Kommentar abschicken: