HTML Form Example: A Contact Form You Can Copy

An HTML form example is a complete form you can paste into a page: the fields, a label for each one, and the button that sends them. The example below is a contact form, and it is also a plain example of a web form. What a web form is, which parts it has and where it is used is a separate article.

A contact form in HTML

Copy this block. It asks for a name, an email address, a topic and a message, then adds a consent checkbox and a submit button.

<form action="/send" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="question">Question</option>
    <option value="order">Order</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <label>
    <input type="checkbox" name="consent" value="yes" required>
    I agree to the processing of my message
  </label>

  <button type="submit">Send</button>
</form>

Place the block where the form should appear. The browser draws the fields. The example has no CSS, so the controls look like the browser defaults until you style them.

What each part does

The form tag wraps everything that is sent together. action is the address that receives the submission, and method="post" puts the answers in the body of the request rather than in the page address. Use POST when the form collects a name, an email or a message. GET fits a search box or a filter, because it writes the answers into the URL, where they stay in the history and the logs.

Each field has a label tied to it by for and id, so a click on the words focuses the field and a screen reader can announce them. The name attribute is the key the handler receives: name, email, topic, message, consent. Without name, the field is visible and its value is never sent. required blocks the submit while that field is empty. type="email" asks the browser to check that the value looks like an address. The select is a drop-down with a single choice, and the textarea is for a message that needs more than one line. The checkbox must be ticked. The button needs type="submit": a button without it does not send the form.

The same fields, already working

Here is the same contact form, published so you can fill it in on this page.

Why the HTML alone does not send email

action="/send" is only an address. After the visitor presses Send, the browser requests that address and attaches the fields. If nothing at that address accepts them, the submission has nowhere to land. Putting a mailto: link in action does not send the message either: it opens the visitor’s mail program and leaves the rest to them. To get the answers into an inbox you need a handler, or a form that already has one.

A web-based form without the server script

A web-based form is the same set of fields in the browser, with the receiving side hosted for you. In FormDesigner you add the name, the email and the message, choose the address that gets the submissions, and copy the code onto the page. You do not write the form tag or the script behind action. Start from the contact form or a free template. Create an account and the form is ready to publish.

If you only needed the markup, the block above is the whole form. If the answers have to arrive, use the working form on this page or build the same one in your account.