Formulario de pedido para Whatsapp

Formulario de Pedidos Directo a WhatsApp

¿Te imaginas recibir pedidos o consultas directamente a tu WhatsApp con solo un clic? En esta publicación te muestro paso a paso cómo implementar un formulario moderno, elegante y totalmente funcional que envía automáticamente los datos ingresados por el usuario a tu número de WhatsApp.

Perfecto para tiendas online, servicios a pedido, freelancers o pequeños negocios que quieren automatizar su atención sin necesidad de usar plataformas complicadas.

🔧 Incluye el código completo en HTML, CSS y JavaScript, listo para copiar, pegar y adaptar a tus necesidades.
📱 Compatible con dispositivos móviles y escritorio.
🛠️ Personalizable con tus propios campos y colores.

Al final, tendrás algo como esto:

El usuario llena el formulario (nombre, email, opciones, etc.).
Hace clic en "Enviar a WhatsApp".
¡Y listo! Se abre WhatsApp con el mensaje prellenado con todos los datos.

HTML


<div class="form-container">
  <form id="whatsapp-form">
    <div class="form-card">
      <input type="text" id="name" placeholder="Nombres" required />
      <input type="email" id="email" placeholder="Email" required />
      <select id="option" required>
        <option value="">Opciones</option>
        <option value="Consulta">Consulta</option>
        <option value="Pedido">Pedido</option>
        <option value="Otro">Otro</option>
      </select>
      <textarea id="message" placeholder="Descripción" rows="4" required></textarea>
      <button type="submit" class="send-btn">Enviar a Whatsapp</button>
    </div>
  </form>
</div>

CSS


.form-container{max-width:600px;margin:30px auto;padding:1rem;}
.form-card{background:white;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);padding:20px;display:flex;flex-direction:column;gap:12px;}
.form-card input,.form-card select,.form-card textarea{border:none;border-bottom:2px solid #ccc;padding:10px;font-size:14px;width:100%;box-sizing:border-box;transition:border-color 0.3s;outline:none;}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-bottom:2px solid #23b829;}
.send-btn{background-color:#00bc46;color:white;padding:12px;border:none;font-weight:bold;border-radius:4px;cursor:pointer;transition:background-color 0.3s;}
.send-btn:hover{background-color:#1DA851;}
@media (max-width:600px){.form-card{padding:15px;}}

SCRIPT


document.getElementById("whatsapp-form").addEventListener("submit", function(e) {
    e.preventDefault();

    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const option = document.getElementById("option").value.trim();
    const message = document.getElementById("message").value.trim();

    const text = `Hola, mi nombre es *${name}*.\nMi correo es: *${email}*.\nMotivo: *${option}*.\nMensaje: ${message}`;

    const phoneNumber = "51999999999"; // Reemplaza con tu número real (sin el +)
    const url = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(text)}`;

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