Form fields UI

Hello everybody,

these shots are an other part of the ??myForm?? project I designed a couple of days ago. This view shows the form builder when a user has added some fields and want to edit them.

There is one more interaction with ??field blocks?? present in the right part of the app. When a user is hovering a block, the top border, title and control buttons get darker. Also, there may be some cursor changes to explicitly shows you can drag’n’drop those blocks again, to change their orders.

I tried to keep things pretty clean and minimal, also, easy to scan as the document can contain a lot of field blocks. One of the solutions I found was to reduce contrast in inactive blocks.

The - and + control buttons let you easily remove the active field or even add one of the same kind below.

You’ll also find the ??preview?? part of this form. Just to give an example of what the user could end on.

I hope you’ll appreciate this, feedbacks appreciated as always ;)

Have a nice week dribbblers!

Edit: A detailed view of the project can be found on Behance.