Please rate my work and suggest how to improve on it

#codepen

Top comments (3)

You should think about the verical spacing, fonts, shadows, and curves vs. angles. Adding some padding between elements would make it easier to read, and changing to a sans-serif font would probably make it look more "professional" as well.

Personally, I'm not a fan of the curves and shadows on the input elements. It makes the submit button look odd because its different scale makes its curves slightly different, entering a kind of widget-uncanny-valley.

Red isn't a great choice for the text colour, as people might associate it with an error state.

input type="number" triggers the number pad on some mobile devices but input type="tel" is probably better as it's specifically designed for phone numbers (which can contain other characters).

The placeholder attributes don't add anything, and they're almost the same colour as the input text itself meaning it's not obvious at a glance which fields you've entered and which you haven't.

The label elements should either wrap their inputs or should be related to them using label for="..." and input id="...".

I'd remove the br elements and make sure the inputs were (inline-)blocks instead. That's my personal preference, because I see br as an unnecessary non-semantic element.

I'd also remove the colon suffix on labels. It doesn't add anything to the meaning of the markup, and you can always style it with label:after { content: ':'; } or something like that if you want. Personally, I think it'd look better without them. The legend (which could go into a legend and a fieldset itself rather than a p tag...) also has the same colon suffix, and there's kind of an unwritten style rule that you don't nest things with colons.

Hope this helps!