Responsive forms

Overview

Responsive refers to the automated styling of your form depending on the size of the visitor's display. This is necessary to increase the usability for visitors on all platforms including desktop and laptop computers, tablets, and web-enabled phones. In addition to resizing the elements so that they're visible, some elements rely on size and position to be usable with touchscreens.

Responsive forms

All forms are automatically responsive to support all device sizes. You do not need to do anything to make your form optimized for mobile devices.

Formsite uses media queries for responsive styling, which can be further customized on the "Form Editor->Style" page then clicking the "Advanced" tab.

Note: Modifying the CSS can break your form. Please edit the CSS only if you have style sheet experience. If you find that your form is unusable, contact support to reset your CSS.

If you wish to customize your CSS for your entire form, you can make your changes to the existing CSS and it will apply for all views. If you wish to customize a certain view—the smartphone view, for example—then that's where the media queries come in.

Add the following code to the bottom of the CSS before the closing </style>:

@media (max-width: 480px){
/* Your custom CSS for small displays goes under this line */

}
@media (max-width: 649px), (device-width: 768px){
/* Your custom CSS for medium displays goes under this line */

}
Embedding responsive forms

Embedded forms is a very popular feature to create a seamless presentation of your Formsite form into your web page. One method is to embed the form into a small box on the page, which may cause the responsive media queries to trigger. A new parameter has been added to the Embed Code to control the responsiveness of your form:

mobileResponsive: true

This parameter controls whether the form should be responsive or not. If you experience trouble with your form layout or styling and you are embedding your form into a smaller than full-width container, try setting this parameter to false.

Tips for mobile forms
  • Long forms are easier to complete if you add Page Breaks. Additionally, continuing to the next page saves the form's responses to that point.
  • QR codes are provided under "Share" then under the "QR Code" tab, which lets mobile users access the form using a code scanner rather than typing in the form address.
  • Some items are not able to be responsive, such as large matrix items. If you know that your audience is likely to access via mobile devices, consider reformatting any large matrix items into multiple individual items.
Additional information

Editing the "Style" page outside of the "Advanced" tab after making changes there may remove the code that was entered into the CSS Style field. We recommend only making changes in the "Advanced" tab after making all other design changes.

Over 1 Billion forms submitted