Since version 1.2, BreezingForms introduces a new and easy-to-setup feature to display WordPress® forms optimized for mobile handsets (think of iPhone®/iPad®/iPod®, Android®, Bada® and co.).
All the form 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 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 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.
- 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 open the file /wp-content/breezingforms/themes/jq.mobile.min.css and paste the resulting theme roller's CSS into the file and save it.
If you need to change the icons, then please replace them with the ones in /wp-content/breezingforms/themes/images/ to complete the re-styling.
Your mobile styles are protected from BreezingForms upgrades, so you don't need to adjust them on every update.