Forms

The main objective of a form is to gather information from the user. Figure out which would be the most natural and logical order for the user to provide the information needed. Also, try to keep to form as short and light as possible to increase the probability of user filling it. You can include nonmandatory fields as well, but don’t flood the form with too much “nice to have” -information. Increasing the amount of user input requested will very likely decrease the conversion rate of the form, even thought the fields are marked as optional.

You can stack text fields horizontally. Pick self-explanatory names for labels and write a short descpription to explain the action needed from user. If user still needs more information about the field, you can add info button and/or additional information text under the field.

Works just like text fields, but you define the type of amount asked from the user. You may also include the field specific dropdown under the field, such as tax rate, if it’s directly linked with the amount asked in the field.

In the label explain clearly if the user needs to input specific date or a range between two dates. If the relative description of the dates makes more sense in your use case, choose a date picker with options.

If there are lots of items in the dropdown, consider using a dropdown with search feature.

Checkboxes and radio buttons are quick and light way for the user to input information. However, consider if in your use case these quick selections are the easiest way for the user to comprehend the needed inputs, or would a dropdown make more sense. You can choose if you want have a border around all the checkboxes or radio buttons of your element.

Slider is quick and easy option if user needs to select some range with rough values. Provide the default values to which the slider will snap. You need also tell the user which are the low and high end of the range. Never use slider for choosing precise values or in situations where there are way too many values in the range. It will make using the slider on mobile almost impossible.