Learn HTML · Lesson 7 of 8 · about 15 minutes

A contact form

An email link is fine, but a form is easier for visitors: no email program needed, and they don't have to copy your address. In this lesson you'll build a contact page whose messages arrive in your inbox, without writing any server code.

A form, a label and a box to type in

A form is a <form> element with fields inside. The simplest field is <input>, a one-line text box, and every field needs a <label> that says what to type:

Three attributes tie it together:

• id="name" gives the box a unique name on the page, and for="name" on the label points at it. Now clicking the label puts the cursor in the box, and screen readers read the label when the box is selected. Try clicking "Your name".
• name="name" is what the answer is called when the form is sent. Without a name, a field isn't sent at all.
• <button> inside a form sends it. In the examples on this page, sending does nothing; you'll make it work later.

id and name are often the same word, as here, but they don't have to be.

The fields of a contact form

A contact form usually asks for three things: a name, an email address to reply to, and the message itself:

• type="email" tells the browser to expect an email address: phones show a keyboard with @ on it, and the browser checks the address looks right before sending.
• <textarea> is a box for several lines of text. Unlike <input> it has a closing tag; rows="5" sets its starting height.
• required means the form won't send while the field is empty. The browser tells the visitor which one they missed.

Other types of <input> you'll meet: tel for phone numbers, number, date, url for web addresses. Each one gets the right keyboard on a phone.

Choices: menus and checkboxes

When there are only a few possible answers, let people pick instead of typing:

<select> makes a drop-down menu with one <option> per choice. A checkbox is an <input type="checkbox">; its label usually goes after it. Use choices sparingly on a contact form: every extra field is one more reason not to bother.

Make it look like the rest of your site

Browsers draw form fields in their own style, small and grey. A few CSS rules make them easier to use, especially on phones:

• width: 100% makes the boxes as wide as the page, and box-sizing: border-box keeps the padding inside that width, so they don't stick out on the right.
• font: inherit gives fields and buttons the same font as your text. Without it, they use the browser's own, smaller font.

Add rules like these to your style.css, with your own colours.

Where does the message go?

So far the form has nowhere to send its answers. That's set with two attributes on <form>:

• action: the address that receives the answers.
• method="post": send them in the background, rather than adding them to the address bar.

Something at that address has to receive the message and pass it on to you, and a plain HTML file can't do that by itself. Traditionally it meant writing a program for the server, in PHP or similar. Many hosts and form services now do it for you instead. On Pagehaus, it's built in: point a form at /_form/ followed by any name, such as /_form/contact, and each message is emailed to you and kept on your site's Forms tab. Replying to the email replies to the visitor, thanks to the field called email.

On another host, the idea is the same: the host or form service gives you an address to put in action, and the rest of the form doesn't change.

Build the contact page

Create contact.html in your my-site folder, using your includes from lesson 6:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact · Sam Rivera</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <!--#include virtual="/includes/menu.html" -->

  <h1>Say hello</h1>
  <p>Questions about a recipe, or want a birthday cake? Write to me here.</p>

  <form action="/_form/contact" method="post">
    <p>
      <label for="name">Your name</label><br>
      <input id="name" name="name" required>
    </p>
    <p>
      <label for="email">Your email</label><br>
      <input id="email" name="email" type="email" required>
    </p>
    <p>
      <label for="message">Message</label><br>
      <textarea id="message" name="message" rows="6" required></textarea>
    </p>
    <input type="hidden" name="_subject" value="A message from my website">
    <input type="hidden" name="_redirect" value="/thanks.html">
    <input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
    <button>Send</button>
  </form>

  <!--#include virtual="/includes/footer.html" -->
</body>
</html>

The three fields at the end are instructions for Pagehaus, not questions for your visitors. Fields whose names start with an underscore aren't included in the message:

• type="hidden" fields are sent with the form but never shown. _subject sets the subject of the email you get, and _redirect is the page visitors see after sending.
• _gotcha is a trap for spam robots. It's hidden, so people never fill it in, but robots that fill in every box they find do, and those messages are thrown away. tabindex="-1" keeps keyboard users from landing in it by accident.

Then add a Contact link to includes/menu.html. Because the menu is included, it appears on every page at once.

A thank-you page

After sending, visitors go to the page in _redirect. Make thanks.html, saying what happens next:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Thank you · Sam Rivera</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <!--#include virtual="/includes/menu.html" -->

  <h1>Thank you!</h1>
  <p>Your message is on its way. I usually answer within a couple of days.</p>
  <p><a href="/index.html">Back to the home page</a></p>

  <!--#include virtual="/includes/footer.html" -->
</body>
</html>

Without _redirect, Pagehaus shows a plain "Thank you!" page with a link back to your site. Your own looks better, and keeps your menu.

Try it for real

• With pagehaus serve (from lesson 6): sending the form shows exactly what would be emailed to you, and where visitors would go next. Nothing is sent: it's a preview on your computer.
• On Pagehaus: upload contact.html, thanks.html and your menu, and send yourself a message. Confirm your email address first: forms stay off until you do. Messages arrive at the address you signed up with; the Forms tab can send them somewhere else.

Want a form with different fields? The contact form generator writes one for you to copy, and contact forms in the help has the details.

If it doesn't work

• A field is missing from the message: it has no name.
• Clicking a label doesn't select its box: its for and the box's id don't match exactly. Each id must also be used only once on the page.
• "Page not found" or "method not allowed" after sending: check that action is /_form/ plus a name, with method="post", and that you're on a web server, not opening the file from your computer.
• You sent a message and nothing arrived: check your spam folder, and that your Pagehaus email address is confirmed.
• The thank-you page is "not found": the address in _redirect must start with / and match the file's name exactly.

Check your work

• Your contact page has a name, an email and a message field, each with a label that selects it when clicked.
• Empty required fields stop the form from sending.
• The form has action="/_form/contact" and method="post", plus the spam trap.
• Sending it takes you to your own thank-you page.
• Your menu has a Contact link, on every page.

One lesson to go: putting your whole site online, at your own address.