Ir para o conteúdo
▸ Chatsac Tools

Formulário de site · click-to-chat · sem cadastro

Formulário WhatsApp para o site

O visitante preenche e o WhatsApp abre com a mensagem pronta. Snippet no seu tema. Isto não guarda o lead e não envia sozinho.

Montar o formulário

Campos

Preview da mensagem

Texto que cai no campo do WhatsApp. Ainda falta o visitante apertar Enviar.

Experimente os campos

Mensagem concatenada

Olá, vim pelo formulário do site.

Snippet pronto. Quem preenche ainda precisa apertar Enviar no WhatsApp. · 110/2000

Copie o código

HTML com o script dentro. Sem CDN. O código é o mesmo em todas as abas.

Onde colar: Cole antes de '</body>' em qualquer 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>Nome</span><input id="nome" name="nome" type="text" data-cs-field data-cs-label="Nome" required /></label>
<label class="cs-wa-label" for="email"><span>E-mail</span><input id="email" name="email" type="email" data-cs-field data-cs-label="E-mail" /></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 no 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 = "Olá, vim pelo formulário do site.";
  var tooLong = "A mensagem ficou grande demais para o link do WhatsApp. Encurte os 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 exemplo no snippet. Troque pelo seu antes de copiar.

Informe um número válido pra copiar o snippet.

Perguntas frequentes

Isto é igual ao Whatsform ou Callbell?
Não. Whatsform e Callbell hospedam o formulário no domínio deles e guardam a resposta. Aqui o HTML fica no seu site. A Chatsac não recebe o lead. Quem clica abre o WhatsApp com o texto pronto e ainda precisa apertar Enviar.
Por que não dá para anexar PDF ou foto?
O envio é um link GET (api.whatsapp.com/send). Arquivo não cabe nesse URL. Ferramentas que aceitam upload guardam o arquivo no servidor delas. Esta tela não faz isso.
A FAQ da Meta mostra wa.me. Por que o código usa api.whatsapp.com/send?
A ajuda ao consumidor documenta wa.me. O redirect do wa.me corrompe emoji na mensagem. O snippet usa api.whatsapp.com/send, o mesmo endpoint das outras tools da Chatsac. Não troque o URL. Fonte: faq.whatsapp.com/5913398998672934.
O visitante preencheu e eu não recebi nada?
O formulário só abre o WhatsApp com o texto no campo. Se a pessoa não apertar Enviar no app, a mensagem não sai. Isso não é falha do snippet.
Isso vale como opt-in de marketing?
Não. Uma mensagem iniciada pelo cliente abre conversa. Não substitui um opt-in claro de campanha. A ferramenta não resolve política de messaging da Meta.