The main form of my webapp looks like this:

enter image description here

With the next colors:

Background color...: #F4F9FD
Tittle color.......: #3C325C
Button color.......: #DE373D

Why do forms usually appears within a box? Does it improves the user experience? How?

enter image description here

4 Answers 4


It can either be a matter of the context or simply a choice of visual style. If the form is displayed in the same context as other elements on the view (promotion message, login form, etc.) it can be a good idea to frame it in order to visually map it as a unity to the user and yield closure of completion. This is the case for eg. the Twitter sign up view:

enter image description here

However the AD for the site could just as well have decided to frame the form even though there are no other elements in the same view, this is for example the case with Pinterest:

enter image description here

Facebook use another approach. They have a form adjacent to elements not related to the form without framing it:

enter image description here

So it depends on the context and the vision for your visual style. There is no definite "right" or "wrong", but from a usability perspective one could argue that framing a form does produce better usability due to the points raised in the first section.

  • in the facebook example there is a clear divide between the for and the non related elements caused by the left align of the form elements Commented Apr 16, 2014 at 15:16
  • While a designer does consider adding a box and not think about the psychology side of things, if you take a step back you can trace a lot of this to cognitive sciences topics and HCI, which is really important to extrapolate from the examples. The why, not just who has done what in the most visible of spectrums.
    – bzav
    Commented May 2, 2014 at 12:06

Visually the box provides a grouping of the elements - Grouping the form fields, making them distinct from the rest of the content. Working on the gestalt principle of closure.

That box is usually the fieldset element of the HTML. It's not clear from your example, but fieldsets usually go around related elements, so you could have multiple in a form. The fieldset allows the semantic grouping of the form elements. It can be particularly useful for assistive technologies such as screen readers. So semantically it is an important part of the markup.

To answer the question: should they always appear within a (visual) box - then that depends. If the form is the only content on the page it's not essential, but it can help focus the user on the task (filling in the form).


This is a question that can possibly related to Gestalt grouping.


The box simply is a way, visually, to tie elements together. There are multiple ways of grouping elements but I think the most common we see is proximity and using elements to create visual containers.

The same principles aren't just for forms, though. They can be used to bring different data points together or other items that are relevant to one another.

A great book I've read on this:



Boxes help to group UI elements. When displayed on a page with many distractions from other elements it can be hard to see what element goes with what element. It can result in people not filling out the entire form.

A box can also help to make the user feel more secure when filling in the form. It's proven that when having to enter sensitive data like your creditcard number a box around that particular part gives the illusion of it being secure and save. The addition of an image of a lock can also help in that situation.

Other than that, boxes can have an aesthetic value and just "look good".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.