22

Estou construindo um website para ser hospedado em um servidor que não tem suporte a PHP ou outra linguagem server-side.

Preciso enviar os valores de um formulário de contato por e-mail e meus recursos são apenas HTML5 e JavaScript.

Existe alguma forma de fazer este envio?

5
  • Qual é o tipo de servidor?
    – Sergio
    Commented 12/12/2013 às 15:51
  • Você pode usar serviços como o ContactMe ou o MailChimp ambos produzem o HTML para faer formulários direto no seu site e enviam email para você ou adicionam a pessoa numa lista de emails sua (no caso do MailChimp) Commented 12/12/2013 às 18:30
  • Negativaram mais esse resposta é a menos mirabolante até agora, e realmente, não vai precisar nada server-side, somente uma assinatura
    – hernandev
    Commented 12/12/2013 às 22:01
  • Bom, é a mais simples de implementar e faz o que a pergunta está pedindo. Commented 12/12/2013 às 22:10
  • O ContactMe não existe mais, desde 31/03/2017.
    – Rasshu
    Commented 12/05/2017 às 0:38

6 Respostas 6

19

Não é possível realizar o envio somente com HTML5 e JavaScript. Para enviar um email você precisa de um servidor SMTP.

Essa incumbência é normalmente delegada ao servidor web (server-side), mas como você explicou você não possuí.

Não é possível conectar diretamente de um browser a um servidor SMTP (ou a qualquer outro serviço utilizando outro protocolo que não HTTP, até por uma questão de segurança).


Não sei se é seu caso, mas uma alternativa seria deixar o trabalho do envio do email para o usuário, utilizando uma URL com mailto.

É possível especificar até um assunto e o corpo do email, exemplo:

<a href="mailto:?subject=Assunto do email&amp;body=Olá,%0D%0A%0D%0A[corpo do email]%0D%0A%0D%0AAtenciosamente,%0D%0A[nome do usuário]">Envie seu email!</a>

Obs:

  • No exemplo %0D%0A representa uma quebra de linha.
  • Não é possível utilizar HTML no corpo do email (explicado aqui).
0
16

Alguém já respondeu que não é possível. Mas, se você gerar RSS (feeds) no seu site, você pode usar um serviço de redirecionamento pra enviar o email sempre que o RSS for atualizado. Há alguns serviços desse tipo gratuitos que funcionam bem. Eu uso esse aqui: https://ifttt.com

4
  • Excelente! não sabia que existia esse serviço de trigger online, vou usar ele mesmo! Commented 12/12/2013 às 16:04
  • E para gerar um feed dinamicamente sem nada server-side? Vai precisar de outro serviço, não?
    – bfavaretto
    Commented 12/12/2013 às 16:12
  • Você tem razão @bfavaretto. De todas as formas, eu postei uma nova sugestão que parece mais apropriada. Commented 12/12/2013 às 18:07
  • Bacana esse esquema cara... Commented 27/12/2013 às 19:52
13

Descobri uma alternativa usando o Google Docs. O procedimento é o seguinte:

  • Utilizando uma conta sua do Google, crie um formulário em drive.google.com (se tiver dúvidas, consulte a documentação do Google Drive)

  • Abra a planilha relacionada ao formulário (o botão indicado em vermelho faz isso - se não estiver como na imagem, clique no botão nesse mesmo lugar pra criar uma nova planilha para o formulário)

inserir a descrição da imagem aqui

  • No menu "Tools", selecione "Script Editor". Uma nova janela será aberta. Substitua o código que está lá pelo código como no exemplo abaixo (os valores submetidos no formulário estão nas colunas, use e.value[indice] para obtê-los):
function onFormSubmit(e) {
    var toAddress = "[email protected]";
    var timestamp = e.values[0];
    var answer = e.values[1];
    var subject = "New answer";
    var emailBody = "Sao Paulo, bnla bla de blablabla" + "\n\n" +
                    "A resposta é: " + answer + "\n\n" +
                    "Hora de envio: " + timestamp;
    MailApp.sendEmail(toAddress, subject, emailBody);
}
  • Salve o script e acesse no menu "Resources" a opção "All your triggers". Lá, relacione a sua nova função (onFormSubmit, no exemplo) com o evento "On form submit", como na imagem abaixo:

