I did a fair amount of Google-ing on this looking for a simple answer – without much luck.
So, in case this comes in handy here is a simple-ish way to use Google Spreadsheet forms on an iPhone for data entry in the field.
My current project is an ethnographic survey of news habits among commuters – with a focus on mobile devices. I have been gathering anecdotal info for a while on the commuter rail and T.
For class, I needed to formalize the data a bit, and wanted to use Google Spreadsheets. There may be better survey solutions out there that are mobile-friendly, but I have a lot of other stuff in Google Docs, so there you go.
Creating a form to gather Google Spreadsheet data is dead simple. And (previously unknown to me) you can break a survey form into multiple pages and contextually customize questions. That is GREAT for mobile use as it reduces the amount of content on a single page, and eliminates non-applicable queries on-the-fly.
Unfortunately Google Forms does not include any mobile-specific or responsive themes. It does work on a smartphone, but only with some significant pinch-zooming. This is especially a pain when using tiny radio buttons or check boxes.
The solution I arrived at is pretty simple, especially if you have access to a web server.
1. Set the theme for your form to “Plain” in Google Docs.
2. Limit your survey pages to one question each with 4 – 5 answers – eliminating the need to scroll to find the continue/submit button.
3. Use page breaks, and multiple choice options (which allow a redirect to specific pages based on prior answers) to customize the order and questions offered.
4. Embed the survey code from Google into a web page you control. Doing this on your own server is preferable as you want a completely blank page aside from the embed code.
5. Drop a meta tag in the <head> to set a viewport. Something like: <meta name=”viewport” content=”width=320, initial-scale=.9″> I have not touched HTML much recently but viewport is not tough to understand and works on Android as well.
6. Set the iFrame width to 320 (or etc for your phone) and the trim the height to make it as short as possible, without losing the bottom of any page.
7. Test and adjust the viewport width or scale as appropriate.
8. Keep in mind this approach is not the most elegant use of a viewport, but my goal was iPhone specific so I was satisfied to hard-code these settings into the page.
9. Once you finish tweaking, you should end up with a decent looking mobile form, as pictured here, without the need to pinch-zoom every page constantly.
10. Suggest to Google that mobile-friendly themes would be great.