Tidy up how the form looks

01 / 04

Give the label its own line

label belongs to the same family as text, so left alone it sits on the same line as the input box.

Give it display: block; and it takes a whole line, dropping the input box below it.

.row label {  display: block;}

02 / 04

An input box starts out short, too short for long text to fit. Widen it with width.

Give textarea a height as well and it shows at a glance how many lines you can write.

.row input {  width: 300px;}.row textarea {  width: 300px;  height: 120px;}

03 / 04

border and padding work on input boxes too. Space on the inside keeps what you type off the border, so it reads better.

Keep the border a pale grey and it will not fight with the words around it.

.row input {  border: 1px solid #cccccc;  padding: 8px;}

04 / 04

Buttons want to be big, in a colour that stands out. Change the background and text colours, and puff it up with padding.

The gap between items comes right in one go if you write margin-bottom on the .row you wrapped them in. Have a go.

.btn {  background-color: #ff6600;  color: white;  padding: 12px;}