Where to place controls in user account form?

Question

I'm creating an user account window for my instant messenger application.

User have to:

• enter name, password, server
• press button "Connect".

Also user can:

• close this form without connection
• enter advanced options (f.e. port, encoding).

And this form will show:

• connection result, errors
• warnings, tips for user (f.e. if some field will be clear)

I can not imagine how to show all this here. For example: make "Cancel" button or "Back" arrow in top left corner. Or maybe make "X" button in top right?

Could you help me? Thanks in advance!

Answer 1

For your case would like to recommend you for the connection results, errors, warnings and all of these stuff inside a hidden message then appear like this:

For the inputs try to put validation for username (minlength, maxlength, etc..) and password (minlength, maxlength, encrypted).

Connect button make it little bit active like either of these two images:

Forget to add, these are Bootstrap components.