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

  • 1
    1. Change the text above the dropdown menu at the bottom of the form, to Select your desired position. 2. Capitalize the first letter of the text on the green button as follows: Secure early access.
    – karel
    Jun 25, 2016 at 11:58
  • Consider using "Placeholder" text inside the boxes, rather than Name*, Email*, etc. outside of the boxes. It will simplify your design.
    – shannonmac
    Jun 25, 2016 at 12:02
  • Thanks for your opinion. I am using label instead of placeholder, but should i use placeholders instead Jun 25, 2016 at 12:26
  • 1
    I actually disagree with moving the titles inside of the text fields. As soon as the user starts typing their call-to-action disappears. That can create a frustrating user experience if they forget what field they are entering, or if their browser's auto-complete mixes things up (it happens). It would be visually cleaner, yes, but potentially frustrating.
    – Vicki
    Jun 27, 2016 at 4:44
  • 1
    To piggyback off of @Vicki 's point. There are a number of reasons to not use place holders. Placeholders weren't supported in IE 10 and down, placeholder support is fairly inconsistent with screen readers for the visually impaired, Not to mention that it goes against stand HTML Specification. Jun 27, 2016 at 18:18

2 Answers 2


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

  • Thanks! Out of curiosity what the properties for your border/shadow? Jun 28, 2016 at 8:51
  • 1
    @John I believe it was (in Illustrator) Mode: Multiply, Opacity: 25%, X Offset: 0, Y Offset: 1px, Blur: 3px, Color: #b1afb0. I was trying to match the one in the picture you provided, so if you have access to that one, that is always another option. Jun 28, 2016 at 13:18
  • Ok thanks. Have a look at the update, and let me know what you think! Jun 28, 2016 at 13:46
  • 1
    @John I forgot to mention, the outline on the form is .4px font, but this can be achieved in web by converting the format to RGBA, the declaration should look something along these lines: border: 1px solid rgba(177, 175, 176, 0.50); Other than that, looks good to me! :) Jun 28, 2016 at 14:18

Here're a few suggestions for your UI:

  • Use a larger font size for readability.
  • Re-word the second sentence into a non-conditional sentence.
    "Provide the information requested below for early access to our platform."
  • Use "Sentence case."
  • Use place-holder information to prompt for desired responses.
  • 1
    This is a very short answer to a very broad question. Why should he makes these change? What resources or studies support these claims? Jun 27, 2016 at 4:09

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.