The main form of my webapp looks like this:
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?
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:
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:
Facebook use another approach. They have a form adjacent to elements not related to the form without framing it:
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.
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".