Since version 1.8, BreezingForms' QuickMode introduces a new and easy-to-setup feature to display Joomla® forms optimized for mobile handsets (think of iPhone®/iPad®/iPod®, Android®, Bada® and co.). You may also watch our mobile forms video tutorial here.
All the QuickMode features will work the same on your mobile like for the desktop version but being rendered for easy data input. So you will be able to use your mobile forms not just for simple data entry, but also to create complex form applications that look and feel like a mobile app in your mobile's browser. Users of your site will welcome this bonus as it makes their life easier to enter the required data.
It goes far beyond what so called responsive designs can do because the user experience is a lot closer to mobile apps rather than the experience of a website. So your forms will look and feel like a mobile app. As example, open the following demo with your mobile handset: Job Application Form - Mobile Demo
Basic activation of this feature is simple
- Create your QuickMode form as usual.
- In form => advanced => check "Mobile Forms".
- Save the form.
- Open the form with your mobile browser and test it.
After entering the page with the form, you will see the regular desktop form but with a botton on top saying "Mobile Version". By clicking on the button, the full mobile view will be opened and the form will function the same way like the desktop one.
Forcing the mobile version on page entry
- Create your QuickMode form as usual.
- In form => advanced => check "Mobile Forms".
- In form => advanced => check "Force Mobile".
- In form => advanced => enter a url to where the "Desktop" button at top of the mobile form should link to.
- Save the form.
- Open the page in your mobile browser and test the form.
The moment you access a page that contains a forced mobile view, instead of the desktop, the mobile form will be displayed immediately.
Mobile forms come with a few consequences
- If forcing mobile forms, you need to specify a "Desktop" return URL, otherwise the form would open over and over again.
- Forms can only be opened if the form is running as component or plugin, but never in a module or if running within an iframe.
- Other information from your website is hidden as long as the user is operating on the mobile form.
- If reCaptcha is being used in the desktop form, the native Captcha is used as mobile fallback.
- If you are using BreezingForms 1.8.2 and newer, you can also use the HTML5 uploader, which is compatible with iPhone, iPad, iPod and Android. There the files will be required as setup in your form settings. Regular file uploads are always optional in mobile forms. The sheer amount of different devices makes it impossible to determine what device and OS is capable of handling file uploads.
Styling the mobile forms
It is possible to style your mobile forms differently than the default. Since the mobile forms are implemented utilizing jQuery Mobile, you can use their theme roller to create your own styles.
After you created your own style using the theme roller, please create a file with the name "jq.mobile.1.4.4.custom.css" at the location "/media/breezingforms/themes/" using FTP and paste your themeroller CSS inside. The theme from the themeroller might contain a lot of files. You can recognize the custom css by looking for the theme name you used before downloading the theme. If you for example call your theme "mytheme" in the themeroller, then the relevant file to copy the styles from will be "mytheme.min.css".
Icons can be overriden using icon inline styles in the file "/media/breezingforms/themes/jq.mobile.1.4.4.icons.min.css". You might get custom icon styles depending on the complexity of your themeroller theme, so better don't forget to add them.
Alternatively, you may use external PNGs to be included instead of inline icons. Your themeroller download zip should provide you the right styles for this. In order to use them, please create a file called "jq.mobile.external-png.1.4.4.min.css" at the location "/media/breezingforms/themes/" and paste the external icon style code into it. Then copy the folder "icons-png" from your themeroller's "images" folder into the location "/media/breezingforms/themes/images/". From then on, your theme will be using external PNGs instead of the inline style icons.
Your mobile styles are protected from BreezingForms upgrades, so you don't need to adjust them on every update. But be aware that even minor jQuery mobile updates can break your styles. Because of this, we decided to go by their exact version number (as you can see in the filenames above) and leave your previous styles untouched. If such an update happens, please move your custom css code into the new one from the next version!
