Dale a tus Clientes una Forma de Contactarte

Incluso con reservas en línea, los clientes a veces necesitan hacer preguntas. Una página de contacto proporciona esa línea directa de comunicación. Vamos a agregar una a BookIt.

Lo que Aprenderás

Crear la ruta de contacto
Agregar un formulario estático (la funcionalidad viene después)
Completar las páginas básicas de BookIt

Crear la Ruta de Contacto

Mismo patrón, nueva página.

Paso 1: Crear la Carpeta

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

Paso 2: Agregar la 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>

Paso 3: Verificar

Visita http://localhost:5173/contact. Deberías ver el formulario de contacto y la información de contacto.

Sobre el Formulario

El formulario que hemos agregado es HTML estático. Si haces clic en "Send Message," la página se recargará pero en realidad no pasará nada — no se envía ningún correo electrónico, no se guarda ningún dato.

Hacer que los formularios sean funcionales requiere manejo del lado del servidor, que cubriremos en el Módulo 12: Forms & Actions. Por ahora, nos estamos enfocando en el enrutamiento y la estructura de páginas.

Piensa en esto como un prototipo. El formulario muestra a los clientes lo que podrán hacer, incluso si la funcionalidad aún no está conectada.

La Estructura de tu Proyecto

Ahora tienes cuatro rutas:

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

Probando tus Rutas

Con tu servidor de desarrollo en ejecución, visita manualmente cada URL:

http://localhost:5173/ — Página de inicio
http://localhost:5173/services — Lista de servicios
http://localhost:5173/about — Página Acerca de
http://localhost:5173/contact — Página de contacto

Cada una debería mostrar su contenido. Si alguna muestra un 404, verifica:

La carpeta está dentro de src/routes
El archivo se llama exactamente +page.svelte
El servidor de desarrollo está en ejecución

Errores Comunes

Formulario Sin Funcionalidad

Esto no es un error per se, pero entiende lo que estás construyendo. Un formulario sin atributo action y sin manejo de JavaScript es solo visual. Está bien para prototipar, pero recuerda implementar el manejo real del formulario más adelante.

Etiquetas Faltantes

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

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

Siempre asocia las etiquetas con los campos usando for e id. Esto ayuda a los lectores de pantalla y mejora la usabilidad del formulario.

Resumen

BookIt ahora tiene todas sus páginas informativas básicas. Los clientes pueden explorar los servicios, conocer la empresa y encontrar información de contacto. El formulario aún no funciona, pero la estructura está en su lugar.

Puntos clave:

Los formularios de contacto necesitan manejo del servidor para enviar mensajes de verdad
Los formularios estáticos son útiles para prototipar y definir el diseño
Siempre usa asociaciones correctas entre etiquetas y campos

Próximos Pasos

Ahora que entiendes cómo funciona el enrutamiento, vamos a crear la primera página real para BookIt. Continúa con Create the Services Page donde agregaremos la ruta /services.