Week 13: Build a Lead Capture Website Front-End

This week in plain English

ObjectiveCreate a commercial enquiry page with a form layout and front-end validation.

Why this mattersMany commercial websites exist to collect enquiries, bookings or quote requests.

What she will makeA lead capture page with a form that checks required fields.

What “done” looks likeThe form looks professional and shows helpful messages before submission.

At the end, she should be able to say:
“A lead form collects details from visitors. Front-end validation checks the form before it is sent.”

Fortnight project: Commercial Project 7 starts: Mini Lead Capture Website.

Skills: forms, labels, required fields, validation, thank-you page, privacy wording

Suggested session structure: 10 minutes objective, 10 minutes ChatGPT planning, 25 minutes building, 10 minutes testing, 5 minutes recap.

Commercial objective for Weeks 13–14

Two-week commercial outcome: Build a mini lead generation website front-end with an enquiry form and thank-you page.

Important note

This is a front-end learning project. A real working form needs secure server-side handling or a trusted form service. Do not collect real personal details in this practice project.

Step-by-step

Create enquiry.html.
Create thank-you.html.
Add fields for name, email, service and message.
Add labels for every field.
Add JavaScript validation.
If the form passes, send the visitor to thank-you.html.
Add privacy/safety wording.

Form starter

<form id="enquiryForm">
  <label for="name">Name</label>
  <input id="name" type="text">

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

  <label for="service">Service needed</label>
  <select id="service">
    <option value="">Please choose</option>
    <option>Website help</option>
    <option>Calculator tool</option>
    <option>SEO content</option>
  </select>

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

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

<p id="formMessage"></p>

Validation code

document.getElementById("enquiryForm").addEventListener("submit", function(event) {
  event.preventDefault();

  const name = document.getElementById("name").value.trim();
  const email = document.getElementById("email").value.trim();
  const service = document.getElementById("service").value;
  const message = document.getElementById("message").value.trim();

  if (!name || !email || !service || !message) {
    document.getElementById("formMessage").innerText =
      "Please complete all fields before sending.";
    return;
  }

  window.location.href = "thank-you.html";
});

End of week check

Form has labels.
Empty fields show an error.
Completed form goes to thank-you page.
Practice privacy note is visible.