Formulário de contacto JavaScript que envia e-mail

Formgong team · Updated 2026-10-06

Um formulário de contacto em JavaScript ainda precisa de um sítio para o POST. Chame fetch, envie os campos e leia a resposta JSON. O Formgong aceita essa chamada sem um servidor seu. Não faz falta uma biblioteca nem uma rota API. No plano grátis, o Telegram é imediato e o e-mail é um resumo diário.

Copie este formulário JavaScript

Idioma do formulárioRótulos, exemplos, botão e mensagens do Formgong para visitantes (_lang).

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="pt">
  <label>Nome <input type="text" name="name" autocomplete="name" placeholder="O seu nome" required></label>
  <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="voce@exemplo.com" required></label>
  <label>Mensagem <textarea name="message" placeholder="Como podemos ajudar?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Deixe este campo vazio<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Enviar</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Enviado. Obrigado!" : "Não foi possível enviar. Tente novamente.");
      if (result.success) form.reset();
    } catch {
      status.textContent = "Falha na ligação. Tente novamente.";
    } finally {
      button.disabled = false;
    }
  });
</script>

JavaScript

<form id="fg-contact" action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="hi">
  <label>नाम <input type="text" name="name" autocomplete="name" placeholder="आपका नाम" required></label>
  <label>ईमेल <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>इस फ़ील्ड को खाली छोड़ें<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">भेजें</button>
  <p role="status"></p>
</form>
<script>
  const form = document.querySelector("#fg-contact");
  const status = form.querySelector("[role=status]");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const button = form.querySelector("button");
    button.disabled = true;
    const fields = Object.fromEntries(new FormData(form));
    try {
      const response = await fetch(form.action, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(fields),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
      if (result.success) form.reset();
    } catch {
      status.textContent = "कनेक्शन विफल। कृपया फिर से कोशिश करें।";
    } finally {
      button.disabled = false;
    }
  });
</script>

Envie FormData em vez de JSON

Envie FormData em vez de JSON

<script>
  const form = document.querySelector("#fg-contact");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const status = form.querySelector("[role=status]");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const result = await response.json();
      status.textContent = result.message || (result.success ? "Enviado. Obrigado!" : "Não foi possível enviar. Tente novamente.");
      if (!result.success) return;
      form.reset();
    } catch {
      status.textContent = "Falha na ligação. Tente novamente.";
    }
  });
</script>

Só a chamada fetch, se o formulário já está na página

Só a chamada fetch, se o formulário já está na página

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "pt", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Não foi possível enviar. Tente novamente.");
  return result.message; // localized "Sent. Thank you!"
}

Como funcionam os formulários em JavaScript

As pessoas procuram um formulário JavaScript que envie e-mail, não um formulário fetch. fetch é só a chamada do navegador que faz o POST. EmailJS, Axios e uma rota de servidor não são precisos.

Envie um cabeçalho Accept com application/json, senão o ponto responde com um redirecionamento, como um formulário simples. Um fetch falhado lança um erro. Um pedido recusado volta com success em false e um texto que pode mostrar.

Configuração em JavaScript

Crie um formulário no Formgong e copie a chave.
Cole o código acima. É um formulário e um script curto: async e await, JSON e try catch para erros de rede.
Deixe o campo isco vazio e fora do ecrã. Se um bot o preencher, o pedido fica como spam e não é entregue.
O script desliga o botão enquanto o pedido corre e depois mostra o texto da resposta. O sucesso limpa o formulário.
Abra a página real e envie um teste. Veja a caixa e ligue o Telegram se quiser um aviso no telefone.

Formas de enviar um formulário JavaScript

Opção	O que você opera	O que recebe
mailto:	Nada num servidor. O correio abre-se.	Uma mensagem só se o visitante enviar. No telefone isso parte com facilidade.
A sua rota API	Um servidor, SMTP e um segredo.	E-mail que você controla. O spam, as falhas e o código também ficam consigo.
EmailJS	O script deles na página.	E-mail pelo serviço deles. Esta linha não dá um preço. Não foi revisto nesse dia.
Formspree	Nenhum. O navegador envia para a Formspree.	E-mail e um painel. Grátis: 50 envios por mês. Personal custa 15 dólares por mês.
Formgong	Nenhum. fetch envia para o Formgong.	Telegram na hora. No Free, o e-mail é um resumo diário. 300 envios por mês, dados na UE.

Os preços da Formspree vêm de formspree.io/plans em 2026-10-06. Os limites do Formgong vêm do código. O EmailJS aparece nesta pesquisa. O preço não foi revisto nesse dia. Web3Forms.com respondeu HTTP 403, por isso não está na tabela.

Preços · Formulário de contacto HTML que envia e-mail

Pacote de componentes: npm install @formgong/core (npm: @formgong/core)

Adicionar a um projeto existente: npx formgong init (npm: formgong)

fetch, uma biblioteca ou o seu servidor?

Use esta página se o formulário é JavaScript simples, um widget pequeno ou uma janela. O visitante fica na página.

Use HTML simples se o JavaScript pode estar desligado. O formulário acima ainda tem action, por isso funciona se o script não correr.

Escreva o seu servidor só se o pedido tem de mudar dados na sua app. O EmailJS envia pelo script dele. O Formgong é um POST.

Perguntas e respostas

O JavaScript envia um formulário por e-mail sem servidor?

O navegador não fala SMTP. Pode fazer POST dos campos para um backend. Esse backend envia o e-mail. Você não opera um servidor para este formulário.

Devo enviar FormData ou JSON?

JSON serve para campos de texto. FormData serve se o formulário já existe e se envia ficheiros. Os dois chegam à mesma caixa. Não ponha Content-Type você mesmo no FormData.

Porque recebo um redirecionamento em vez de JSON?

Um POST de formulário simples devolve um redirecionamento. Para JSON, envie um cabeçalho Accept com application/json. Depois leia success e o texto.

Como devo tratar os erros?

Um fetch falhado lança um erro. Isso é um erro de rede. Um pedido recusado devolve JSON com success em false. Mostre esse texto e guarde o que a pessoa escreveu.

Preciso do EmailJS ou de outra biblioteca?

Não. fetch já está no navegador. Uma biblioteca serve se você já a usa. Envie os mesmos campos e os mesmos cabeçalhos.

Começar grátis

Todas as plataformas →