Tips and Tricks for Styling Forms

Tips and Tricks for Styling Forms

Forms are an important part of any usable website design. They are an easy way for users to ask questions, provide comments, or request services of a company. Or, at least, they should be. An improperly styled form can confuse and frustrate users, and might keep users from being able to effectively use it. The following are a few simple things that developers should keep in mind when styling forms, to make them look as good and be as effective as possible.

Even Spacing is Important

Avoid Awkward and Uneven Spacing with Web Forms | BlueprintKeeping fields evenly spaced is a great way to keep a form organized and easy to read. Adding a margin to each field, both vertically and horizontally, is the best way to create space between fields. Try to avoid positioning fields one by one. A well-designed layout with good use of HTML classes will make it individual positioning unnecessary, and is a much cleaner and more efficient method. In terms of how much space should be put between each field, try to maximize the amount of space provided for the form, but not so much that the fields are too spread out. The exact amount will depend on the form, but somewhere around 20px of space will usually do the trick. It is also a good idea to try and make vertical spacing and horizontal spacing as similar as possible.

Remember Responsive Design

In a world where everyone has a smartphone, mobile use of websites is becoming more common, which means using forms on mobile devices is becoming more common as well. Therefore, it is important that forms are easy to understand and use on smartphones and tablets. When styling forms for mobile devices, it is a good idea to use @media queries. @media queries allow you to target styles for certain devices based on different parameters, such as the width of the device or window. This way, you can add custom styles specific to different classes of devices. Using @media queries can also be more effective than using Javascript, since any edits to the style can be made directly within the CSS without having to worry about adding any new logic to a Javascript file. It is also inefficient to change CSS with Javascript when you have the ability to directly edit the CSS instead.

Clearly Label Required Fields

It is a good idea to include required fields in a form, such as a name or email address, to make sure you get enough information about the user to be able to effectively assist in their needs. Making sure the user knows which fields are required is also important. Adding something such as an asterisk after the label of a required field is a simple and universally understood way to signify a required field. Plugins such as Gravity Forms allow you to easily create required fields without having to include any extra code and they will mark required fields for you. However, be careful when styling your form so that you are sure to not hide that marking. Gravity Forms, for example, puts its marking on the field’s label, so if you choose to hide the label, you will have to find some other way to mark the required fields, such as marking the placeholder.

Creating Multi-Column Layouts

For forms with a lot of fields, splitting the form into multiple columns can be a great way to make the form look more pleasing to the eye. Multi-column layouts allow you to maximize the amount of fields that can fit into the space available for the form, and can be a good way of organizing forms into multiple sections. If you want to style a form to give it multiple columns, the float attribute is an excellent tool to remember. Properly sizing the form’s parent element is important. In order to maintain spacing, it is much easier to size the parent element such that the first and last columns will be spaced correctly (since the fields will be floated as far right/left as they can and still be within their parent element) than it is to move the fields around after they have been floated. It should be noted that the float attribute works best for two-column layouts, since there is no such thing as “float: middle”. You can still use float for forms with three or more columns, but the fields in the middle columns will require some custom styling.

Again, these tips and tricks for styling forms can go a long way into helping the user experience of your site and ultimately drive more conversions. If you ever need any help then don’t hesitate to call us here at Blueprint at 770-817-9561.

By: Toma Tadros
  • Jeff Cline

    Great post Toma.
    Would love to hear your thoughts on what the optimum number of form fields are? or is that dependent on your purpose?

    Two things you didn’t touch on,
    The actual call to action text of the form. Why are you asking the user to give away their valuable personal information?
    And second – the submit button text – is “submit” or “contact us” good enough?

    My personal belief is that the wording of these two elements can make a significant impact on form performance. Would love to hear your thoughts.

  • Tolu Akande

    Love your point on responsive design. With most users on a mobile device or tablet, contact forms need to have amazing UX. People are on the go and they need to be able to fill out a form quickly and easily with their thumbs. Great article, Toma.

  • Bryce Thorson

    Nice post, Toma.
    In your post you mention responsive forms and the labeling of forms to be quite important factors in the process of creation. An issue that I have observed recently that is worth mentioning is that many of the mobile forms on sites that I visit use the placeholder method of labeling their forms. As we know, there are two common methods of displaying the label for each respective field in a contact form — Placeholder & Label. The placeholder method currently seems to be a common trend in web design, and it usually looks better aesthetically. Yet, from a UX perspective, the use of placeholders in forms on a mobile format simply forces the user to remember what the placeholder label is because the moment a user touches an individual field within the form, the label is removed so the user can input their data. One can see how this can create ‘speedbumps’ in the entire mobile UX process within a site, and that the importance of proper styling within forms should always be stressed.