HTML contact form

Write the form element before you write a single field

Start with the container, because two of its attributes decide everything that follows. method="post" keeps what somebody typed out of the query string, out of browser history and out of your logs. action is the URL the browser sends the submission to, and on a static host there is nothing at your own domain that can receive it, so this attribute is the whole of the problem: it has to point at something that accepts a POST. Get those two right and the rest of the form is just fields.

One labelled control per thing you want to know

Every control gets its own label element, bound with for and id, and not a placeholder pretending to be one: a placeholder disappears the moment somebody types, which is exactly when they need to know what the field was. Choose the input type by what the answer is, because the type is what makes a phone show the right keyboard and the browser check the shape of an address. A message is a textarea, not a long text input. On the worked example beside this page, five separate questions come to 8 controls once the group of options is counted properly, and 8 label elements with them.

Decide what happens after the submit button

A form is finished when you know where the submission goes and what the person sees next. The browser will post to the action URL and then render whatever comes back, so something has to reply, and it has to reply with something a human can read. Required attributes will have caught the empty fields, but nothing has checked anything that matters yet, because the browser is not yours. Whatever receives the post has to validate it again, store it, and tell the person it arrived.