freecourses.digital
Lesson progress: 0 of 4 activities done
All lessons in HTML Basics for Beginners Lesson 7.4 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Basic form structure and submission

What we will go through

  • A complete contact form example
  • Sending submissions without a server
  • Thank you pages and error messages
  • Simple spam protection

Short answer

A good contact form has a short list of linked labels and fields, sensible input types, required fields marked in text, and one clear submit button. On a static site, point the action at a form service. Send visitors to a thank you page after they submit, and add a hidden honeypot field to stop simple spam bots.

A complete contact form

<form action="https://formspree.io/f/your-id" method="post">
  <p>
    <label for="name">Full name (required)</label>
    <input type="text" id="name" name="name" autocomplete="name" required>
  </p>
  <p>
    <label for="email">Email (required)</label>
    <input type="email" id="email" name="email" autocomplete="email" required>
  </p>
  <p>
    <label for="mobile">Mobile number</label>
    <input type="tel" id="mobile" name="mobile" autocomplete="tel">
  </p>
  <p>
    <label for="message">Message (required)</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </p>
  <p hidden>
    <label for="website">Leave this empty</label>
    <input type="text" id="website" name="_gotcha" tabindex="-1" autocomplete="off">
  </p>
  <button type="submit">Send message</button>
</form>

Sending without your own server

Static sites on GitHub Pages or Netlify have no server code. Form services receive submissions and forward them to your email. You sign up, get a unique URL, and put it in action. Read their free plan limits, usually a set number of submissions per month.

Thank you pages and errors

After submitting, send people to a page that confirms the message was received and says what happens next, like We reply within one business day. Most form services let you set a redirect URL. If validation fails, the error should say exactly what to fix, next to the field.

Stopping spam

A honeypot is a hidden field that humans never see. Bots fill every field, so if it has a value, the service drops the submission. It stops most simple bots without making real visitors solve puzzles. Keep forms short, too. Every extra field lowers the number of people who finish.

Connect a form to a free service

Step 1 of 5

Sign up

Create a free account on a form service such as Formspree.

Try it: finish the form

This form is missing labels, types, and a submit button. Complete it using the example above.

Live preview

Quick quiz

1. What does a honeypot field catch?
2. Where does a form service URL go?
3. What should a thank you page say?
4. Effect of adding many fields?

Common mistakes

  • Asking for too much. Ask only what you need to reply.
  • No confirmation. Visitors resubmit or give up.
  • Never testing the live form. A wrong endpoint silently loses leads.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Form service
A tool that receives form data for static sites.
Endpoint
The URL that receives submitted data.
Honeypot
A hidden field that traps bots.
Thank you page
The page shown after a successful submission.
Conversion
A visitor completing a goal, like sending a form.

Questions beginners ask

Should I use reCAPTCHA?

Try a honeypot first. Add a CAPTCHA only if spam continues, since it adds friction.

Can I track form submissions in GA4?

Yes. Track visits to the thank you page as a conversion.

Is it safe to put my email in the action?

Do not use mailto: as an action. It is unreliable. Use a service.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.