Project 15: Contact Us Form

HTML Masterclass

Builds on these lessons

Textarea Input Tel Input Url Fieldsets Form Inputs

Step 1 of 4

Project

Name, Phone & Website Fields

Build a form with three fields: a text input for the name, an <input type="tel"> for a phone number (brings up a numeric keypad on mobile), and an <input type="url"> for a website (validated as a URL shape). Each gets its own <label>.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us | Osteria Bella</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/contact" method="POST">
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone">
    <label for="website">Website</label>
    <input type="url" id="website" name="website">
  </form>
</body>
</html>

← Previous Next →