How to create an eye-catchy and easy to use form?

I have the following form (to the right), and my intent is that its:

  1. Eye catchy
  2. Simple to use

enter image description here

We are not a professional designer, hence I feel there’s something wrong it, but I am not exactly sure what, and is kindly reach out to you guys for any feedback you may have.

UPDATE
enter image description here

Answer

Late to the show, but here is what I would do:

First off, it goes against standard to ask for a full name, so I would split up the name field into first and last name fields.

Second, I would match the colors to that of the app. I’d drop the border and replace it with a gray border with a subtle dropshadow. That teal should be your action color, that way people know anytime they see that green, it is an actionable element (ie, buttons, filters, navigation, etc.)

Third, bring your font sizes up and make your fields a little bigger, this will make the form appear more friendly and inviting.

Fourth, make sure all the fields are the same size and distance apart, and make sure the form is centered.


I know I mentions this in a comment, but I’ll leave more detail down here over the placeholder vs label argument.

Placeholders have specific places, they look great and can be very helpful when used right. It’s important to not use solely a placeholder however. This is because many browsers ( and people not using javascript ) will not be able to see the form or the form’s instructions.

Here is my example of your recreated form as well

Form Example

Attribution
Source : Link , Question Author : code_legend , Answer Author : knocked loose

Leave a Comment