Mobiscroll Forms helps you to deliver pixel-perfect responsive forms in your web and hybrid apps.

What you get with Forms

Page styling & typography

Takes care of setting the background colors, spacing and typographic styling. It makes sure that the content you add shows up nicely on any screen-size.

Learn about the typography you can use.

Themes & theme styling

As all Mobiscroll controls, Forms support the following distinctive themes:

  • iOS
  • Android Material and Android Holo
  • Windows Phone
  • Mobiscroll

Theme colors can be refined with the theme builder - learn how you can do it.

Text fields

Text fields are the backbone of every form. Use it to capture a wide range of properties from plain text to passwords.

  • Text inputs: With single-line input fields you can capture all kinds of values, ranging from plain text, passwords, numeric values, email addresses… (all HTML5 input types are supported).
  • Text areas: Let users enter multi-line text like comments and any longer content.

Use labels, icons, placeholders or a combination of them to help users get meaning at a glance. Show/hide functionality built in for password fields.

Learn how to implement single-line and multi-line text fields.

Select styling

Similar to the single line input styling, it features a chevron/dropdown arrow to clearly signal the difference between select and text input.

See the select with and without icons.

Segmented controls

Easily lay out two to five options for single and multiple select. Making all options instantly visible lets users make selections with a single interaction instead of at least 3 (tap to open select, do the select, hit set - like for the traditional dropdown).

Learn how to use the segmented control for single and multiple select.

Checkbox

Similar to the native checkbox in functionality but a look and feel that fits with the overall user experience and theme. Features description text, checkbox list and disabled styling.

View a demo of the checkbox list.

Switch

Just like the checkbox, the switch lets users turn items on/off. Can be rendered as a list of fields, like the checkbox list. Features description and disabled styling.

See how to use the switch.

Radio Buttons

Single select for a list of options. Use it instead of the segmented control if there are more items that would fit in a single line - usually five and above.

View this live demo that shows a radio button list featuring items with different states.

Buttons

Buttons with different states and styles - inline or raised, left-right-center aligned or justified, with and without icons.

Learn how to use the buttons in your forms.

Steppers

When users need to make small adjustments to values by increasing or decreasing it avoid free-form input and dropdowns. Steppers help in minimizing mistakes, and reduce the number of taps for getting the values right.

See the stepper in action in a live demo.

Validation styling for errors and error messages

Styling for validation errors and messages is available. Validation logic needs to be plugged in or implemented externally of Mobiscroll.

View an example implemented with jQuery Validate.

What's next?

Did this answer your question?