Dê aos Clientes uma Forma de Entrar em Contato

Mesmo com agendamento online, os clientes às vezes precisam fazer perguntas. Uma página de contato oferece essa linha direta de comunicação. Vamos adicioná-la ao BookIt.

O Que Você Vai Aprender

Criar a rota de contato
Adicionar um formulário estático (a funcionalidade vem depois)
Completar as páginas básicas do BookIt

Criar a Rota de Contato

Mesmo padrão, nova página.

Etapa 1: Criar a Pasta

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

Etapa 2: Adicionar a Página

<!-- 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>

Etapa 3: Verificar

Acesse http://localhost:5173/contact. Você deverá ver o formulário de contato e as informações de contato.

Sobre o Formulário

O formulário que adicionamos é HTML estático. Se você clicar em "Send Message," a página será recarregada, mas nada vai realmente acontecer — nenhum e-mail é enviado, nenhum dado é salvo.

Para tornar formulários funcionais, é necessário tratamento no lado do servidor, que abordaremos no Módulo 12: Formulários & Actions. Por ora, estamos focando em roteamento e estrutura de páginas.

Pense nisso como um protótipo. O formulário mostra aos clientes o que eles poderão fazer, mesmo que a funcionalidade ainda não esteja conectada.

Estrutura do Seu Projeto

Agora você tem quatro rotas:

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

Testando Suas Rotas

Com o servidor de desenvolvimento em execução, acesse manualmente cada URL:

http://localhost:5173/ — Página inicial
http://localhost:5173/services — Lista de serviços
http://localhost:5173/about — Página sobre
http://localhost:5173/contact — Página de contato

Cada uma deve exibir seu conteúdo. Se alguma mostrar um 404, verifique:

A pasta está dentro de src/routes
O arquivo tem o nome exato +page.svelte
O servidor de desenvolvimento está em execução

Erros Comuns

Formulário Sem Funcionalidade

Isso não é um erro em si, mas entenda o que você está construindo. Um formulário sem atributo action e sem tratamento JavaScript é apenas visual. Está tudo bem para prototipagem, mas lembre-se de implementar o tratamento real do formulário mais tarde.

Labels Ausentes

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

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

Sempre associe labels a inputs usando for e id. Isso auxilia leitores de tela e melhora a usabilidade do formulário.

Resumo

O BookIt agora possui todas as suas páginas informacionais básicas. Os clientes podem navegar pelos serviços, conhecer a empresa e encontrar informações de contato. O formulário ainda não funciona, mas a estrutura está no lugar.

Principais aprendizados:

Formulários de contato precisam de tratamento no servidor para realmente enviar mensagens
Formulários estáticos são úteis para prototipagem e layout
Sempre use associações corretas entre label e input

Próximos Passos

Agora que você entende como o roteamento funciona, vamos criar a primeira página real para o BookIt. Continue com Criar a Página de Serviços, onde adicionaremos a rota /services.