inserir a descrição da imagem aqui

Você irá precisar autorizar o Google Drive a enviar emails a partir da sua conta (talvez seja uma boa ideia criar uma conta específica pra isso), mas funciona corretamente (além de armazenar os dados na planilha para conferências futuras). Outra coisa bacana é que você pode embutir o formulário em qualquer página html (se precisar de ajuda nisso, consulte esse link, por exemplo: http://googledocs.blogspot.com.br/2008/05/embed-your-forms.html).

Eu testei aqui e funciona perfeitamente. :) A fonte original dessa sugestão é esta: http://blog.apps.chicagotribune.com/2013/02/15/using-google-docs-to-send-email/

2
  • Como fica o potencial para abuso, disso? Alguém que entenda JavaScript pode copiar o código fonte do seu site, e começar a mandar emails no seu nome?
    – elias
    Commented 12/12/2013 às 19:11
  • O código que contém o email não fica na página com o formulário embutido, e sim lá na planilha do Google Drive (acessível somente por meio do login com a conta do Google). Creio que a questão de segurança com relação a isso é tratada pelos mecanismos de segurança da conta do Google, não? Commented 12/12/2013 às 21:58
2

Você pode usar o cliente de e-mail do usuário assim:

HTML

<textarea id="myText">
    Lorem ipsum...
</textarea>
<button onclick="sendMail(); return false">Send</button>

JAVASCRIPT

function sendMail() {
    var link = "mailto:[email protected]"
             + "[email protected]"
             + "&subject=" + escape("This is my subject")
             + "&body=" + escape(document.getElementById('myText').value)
    ;

    window.location.href = link;
}

Fonte: https://stackoverflow.com/questions/271171/sending-emails-with-javascript

3
  • @Zignd onde fica a opção de usar syntax highlighting? Commented 17/12/2013 às 21:32
  • O syntax highlighting é geralmente adicionado automaticamente, o sistema do StackExchange tenta descobrir que linguagem de programação está sendo utilizada na postagem e adiciona, mas por algum motivo na maioria dos posts aqui no SO em Português isso não está acontecendo, então você pode forçar o syntax highlighting utilizando aquele comentário que coloquei no seu post.
    – Zignd
    Commented 18/12/2013 às 15:26
  • isso não usa só o básico, essa forma depende de que o usuário tenha um client de email. Na época q postei isso era pra ver se é possível fazer uma postagem de email sem backend e não é possível. Commented 1/11/2021 às 1:42
-1

Hoje é possível mandar email via node.js usando um pacote bem legal chamado Nodemailer. Tem um tutorial em pt-br AQUI, para páginas de contato que use somente js acho a melhor opção.

-3

O Formspree é um site que possui uma API que pode ser integrada diretamente ao seu código HTML sem a necessidade de uma linguagem back-end para fazer o envio dos dados do formulário para o seu email.

Sua forma de uso é bem simples:

  1. Primeiro você se registrar no site colocando o email cujo vai ser enviado o fomulário da sua aplicação.

  2. Depois de você se cadastra corretamente no site Formspree é só pega o URL gerado pelo site e integrar na sua tag <form> no atributo action. Ao seu fomulário ser enviado pelo usuário, você vai receber um email com os dados enviados no respectivo email que você cadastrou no site. Todos os input devem conter o atributo name preenchido para identificação quando o fomulário for enviado para seu email.

Exemplo:

<form action="https://formspree.io/f/{form_id}" method="post">
  <label for="email">Your Email</label>
  <input name="Email" id="email" type="email">
  <button type="submit">Submit</button>
</form>

obs: Lembrado que é obrigatório o uso do method="post".

No próprio site tem uma aba chamada "Submissions" cujo você pode ver todos os emails que foram mandados para você Imagem.

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 31/10/2021 às 0:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .