Formulario para WhatsApp en el sitio

Prueba los campos

Mensaje concatenado

Hola, vengo del formulario del sitio.

Snippet listo. Quien llena todavía necesita tocar Enviar en WhatsApp. · 104/2000

Copia el código

HTML con el script adentro. Sin CDN. El código es el mismo en todas las pestañas.

Dónde pegar: Pega antes de '</body>' en cualquier página HTML.

index.html

<!-- Formulário WhatsApp · Chatsac Tools · não altere o endpoint send -->
<form id="chatsac-wa-form" class="cs-wa-form" novalidate>
<label class="cs-wa-label" for="nome"><span>Nombre</span><input id="nome" name="nome" type="text" data-cs-field data-cs-label="Nombre" required /></label>
<label class="cs-wa-label" for="email"><span>Email</span><input id="email" name="email" type="email" data-cs-field data-cs-label="Email" /></label>
<label class="cs-wa-label" for="pedido"><span>Pedido</span><textarea id="pedido" name="pedido" data-cs-field data-cs-label="Pedido" rows="3"></textarea></label>
<button type="submit" class="cs-wa-submit">Enviar en WhatsApp</button>
</form>
<style>
.cs-wa-form{display:flex;flex-direction:column;gap:12px;max-width:28rem;font-family:system-ui,sans-serif}
.cs-wa-label{display:flex;flex-direction:column;gap:4px;font-size:14px}
.cs-wa-label input,.cs-wa-label textarea,.cs-wa-label select{padding:8px 10px;border:1px solid #d4d4d4;border-radius:8px;font:inherit}
.cs-wa-submit{background:#25D366;color:#073B33;border:0;border-radius:8px;padding:10px 14px;font-weight:600;cursor:pointer}
</style>
<script>
(function(){
  var form = document.getElementById("chatsac-wa-form");
  if (!form) return;
  var phone = "5511999999999";
  var intro = "Hola, vengo del formulario del sitio.";
  var tooLong = "El mensaje quedó demasiado grande para el enlace de WhatsApp. Acorta los campos.";
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var parts = [];
    if (intro) parts.push(intro);
    var nodes = form.querySelectorAll("[data-cs-field]");
    for (var i = 0; i < nodes.length; i++) {
      var el = nodes[i];
      if (el.required && !String(el.value || "").trim()) {
        if (el.reportValidity) el.reportValidity();
        return;
      }
      var val = String(el.value || "").trim();
      if (!val) continue;
      var label = el.getAttribute("data-cs-label") || "";
      parts.push(label + ": " + val);
    }
    var text = parts.join("\n");
    var url = "https://api.whatsapp.com/send?phone=" + phone;
    if (text) url += "&text=" + encodeURIComponent(text);
    if (url.length > 2000) {
      alert(tooLong);
      return;
    }
    window.location.href = url;
  });
})();
</script>

Número de ejemplo en el snippet. Cámbialo por el tuyo antes de copiar.

Informa un número válido para copiar el snippet.