Mobile Optimization

Documentation Home

Overview

With smartphones, tablets, and other mobile devices becoming more popular and wide-spread, it is increasingly important to design your forms and surveys with your target audience in mind. These devices provide a convenient way to access the Internet, but also typically feature smaller screens and touchscreen input, among other differences, from a common desktop or laptop computer. This page will guide you through evaluating your forms and surveys to determine if further optimization should be done as well as how to implement the optimizations for mobile devices.

When to Optimize for Mobile Devices

By default, your forms will work on mobile devices without doing anything further. The methods listed below will improve mobile usability on most forms, but may hinder it or make your form unusable if applied to an incompatible form, such as one that is too wide due to large images or form items like Matrices.

A quick test you can do to determine if your form is a good candidate for optimization is to go to the "Form->Edit->Look & Feel" page, click the "Customize" tab and change the width to "320px", and save. If your form does not have anything cut off on the right and looks reasonable given the width, then your form is a candidate for mobile optimization. You can change the width back to what you originally had and then continue with the steps below.

Pros of Optimizing:

  • Less zooming and scrolling are required to complete the form.
  • Customized spacing, sizing and minimized styling make the form load faster and easier to complete due to the mobile-specific layout.
  • Mobile optimization goes hand-in-hand with QR Codes and other situations where you know your users are most likely on a mobile device.

Cons of Optimizing:

  • If an item on your form is too wide, it may get cut off on the right (follow the steps above to evaluate your form). If your form needs to be this wide, we recommend not following these steps. Users on mobile devices will still be able to complete your form.
  • There is no mobile phone standard, and both the devices and browsers change rapidly. What this means is that the accepted way of doing things today could change tomorrow. Additionally, mobile phone browser capabilities vary greatly. iPhone and Android seem to offer the best experience today while older phones are not as reliable with respect to screen resolutions, font sizes, and capabilities, which all vary widely and make the experience from phone to phone different.

There are two levels of optimization, in increasing order of focus on mobile devices: Desktop+Mobile and Mobile-Only. More details on each, as well as how to implement them, are detailed below.

Desktop+Mobile

This method allows you to design your forms just as you do normally. It maintains all of your default styling so desktop users will not see any changes. Additional formatting will be done for mobile devices in a best-effort attempt to display a more usable form. Choose this method when:

  • your form will mainly be accessed by users on desktop and laptop computers
  • you would like to enhance the experience for users on mobile devices
  • you accept that your form may be formatted slightly differently on mobile devices than on a desktop

When you are done designing and customizing your Look & Feel settings, follow these steps below to also automatically optimize your form for mobile devices.

  1. Go to "Edit->Form->Look & Feel->Advanced/CSS"
  2. Add the following code to the "CSS Style" section after </style>:
  3. Add the following code to the "HTML Headers" section:
  4. Save the page

Your form is now automatically optimized for all mobile users who visit your form. Desktop users will see no change. Formatting changes for mobile devices may include:

  • removing some borders and shadows
  • making text boxes bigger
  • increasing spacing between input choices
  • displaying items onto separate lines

Mobile-Only

This method is intended for when you anticipate only mobile users visiting your form. It goes a step further than the Desktop+Mobile method by directing you to design your form to target only mobile devices. Desktop users can of course still fill out your form, but it will likely look best on the smaller screens of mobile devices. For example, if you publish your form with the QR Code option, most users will likely be on a mobile device. Choose this method when:

  • your intended audience will mainly be using smartphones and other mobile devices to access your form
  • you accept the limitations of designing expressly for mobile devices

Follow these steps to optimize the form to target mobile devices:

  1. Go to "Edit->Form->Look & Feel->Customize"
  2. Set the width of the form to "320px"
  3. Design your form within the allotted width
  4. Go to "Edit->Form->Look & Feel->Advanced/CSS"
  5. Add the following code to the "CSS Style" section after </style>:

    Note: You may optionally skip this step. This will cause mobile devices to zoom-in on the form by default without applying additional styling enhancements to your form.
  6. Add the following code to the "HTML Headers" section:
  7. Save the page

Your form is now automatically optimized for mobile users. It can still be accessed by desktops, but will look best on mobile devices.

Undoing Mobile Optimization

Follow these steps if you want to remove your form's mobile optimizations from above.

  1. Go to "Edit->Form->Look & Feel->Advanced/CSS"
  2. Remove anything that appears after </style> in the "CSS Style" section
  3. Remove everything between and including <!-- Mobile Optimization Begin--> and <!-- Mobile Optimization End--> in the "HTML Headers" section
  4. Save the Page
  5. Modify the "Form Width" setting, if desired

Your form should now be reverted back to the default state. Again, your form will still be usable by those with mobile devices, but will not feature the above optimizations.

Additional Information

As mentioned above, forms and surveys are optimized for traditional desktops and laptops by default.

If you are using the Custom Success Page format, you may need to adjust the page contents for use with a mobile device, including editing the width to a smaller size.

Editing the "Look & Feel" page outside of the "Advanced/CSS" tab after making the optimizations shown here may remove the code that was entered into the "CSS Style" field. We recommend only making changes in the "Advanced/CSS" tab, or re-entering this code as needed.

In addition to the optimizations shown here, other adjustments to your form may be recommended. Due to their smaller screens, mobile devices may not be able to display large items, such as some images or wide matrix-based items. Conversely, extra-small items or text may be difficult to read or manipulate. When possible, consider resizing or reformating these items, including splitting a matrix item into multiple items.

Publishing your form with a QR Code can help mobile users get to your form easily. However, some users may not have or know about QR Code readers, so it may still be advisable to provide a URL or link to your form.

You can help reduce scrolling on your form, and capture partial results, by adding Page Break items to create a multiple page form.

Documentation Home

Let's get social