How to Create an HTML Form

In this tutorial you will build a complete, working HTML form from scratch. By the end you will have a form that looks good, validates input, works on phones, and actually delivers submissions somewhere useful.

All you need is a text editor and a browser. If you are completely new to forms, you may want to skim What Are HTML Forms? first.

Step 1: Create an HTML page

Create a file called form.html and add the basic page skeleton. The viewport meta tag makes the page behave on mobile.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Form</title>
</head>
<body>

</body>
</html>

Step 2: Add the form element

Inside <body>, add a <form>. Two attributes matter most:

• action — the URL that receives the data.
• method — how it is sent. Use POST for anything that sends or saves data.

<form action="https://api.formclick.io/submit" method="POST">
  <!-- fields go here -->
</form>

We are using Formclick's endpoint so the form works without writing any server code. We'll connect it properly in step 6.

Step 3: Add fields with labels

Each field gets a <label> and an input. The label's for matches the input's id; the name is what is submitted.

<form action="https://api.formclick.io/submit" method="POST">
  <div class="field">
    <label for="name">Full name</label>
    <input type="text" id="name" name="name" autocomplete="name">
  </div>

  <div class="field">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email">
  </div>

  <div class="field">
    <label for="topic">Topic</label>
    <select id="topic" name="topic">
      <option value="">Choose one…</option>
      <option>General question</option>
      <option>Support</option>
      <option>Sales</option>
    </select>
  </div>

  <div class="field">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>

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

Wrapping each label/input pair in a div makes styling much easier later. The autocomplete values let browsers fill in known details for the visitor.

Step 4: Add validation

HTML can validate most things without any JavaScript. Add these attributes:

<input type="text" id="name" name="name"
       autocomplete="name" required minlength="2">

<input type="email" id="email" name="email"
       autocomplete="email" required>

<select id="topic" name="topic" required>…</select>

<textarea id="message" name="message" rows="5"
          required minlength="10" maxlength="2000"></textarea>

Now the browser refuses to submit until every required field is filled in, the email looks valid, and the message is a sensible length. Because the first <option> has an empty value, required on the select forces a real choice.

Step 5: Style it with CSS

Unstyled forms look cramped. A few lines of CSS turn it into something you'd be happy to ship. Add this inside <head>:

<style>
  body {
    font-family: system-ui, sans-serif;
    background: #f5f5fb;
    padding: 40px 16px;
  }
  form {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  .field { margin-bottom: 18px; }
  label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }
  input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    border: 1px solid #d4d4e0;
    border-radius: 10px;
  }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #645cec;
    box-shadow: 0 0 0 3px rgba(100, 92, 236, 0.2);
  }
  button {
    width: 100%;
    padding: 14px;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: #645cec;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  button:hover { background: #4f46e5; }
</style>

Want to go further? See How to Style HTML Forms Using CSS.

Step 6: Make it actually deliver submissions

Right now the form sends data, but nothing is set up to receive it. You have two choices: write server code, or use a form backend. The quickest route:

1. Create a free Formclick account and create a form.
2. Copy your access key from the form's Connect tab.
3. Add it as a hidden field, plus a honeypot field to catch bots:

<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 message from my website">

  <!-- Honeypot: humans never see it, bots fill it in -->
  <input type="checkbox" name="botcheck" style="display: none;">

  <!-- your fields from step 3 -->
</form>

Submit the form once and the message appears in your inbox and Formclick dashboard. The subject field sets the subject line of your notification email.

Step 7: Show a thank-you message

By default the visitor sees a confirmation page after submitting. You have two nicer options:

• Redirect to your own page — no JavaScript required:

  <input type="hidden" name="redirect"
         value="https://yourwebsite.com/thanks.html">
  

• Stay on the page and show an inline success message by adding Formclick's small script before </body>:

  <script src="https://cdn.formclick.io/formclick.min.js"></script>
  

Step 8: Test it properly

Before you publish, run through this checklist:

• Submit with every field empty — do the right errors appear?
• Type a bad email such as jane@ — is it rejected?
• Tab through the whole form using only the keyboard.
• Click each label — does it focus the matching field?
• Open it on your phone — is it easy to tap and read?
• Send a real submission and confirm it arrives.

The finished form

You now have a form that is accessible, validated, styled, mobile-friendly and connected to a backend — without a single line of server code. From here you can build specific kinds of forms:

• How to Create an HTML Contact Form
• How to Create a Registration Form in HTML
• How to Create a Newsletter Signup Form

Or skip the typing and start from one of our ready-made HTML form templates.