Seit Version 1.2 ist es mit Breezingform möglich Formulare für die Darstellung auf Mobilgeräten/Smartphone zu optimieren. Folgendes Tutorial zeigt Ihnen wie Sie in wenigen Schritten aus einem Desktop Formular ein mobiles Formular erstellen.
Aktivieren des Mobile Modus:
- Erstellen Wie wie gewohnt Ihr Formular.
- In Formular => erweitert => check "Mobile Darstellung".
- Formular speichern.
- Nun können Sie das Formular mit Ihrem Smartphone testen.
Wenn Sie nun die entsprechende Seite mit Ihrem Smartphone geöffnet haben erscheint wie gewohnt die Desktop Ansicht, allerdings mit einem Button darüber "Mobile Version". Wenn Sie diesen dann betätigen öffnet sich das Formular in der Mobilen Ansicht im Vollbild Modus.
Erzwinge mobile Ansicht
- Erstellen Wie wie gewohnt Ihr Formular.
- In Formular => erweitert => check "Mobile Darstellung".
- In Formular => erweitert => check "Erzwinge mobile Darstellung".
- In Formular => erweitert => "Zurück-URL für mobile Darstellung" geben Sie die URL an wohin das Fomular verlinken soll nachdem der Benutzer die Eingabe neendet hat.
- Formular speichern.
- Öffnen Sie das Formular wieder mit Ihrem Smartphone
In diesem Fall wird direkt die mobile Ansicht des Formulars geöffnet.
Die mobile Ansicht hat jedoch einige Besonderheiten
- Wenn Sie die mobile Ansicht erzwingen _muss_ in jedem Fall die "Zurück-URL" angegeben werden da das Formular sich nach dem Absenden wieder erneut öffnet und sich somit in einem Loop befindet.
- Die Formulare könen dann nur noch als Menuitem oder mit dem Plugin in die Seite eingebunden werden, aber nicht mehr mit dem Modul und auch nicht mehr in einem IFrame eingebettet werden.
- In der mobilen Ansicht sind die restlichen Inhalte der jeweiligen Seite versteckt.
- Falls Sie in dem Formular das reCaptcha verwenden wird in der mobilen Ansicht auf das normale Captcha angezeigt
- Datei Uploads sind immer optional bei mobilen Formularen.
Styling
Da die mobile Ansicht mit JQuery Mobile realisiert wurde, können Sie den JQuery Mobile Themeroller benutzen um die Styles der Formulare zu ändern.
Nachdem Sie mit Themeroller Ihr design erstellt haben öffnen Sie folgenden Datei mit einem Texteditor :
/wp-content/breezingforms/themes/jq.mobile.min.css
und kopieren den von Themeroller generierten Code hinein.
Wenn Sie andere Icons brauchen dann ersetzen Sie die bestehenden in
/wp-content/breezingforms/themes/images/
Die neuen Styles sind Update sicher und müssen nach einem Update von Breezingforms nicht neu erstellt werden. Bitte beachten Sie jedoch die Version von JQuery mobile 1.4.4 wenn Sie die Styles ändern. Andere Versionen als die in Breezingforms verwendete kann zu einem ungewünschten Ergebnis führen.