Before today, if you viewed your Wufoo form on an [iPhone](http://www.apple.com/iphone/), the form would load up all zoomed out with the text being very tiny and very illegible. And while the forms did technically work, you’d have to pinch and zoom in and zoom out and pan around to read any of the labels and any instructions you might have used to create the form. Basically, it wasn’t a very pleasant experience.
Since 6 out of 7 Wufoo Team members use an iPhone on a daily basis, we thought it would be really nice if we could remove all that resizing nonsense and make Wufoo Forms automatically look great when you view them on the iPhone. Here’s a before and after comparison of an example Workshop Registration form loaded on iPhone’s Safari browser:
There’s no need to go to a special URL, it’ll just work if you’re viewing it on an iPhone. In addition to removing all that wasted whitespace to the left and right of the form and starting at a more appropriate zoom level, we made a few additional tweaks to make viewing and filling out Wufoo forms on an iPhone a bit more pleasurable.
– The Wallpaper or Background does not show on the iPhone version. Drop shadows and the outside form border are also turned off. It’s all form, baby!
– Because the iPhone does a great job of making it obvious which field you’re filling out, the fields do not show the highlight color around the field when they’re being filled out.
– All form typography was made larger for increased legibility.
– The width of the form is changed from 640px to 480px, which is the length of the widest side of the iPhone.
– Because of the reduced width, Field Instructions do not show to the right of the fields on hover / field focus. Basically, there’s not enough room, they were too small and when you were filling out the form, they were never conveniently displayed. Instead we’ve set Field Instructions to always show beneath the field.
– Styles were optimized to work in both portrait and landscape mode.
– Aside from the changes mentioned above, your custom themes and branding should still work like a charm.
These new styles and behavior are auto-magically baked into every Wufoo form and happily available to all users across all plans. We hope you enjoy a better mobile workflow with these iPhone friendly web forms!
Comments
Beautiful, exactly what I needed.
Posted November 20th, 2009 by JJ.Thank you sooo much we needed this very very badly
Posted November 20th, 2009 by lanae@lafamiliallc.com.Hm… the forms do look better this way, however I ran into a problem with the new format.
Posted November 20th, 2009 by Ventzi Zhechev.The trouble is that I’m using iWeb to build the website for a conference I’m organising and I embed the iframe version of the form. Now—with the instructions being shown below the relevant fields—the form becomes significantly higher on the iPhone, that anticipated. This leads to the Submit button going out of view, together with some of the fields at the end of the form. This, in turn, makes it impossible to complete the form and the user doesn’t get any information as to why things don’t look properly.
Do you have any suggestions on how to fix an issue like that?
Hey Ventzi, the iphone styles will not show on embedded forms. However, please note that if you put an embedded form snippet into a container that’s less than 480px in width, it will automatically move the instructions to below the field since there won’t be enough room to have them pop up on the side.
In iWeb, I’m afraid they force a fixed height on all their widgets and so if you want to use a wufoo form using their software, you need to specify a height that’s tall enough to incorporate the height of the wufoo form and any potential errors in the future.
Posted November 20th, 2009 by Kevin Hale.you guys are kicking @ss and taking numbers! nice work! A lot of great releases in such a short time frame. Are you guys doing Agile development?
Posted November 20th, 2009 by Javier Lopez.aww dang!
Posted November 20th, 2009 by Jamie.Javier, it’s pretty agile. We actually push out new code live to the servers almost every week. Most of it is bug fixes, tweaks and minor improvements to prepare for big changes like pagination, but we’re glad to hear you like the major stuff we’ve been releasing.
Posted November 20th, 2009 by Kevin Hale.Whats the ETA for an Android App?
Posted November 20th, 2009 by Rich.Sweet… I am glad I found my way here. Keep up the good work.
Posted November 20th, 2009 by 509 Media.Nice work guys – yet another reason to keep using wufoo.
Posted November 20th, 2009 by Rob Holmes.Thanks for making it easy for us to provide a great option to our clients with iPhone integration. I just showed a form to a client and it rocked. We have been wufoo customers since your beta and it remains one of our best loved services.
We work with other mobile platforms, too. Have you considered an alternate style sheet for plain-vanilla WAP compatibility? When using forms on Blackberry, Windows Mobile, etc., the generic option is the path of least resistance for greatest compatibility.
I can make a very plain form that looks OK on WinMo IE, but it is a partial solution at best. I would be interested to know your thoughts.
Posted November 20th, 2009 by Gaird.iPhone love here too. wufoo just keeps getting better.
Posted November 20th, 2009 by Jonathan.Everyone needs a hug. Can you make this look nice on webOS and Android too please? I just tried a form on my Pre – it lacks any viewport coding.
For example, this works well on Pre:
Posted November 20th, 2009 by Dave M.Now we recognize who the sensible one is here. Great post!
Posted November 20th, 2009 by Limo Line.You will get customized limousines assisted with well-behaved chauffeurs who are known to every place in the city. Another feature of these limousines is that they can be hired anytime.
http://www.seattlelimoline.com/seattle-airport-transportation/
This is just the just right reply for every one blogger members
Posted November 20th, 2009 by Adobe Flash Player support number.These experts handling the examination are highly well-informed and they have the proper training to deal with every issue that a user might face while using the Adobe software via Adobe Flash Player support number.
More Info: http://www.adobecustomercares.com/adobe-flash-player-support.html