Skip to content
▸ Chatsac Tools

Site form · click-to-chat · no signup

WhatsApp form on your site

The visitor fills the fields and WhatsApp opens with the message ready. Snippet in your theme. This does not store the lead and does not send on its own.

Build the form

Fields

Message preview

Text that lands in the WhatsApp compose field. The visitor still has to tap Send.

Try the fields

Concatenated message

Hi, I came from the form on the site.

Snippet ready. The visitor still has to tap Send in WhatsApp. · 110/2000

Copy the code

HTML with the script inside. No CDN. Same code on every tab.

Where to paste: Paste before '</body>' on any HTML page.

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>Name</span><input id="nome" name="nome" type="text" data-cs-field data-cs-label="Name" 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>Request</span><textarea id="pedido" name="pedido" data-cs-field data-cs-label="Request" rows="3"></textarea></label>
<button type="submit" class="cs-wa-submit">Send on 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 = "Hi, I came from the form on the site.";
  var tooLong = "The message is too long for the WhatsApp link. Shorten the fields.";
  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>

Sample number in the snippet. Replace it with yours before copying.

Enter a valid number to copy the snippet.

Frequently asked questions

Is this the same as Whatsform or Callbell?
No. Whatsform and Callbell host the form on their domain and store the answer. Here the HTML lives on your site. Chatsac does not receive the lead. The click opens WhatsApp with the text ready; the visitor still taps Send.
Why can't I attach a PDF or photo?
Submit is a GET link (api.whatsapp.com/send). A file does not fit in that URL. Tools that accept uploads store the file on their server. This page does not.
Meta's FAQ shows wa.me. Why does the code use api.whatsapp.com/send?
Consumer help documents wa.me. The wa.me redirect corrupts emoji in the message. The snippet uses api.whatsapp.com/send, the same endpoint as the other Chatsac tools. Do not swap the URL. Source: faq.whatsapp.com/5913398998672934.
The visitor filled it and I got nothing?
The form only opens WhatsApp with text in the compose field. If they do not tap Send in the app, nothing is sent. That is not a snippet bug.
Does this count as marketing opt-in?
No. A customer-started message opens a chat. It does not replace a clear campaign opt-in. The tool does not settle Meta's messaging policy.