Add a Contact Page | Build BookIt with Svelte 5

Give Customers a Way to Reach You

Even with online booking, customers sometimes need to ask questions. A contact page provides that direct line of communication. Let’s add one to BookIt.

What You’ll Learn

Create the contact route
Add a static form (functionality comes later)
Complete the basic pages of BookIt

Create the Contact Route

Same pattern, new page.

Step 1: Create the Folder

src/routes/
├── +page.svelte
├── services/
│   └── +page.svelte
├── about/
│   └── +page.svelte
└── contact/            ← Create this folder

Step 2: Add the Page

<!-- filename: src/routes/contact/+page.svelte -->
<h1>Contact Us</h1>

<p>
  Have a question about our services or need help with a booking? 
  Fill out the form below and we'll get back to you within 24 hours.
</p>

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

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

  <div>
    <label for="subject">Subject</label>
    <select id="subject" name="subject">
      <option value="general">General Inquiry</option>
      <option value="booking">Booking Question</option>
      <option value="support">Support</option>
      <option value="feedback">Feedback</option>
    </select>
  </div>

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

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

<h2>Other Ways to Reach Us</h2>

<p><strong>Email:</strong> hello@bookit.example</p>
<p><strong>Phone:</strong> (555) 123-4567</p>
<p><strong>Hours:</strong> Monday–Friday, 9am–5pm</p>

Step 3: Verify

Visit http://localhost:5173/contact. You should see the contact form and contact information.

About the Form

The form we’ve added is static HTML. If you click “Send Message,” the page will refresh but nothing will actually happen — no email gets sent, no data gets saved.

Making forms functional requires server-side handling, which we’ll cover in Module 12: Forms & Actions. For now, we’re focusing on routing and page structure.

Think of this as a prototype. The form shows customers what they’ll be able to do, even if the functionality isn’t wired up yet.

Your Project Structure

You now have four routes:

src/routes/
├── +page.svelte          → /          (homepage)
├── services/
│   └── +page.svelte      → /services  (service listings)
├── about/
│   └── +page.svelte      → /about     (company info)
└── contact/
    └── +page.svelte      → /contact   (contact form) ← New!

Testing Your Routes

With your dev server running, manually visit each URL:

http://localhost:5173/ — Homepage
http://localhost:5173/services — Services list
http://localhost:5173/about — About page
http://localhost:5173/contact — Contact page

Each should display its content. If any shows a 404, double-check:

Folder is inside src/routes
File is named exactly +page.svelte
Dev server is running

Common Mistakes

Form Without Functionality

This isn’t a mistake per se, but understand what you’re building. A form with no action attribute and no JavaScript handling is just visual. It’s fine for prototyping, but remember to implement actual form handling later.

Missing Labels

<!-- ❌ Accessibility issue -->
<input type="text" placeholder="Your name" />

<!-- ✅ Accessible -->
<label for="name">Name</label>
<input type="text" id="name" name="name" />

Always associate labels with inputs using for and id. This helps screen readers and improves form usability.

Summary

BookIt now has all its basic informational pages. Customers can browse services, learn about the company, and find contact information. The form doesn’t work yet, but the structure is in place.

Key takeaways:

Contact forms need server handling to actually send messages
Static forms are useful for prototyping and layout
Always use proper label/input associations

Next Steps

Now that you understand how routing works, let’s create the first real page for BookIt. Continue with Create the Services Page where we’ll add the /services route.