Formulario Sencillo de WhatsApp para Comprar Boletos (Guía + Código Gratis)

Cómo Crear un Formulario de WhatsApp para Comprar Boletos: Guía con Código Gratis

Introducción: ¿Por qué un formulario de WhatsApp para comprar boletos?

En un mundo donde la inmediatez es clave, ofrecer a tus clientes una forma rápida y directa de comprar boletos a través de WhatsApp puede marcar la diferencia. Este formulario sencillo, minimalista y 100% funcional permite a los usuarios seleccionar su ciudad de origen, destino, fecha de viaje y enviar su solicitud directamente a tu número de WhatsApp. ¿Lo mejor? Es responsive, fácil de implementar y completamente personalizable.

En esta guía, te explicaremos cómo crear un formulario de WhatsApp para venta de boletos paso a paso, con el código HTML, CSS y JavaScript incluido.

¿Qué hace especial a este formulario?

Este formulario está diseñado para ser práctico y eficiente, con características que lo hacen ideal para negocios de transporte, agencias de viajes o cualquier emprendimiento que venda boletos:

Características clave del formulario

• Selectores de ciudades predefinidos:
  • Origen: Quito, Tena, Guayaquil, Puyo.
  • Destino: Ibarra, Tulcán, Otavalo, Esmeraldas, Riobamba.
