Greetings, fantastic form friends! We know your forms should not only be functional but they should look beautiful too–whether it’s being filled out on a laptop, desktop, or a smartphone. That’s why I want to share three things to keep in mind when designing a form to be mobile-ready. These tips will help you optimize both your field settings and custom theme.

1. Instructions for User text

As you may know, the Instructions for User text will only show to the right of the field when your mouse hovers over it in the live form. This is a great way to give the user guidance about filling out a particular field, when necessary. However, Instructions for User text may not pop up on the right sidebar of the form correctly on certain mobile devices.

Let’s fix this by using the altInstruct CSS Keyword.

This changes the formatting to make the Instructions to User text appear below the field, rather than as a pop-up– we want to make sure users filling out the form on their phones get those additional instructions.

2. Side by side fields

CSS Keywords allow you to modify other aspects of field layouts as well. One of the more popular uses is to place fields side by side in the form–this gives you more control over the formatting by letting you visually organize certain fields into more distinct categories. Depending on how many side-by-side fields you have, this setting can actually have the opposite effect when viewing the form on mobile devices. Check out how jumbled and messy these fields look in my Exercise Training log on an iPhone. All the fields are still contained within the form width, but it’s not a clean look:

For the most orderly form design on your phone, avoid using the side by side CSS Keywords–leave them for forms primarily viewed from a computer or a device with a larger screen. They’re not necessary to make a phone look great on your phone.

3. Logo size

The default width of a Wufoo form is 640px, but the average width of a mobile phone is much less than that. What does this mean for your form’s custom theme? If you’ve configured the logo to fill the full width of the form, it will get cut off in the live form when viewed on a mobile device. As you can see in the first iteration of my Exercise Training log, only a small portion of the logo image is visible:

First, you’ll need to either choose a smaller image or resize it in an image editing platform like Paint for PCs. When the image is the size you want it, you’ll need to host it publically somewhere on the web. If you don’t already have a file/image hosting account, such as with Dropbox or Google Drive, a go-to/free secure hosting site is httpsimage.com

Once you have uploaded the image to the hosting site, go ahead and grab that URL to use it as your own logo in your theme. But this theme isn’t ready to go just yet–I have one more tip to make this theme completely mobile-ready. In the Background property of the Theme Designer, you can match the header color with the form color. Here you can see I made both the form and header’s background white.

This way, if the logo happens to not take up the full width of your phone’s screen, it won’t look out of place. This looks much better:

And there you have it–hopefully these tips will help alleviate any headaches about how to optimize your forms for mobile. As always, don’t hesitate to reach out to our support team for questions!

Want more on CSS tricks? Check out our series on the blog and take advantage of our Guides page. You can also leave us questions/comments below–we check daily.