Dale a tus Clientes una Forma de Comunicarse

Incluso con la reserva 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 añadirla a BookIt.

Qué Aprenderás

Crear la ruta de contacto
Añadir 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: Añadir 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 añadido es HTML estático. Si haces clic en "Send Message", la página se recargará pero en realidad no ocurrirá nada — no se enviará ningún correo electrónico ni se guardarán datos.

Para que los formularios sean funcionales se requiere manejo en el lado del servidor, lo cual cubriremos en el Módulo 12: Formularios y Acciones. Por ahora, nos estamos enfocando en el enrutamiento y la estructura de las páginas.

Piensa en esto como un prototipo. El formulario les muestra a los clientes lo que podrán hacer, aunque 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!

Probar 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 de información
http://localhost:5173/contact — Página de contacto

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

Que la carpeta esté dentro de src/routes
Que el archivo se llame exactamente +page.svelte
Que el servidor de desarrollo esté en ejecución

Errores Comunes

Formulario Sin Funcionalidad

Esto no es un error per se, pero comprende 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 de entrada 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 ya está en su lugar.

Puntos clave:

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

Próximos Pasos

Ahora que entiendes cómo funciona el enrutamiento, vamos a crear la primera página real para BookIt. Continúa con Crear la Página de Servicios, donde añadiremos la ruta /services.