• Diseño minimalista: Bordes limpios, colores planos y un botón verde de WhatsApp (#25D366) que invita a la acción.
• Funcionalidad inteligente:
  • La fecha seleccionada se formatea automáticamente a un formato amigable, como “Mie 2 Abr, 2025”.
  • Al hacer clic, se abre WhatsApp con un mensaje predefinido que incluye la ciudad de origen, destino, fecha y la URL de la página desde donde se envió.
• Responsive design: Se adapta perfectamente a móviles y escritorios.
• Personalizable: Puedes añadir tu número de WhatsApp directamente en el script.

Con estas características, este formulario es una herramienta poderosa para captar clientes y cerrar ventas de forma directa.

Funcionamiento en vivo

COMPRAR BOLETO

De: Quito Tena Guayaquil Puyo

A: Ibarra Tulcán Otavalo Esmeraldas Riobamba

Fecha Del Viaje

Paso a paso: Cómo crear el formulario de WhatsApp

A continuación, te mostramos cómo implementar este formulario en tu sitio web. El código es simple, limpio y está optimizado para SEO con palabras clave como “formulario WhatsApp para boletos” y “código gratis para formulario de boletos”. Siguiendo nuestras recomendaciones de SEO, este contenido está diseñado para atraer más visitas orgánicas.

1. Estructura HTML del formulario

El HTML define la estructura del formulario, incluyendo los selectores de ciudades, el campo de fecha y el botón de WhatsApp. Copia el siguiente código en tu página web:

Este código crea un contenedor con un título, dos selectores para las ciudades, un campo de fecha y un botón que activa la funcionalidad de WhatsApp.

<div class="widget-container">
    <div class="widget-title">COMPRAR BOLETO</div>

    <div class="field">
        <label>De:</label>
        <select id="origin">
            <option value="Quito">Quito</option>
            <option value="Tena">Tena</option>
            <option value="Guayaquil">Guayaquil</option>
            <option value="Puyo">Puyo</option>
        </select>
    </div>

    <div class="field">
        <label>A:</label>
        <select id="destination">
            <option value="Ibarra">Ibarra</option>
            <option value="Tulcan">Tulcán</option>
            <option value="Otavalo">Otavalo</option>
            <option value="Esmeraldas">Esmeraldas</option>
            <option value="Riobamba">Riobamba</option>
        </select>
    </div>

    <div class="field">
        <label>Fecha Del Viaje</label>
        <input type="date" id="travelDate" required>
    </div>

    <button class="whatsapp-btn" onclick="sendToWhatsApp()">Enviar A WhatsApp</button>
</div>

2. Estilos CSS para un diseño minimalista

El CSS asegura que el formulario sea atractivo y funcional en cualquier dispositivo. Incluye bordes limpios, un botón verde de WhatsApp y un diseño responsive. Pega este código en tu archivo CSS o en una etiqueta <style>:

/* Reset básico y tipografía */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Contenedor principal responsive */
.widget-container {
    background: white;
    border-radius: 10px;
    width: 100%;
    max-width: 350px; /* Ancho máximo para desktop */
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Título */
.widget-title {
    text-align: center;
    font-size: clamp(16px, 3vw, 20px); /* Tamaño responsive */
    font-weight: 700;
    margin-bottom: 25px;
    color: #333;
    text-transform: uppercase;
}

/* Campos del formulario */
.field {
    margin-bottom: 20px;
}
.field label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
    font-weight: 600;
}
.field select, 
.field input {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15 plottedData;
    background: white;
    transition: border 0.3s;
}
.field select:focus, 
.field input:focus {
    border-color: #25D366;
    outline: none;
}

/* Botón de WhatsApp */
.whatsapp-btn {
    width: 100%;
    padding: 14px;
    background: #25D366;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    margin-top: 15px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}
.whatsapp-btn:hover {
    background: #128C7E;
}

/* Media Queries para ajustes específicos */
@media (max-width: 480px) {
    .widget {
        padding: 20px;
        max-width: 100%; /* Ocupa todo el ancho en móviles */
    }
    .field select, 
    .field input {
        padding: 10px;
    }
    .whatsapp-btn {
        padding: 12px;
    }
}
        

Este CSS garantiza un diseño limpio, con un botón de WhatsApp que resalta y un formulario que se ve bien en móviles y escritorios.

3. JavaScript para la funcionalidad de WhatsApp

El script de JavaScript recoge los datos del formulario, formatea la fecha y abre WhatsApp con un mensaje predefinido. Asegúrate de reemplazar el número de teléfono con el tuyo. Aquí está el código:

<script>
    function sendToWhatsApp() {
        const origin = document.getElementById('origin').value;
        const destination = document.getElementById('destination').value;
        const date = formatDate(document.getElementById('travelDate').value);
        const pageUrl = window.location.href; // Obtiene la URL actual de la página

        // Reemplaza este número con TU NÚMERO DE TELÉFONO (en formato internacional, sin "+")
        const yourPhoneNumber = "593xxxxxxxxx"; // Ejemplo: 593987654321

        const message = `Hola! Quiero comprar un boleto:\n\n*De:* ${origin}\n*A:* ${destination}\n*Fecha:* ${date}\n\n*Enviado desde:* ${pageUrl}`;
        const encodedMessage = encodeURIComponent(message);

        // Abrir WhatsApp con tu número predefinido
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        const url = isMobile ? `whatsapp://send?phone=${yourPhoneNumber}&text=${encodedMessage}`
                                : `https://web.whatsapp.com/send?phone=${yourPhoneNumber}&text=${encodedMessage}`;

        window.open(url, '_blank');
    }

    function formatDate(dateString) {
        const date = new Date(dateString);
        const days = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
        const months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
        return `${days[date.getDay()]} ${date.getDate()} ${months[date.getMonth()]}, ${date.getFullYear()}`;
    }
</script>

Remplaza el número que dice 593xxxxxxxxx por el número de WhatsApp, recuerda agregar el codigo internacional de tu pais.

Este script asegura que el mensaje enviado a WhatsApp sea claro y contenga toda la información necesaria, incluyendo la URL de la página para que sepas desde dónde te contactan.

How to Customize Your WhatsApp Form for Ticket Sales

Si quieres personalizar el formulario, aquí tienes algunas ideas para adaptarlo a tus necesidades específicas:

1. Add More Cities to the Dropdowns

Modifica las opciones en los <select> de HTML para incluir otras ciudades relevantes para tu negocio. Por ejemplo:

<option value="Cuenca">Cuenca</option>

2. Change the WhatsApp Button Color

Si prefieres otro color para el botón, cambia el valor de background en la clase .whatsapp-btn del CSS. Por ejemplo, para un azul:

.whatsapp-btn {
    background: #007BFF;
}
.whatsapp-btn:hover {
    background: #0056b3;
}
        

3. Include Additional Fields

Puedes añadir campos como el número de pasajeros o el tipo de boleto (ida o ida y vuelta). Solo agrega un nuevo <input> o <select> en el HTML y actualiza el script para incluir los datos en el mensaje de WhatsApp.

Beneficios de usar este formulario en tu negocio

Implementar un formulario de WhatsApp para comprar boletos tiene múltiples ventajas que pueden impulsar tu negocio:

• Aumenta la conversión: Al conectar directamente con los clientes vía WhatsApp, reduces las fricciones en el proceso de compra.
• Fácil de usar: El diseño minimalista y responsive garantiza que cualquier usuario, desde cualquier dispositivo, pueda completar el formulario sin problemas.
• Seguimiento sencillo: La URL incluida en el mensaje te permite rastrear desde qué página te contactan, ideal para campañas de marketing.
• Costo cero: El código es gratis y no requiere herramientas externas.

Conclusión: ¡Empieza a vender boletos con WhatsApp hoy!

Crear un formulario sencillo de WhatsApp para comprar boletos es una forma efectiva de conectar con tus clientes y cerrar ventas rápidamente. Con el código gratuito que te proporcionamos, puedes implementarlo en minutos y personalizarlo según tus necesidades. Su diseño responsive, funcionalidad inteligente y facilidad de uso lo convierten en una herramienta imprescindible para cualquier negocio de transporte o viajes.

¿Listo para probarlo? Copia el código, personaliza tu número de WhatsApp y comienza a recibir solicitudes de boletos directamente en tu teléfono. Si tienes dudas o quieres compartir cómo te funcionó, ¡deja un comentario abajo!

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: CSSDiseno ResponsiveDiseño WebTrucos CSS y HTML

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.