Proyecto moderno desarrollado con Astro que permite a los usuarios agendar citas médicas directamente por WhatsApp mediante un formulario validado en el navegador.
El proyecto utiliza Tailwind CSS para la interfaz y JavaScript para la validación y generación automática del mensaje enviado a WhatsApp.
Captura la información necesaria para agendar una cita médica:
- Nombre del paciente
- Especialidad o tipo de consulta
- Fecha de la cita
- Hora de la cita
- Motivo de la consulta
El formulario valida los campos antes de enviarlos:
- Campos obligatorios
- Longitud mínima del motivo
- Feedback visual en caso de error
El sistema genera automáticamente un mensaje estructurado y abre WhatsApp con la información lista para enviar.
Ejemplo de mensaje enviado:
SOLICITUD DE CITA MÉDICA
Paciente: Juan Pérez
Consulta: Pediatría
Fecha: 2026-03-10
Hora: 15:30
Motivo: Dolor de gargantaEl proyecto está dividido en componentes para mantener el código organizado y escalable.
- Astro → Framework principal para el proyecto
- Tailwind CSS → Estilos y diseño de la interfaz
- JavaScript → Lógica del formulario y validaciones
- WhatsApp Click-to-Chat → Envío del mensaje mediante enlace
src/
├─ components/
│ └─ ContactForm.astro
│
├─ layouts/
│ └─ Layout.astro
│
├─ pages/
│ └─ index.astro
│
└─ scripts/
└─ whatsappForm.ts
Todos los comandos se ejecutan desde la raíz del proyecto usando pnpm
| Comando | Acción |
|---|---|
| pnpm install | Instala las dependencias |
| pnpm dev | Inicia el servidor local |
| pnpm build | Genera la versión optimizada |
Edita el número dentro de src/scripts/whatsappForm.ts
const phone = "51900000000";Puedes modificar las opciones del formulario en src/components/ContactForm.astro.
<select id="type">
<option value="Medicina General">Medicina General</option>
<option value="Pediatría">Pediatría</option>
<option value="Odontología">Odontología</option>
<option value="Control Médico">Control Médico</option>
</select>- Node.js (Versión 18 o superior).
- Gestor de paquetes (pnpm recomendado, npm o yarn).
Desarrollado con ❤️ por isnaroa