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.

Hier geht's zum jQuery Mobile Themeroller 

Angebot

Sommer Special! Alle Mitgliedschaften zum Sonderpreis!

Prio Support, alle Extensions und alle Templates in einem Paket.

Hier geht's zur Bestellung

Crosstec hilft sparen!

Falls Sie neu bei Crosstec sind aber bereits einen Formulargenerator bei einem anderen Hersteller gekauft haben, dann bekommen sie von uns einen Rabatt von 25% auf unsere 1-Jahres und Pro-Mitgliedschaften

Wie Sie an den Rabatt kommen?

Schreiben Sie uns einfach eine kurze Email mit beigelegten Kaufbeleg (z.B. PayPal Quittung) an sales@crosstec.org.

Wir unterstützen die Joomla Community

Crosstec unterstützt weltweit alle offiziellen Joomla! User Groups und Organisatoren von Joomla! Days die bei Joomla.org registriert sind.

Falls das auf dich zutrifft und du eines unserer Produkte brauchst, schreib uns eine kurze Email an info@crosstec.org und du bekommst eine Flatrate-Mitgliedschaft geschenkt!