HTML Forms for Beginners: 8 Practical Examples

On this page

Example 1: A search box
Example 2: A contact form
Example 3: A newsletter sign-up
Example 4: A quick poll
Example 5: A booking request
Example 6: A quote request
Example 7: A job application
Example 8: A simple order form
What you've learned

The fastest way to learn HTML forms is to build real ones. This guide walks through eight small forms you'll actually need on real websites. Each one introduces a new idea, so by the end you'll know most of what forms can do.

Every example works on its own — copy it into an HTML file and open it in your browser.

New idea: method="GET". Search results should be shareable, so the query goes in the URL.

<form action="/search" method="GET" role="search">
  <label for="q">Search articles</label>
  <input type="search" id="q" name="q" required>
  <button type="submit">Search</button>
</form>

Submitting "forms" takes you to /search?q=forms.

Example 2: A contact form

New ideas: method="POST", a <textarea>, and a real backend.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input id="name" name="name" required>

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

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

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

Replace YOUR_ACCESS_KEY with a free Formclick key and messages arrive in your inbox. The full walk-through is in How to Create an HTML Contact Form.

New idea: a single field with a visually hidden label.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <label for="nl" class="visually-hidden">Email address</label>
  <input id="nl" name="email" type="email" placeholder="you@example.com" required>
  <button type="submit">Subscribe</button>
</form>

<style>
  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
</style>

Example 4: A quick poll

New ideas: radio buttons, <fieldset> and <legend>.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <fieldset>
    <legend>Which topic should we cover next?</legend>
    <label><input type="radio" name="topic" value="css-grid" required> CSS Grid</label>
    <label><input type="radio" name="topic" value="accessibility"> Accessibility</label>
    <label><input type="radio" name="topic" value="animations"> Animations</label>
  </fieldset>
  <button type="submit">Vote</button>
</form>

All three radios share name="topic", so only one can be chosen.

Example 5: A booking request

New ideas: date and time inputs, min limits, and a <select>.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New table booking">

  <label for="date">Date</label>
  <input id="date" name="date" type="date" min="2026-11-10" required>

  <label for="time">Time</label>
  <input id="time" name="time" type="time" min="12:00" max="22:00" step="900" required>

  <label for="guests">Guests</label>
  <select id="guests" name="guests">
    <option>1</option><option selected>2</option><option>3</option>
    <option>4</option><option>5</option><option>6+</option>
  </select>

  <label for="bname">Name</label>
  <input id="bname" name="name" required>

  <label for="bphone">Phone</label>
  <input id="bphone" name="phone" type="tel" required>

  <button type="submit">Request booking</button>
</form>

step="900" limits times to 15-minute slots (900 seconds).

Example 6: A quote request

New ideas: checkboxes for multiple choices, and a range slider.

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <fieldset>
    <legend>Services needed</legend>
    <label><input type="checkbox" name="services" value="design"> Web design</label>
    <label><input type="checkbox" name="services" value="seo"> SEO</label>
    <label><input type="checkbox" name="services" value="hosting"> Hosting</label>
  </fieldset>

  <label for="budget">Budget (USD)</label>
  <input id="budget" name="budget" type="range" min="1000" max="20000" step="1000" value="5000">

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

  <button type="submit">Get a quote</button>
</form>

Example 7: A job application

New ideas: file upload, enctype, and the accept attribute.

<form action="https://api.formclick.io/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New job application">

  <label for="aname">Full name</label>
  <input id="aname" name="name" required>

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

  <label for="role">Role</label>
  <select id="role" name="role" required>
    <option value="">Choose a role…</option>
    <option>Frontend Developer</option>
    <option>Product Designer</option>
  </select>

  <label for="cv">CV (PDF)</label>
  <input id="cv" name="cv" type="file" accept=".pdf" required>

  <label for="linkedin">LinkedIn profile</label>
  <input id="linkedin" name="linkedin" type="url">

  <button type="submit">Apply</button>
</form>
<script src="https://cdn.formclick.io/formclick.min.js"></script>

File uploads with Formclick are available on Pro and Business plans. See How to Add File Uploads to HTML Forms.

Example 8: A simple order form

New ideas: number inputs and a live total with <output>.

<form action="https://api.formclick.io/submit" method="POST"
      oninput="total.value = (qty.valueAsNumber * 12).toFixed(2)">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <p>Formclick sticker pack — $12.00 each</p>

  <label for="qty">Quantity</label>
  <input id="qty" name="quantity" type="number" min="1" max="20" value="1" required>

  <p>Total: $<output name="total" for="qty">12.00</output></p>

  <label for="address">Delivery address</label>
  <textarea id="address" name="address" autocomplete="street-address" required></textarea>

  <button type="submit">Place order</button>
</form>

The total updates as you change the quantity. (For real payments, use a payment provider's checkout — never collect card numbers in a plain form.)

What you've learned

Example	Concepts
Search	GET, search input
Contact	POST, textarea, form backend
Newsletter	Accessible hidden labels
Poll	Radios, fieldset, legend
Booking	Date/time, min/max, step, select
Quote	Checkboxes, range
Job application	File upload, enctype, accept
Order	Number input, output, oninput