Formulario de pedido para Whatsapp

Conecta Clientes con tu WhatsApp al Instante

¿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:420px;margin:40px auto;padding:1rem;font-family:'Poppins',sans-serif;}
.form-card{background:#fff;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,0.08);padding:30px;display:flex;flex-direction:column;gap:18px;transition:all 0.3s ease;}
.form-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,0.1);}
.form-card input,.form-card select,.form-card textarea{border:1px solid #ddd;border-radius:8px;padding:12px 14px;font-size:15px;width:100%;box-sizing:border-box;transition:all 0.3s ease;outline:none;background:#f9f9f9;}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:#00bc46;background:#fff;box-shadow:0 0 6px rgba(0,188,70,0.25);}
.send-btn{background:linear-gradient(90deg,#00bc46,#23b829);color:white;padding:14px;border:none;font-weight:600;border-radius:50px;cursor:pointer;font-size:16px;letter-spacing:0.3px;transition:all 0.3s ease;}
.send-btn:hover{background:linear-gradient(90deg,#23b829,#00bc46);transform:scale(1.05);box-shadow:0 4px 14px rgba(0,188,70,0.3);}
@media (max-width:600px){.form-card{padding:20px;gap:12px;}.send-btn{font-size: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");
  });

Descargar Proyecto

Obtén el archivo index.html listo para ver el demo en tu PC o celular.