3
<div id="mainDiv">
    <div id="marca">
        <img class="imagens" src="media/img/titulo.png" alt="Titulo">
    </div>

    <div id="anaMaria">
        <img class="imagens" src="media/img/fundoCadastroDois.png" alt="FundoCadastroDois">
    </div>

    <div id="cadastro">
        <p>....</p>
        <form id="contatoForm" method="post" action="mailto:[email protected]">
            <input class="cells" type="text" name="nome" placeholder="nome">
            <input class="cells" type="text" email="email" placeholder="email">
            <button type="submit" value="click" id="enviar"></button>
        </form>
    </div>
</div>

Implementei este código acima, mas assim que faço o submit do formulário, abre o meu próprio email e com os dados preenchidos como se eu fosse mandar um novo email. O que eu quero é que o usuário preencha com nome e email nos campos e esses dados vão para minha caixa de entrada. Procurei soluções mas a maioria utiliza o mesmo que estou fazendo ou com href, que não resolve o problema. Sei que é simples mas preciso de uma coisa simples para finalizar.

14
  • Para enviar email precisa de um servidor SMTP. Qual a linguem que você está utilizando?
    – lionbtt
    Commented 6/02/2014 às 1:29
  • 1
    possível duplicata de Como enviar e-mails somente com o básico de HTML5
    – bfavaretto
    Commented 6/02/2014 às 2:14
  • Acho que está havendo um erro de interpretação na pergunta do Guilherme, me parece (pelo código e teor do texto), que quer preencher o email e não envia-lo em si, de forma que o form dele usa mailto. Corrija-me se eu estiver errado. Commented 6/02/2014 às 2:35
  • 1
    Me parece que ele quer sim enviar, mas vamos aguardar o autor esclarecer (nota: como interpretei diferente, rejeitei sua sugestão de edição, @GabrielGartz).
    – bfavaretto
    Commented 6/02/2014 às 3:00
  • 1
    Pessoal, realmente nao fui claro na minha pergunta, o que eu quero é que o usuário preencha com nome e email nos campos e esses dados vão para minha caixa de entreda. Mas pelas respostas que alguns de vocês me deram, não tem como fazer isso sem um servidor. Commented 6/02/2014 às 11:39

5 Respostas 5

5

O navegador não envia email, porém é possível criar um link que já chama o cliente de email do usuário, com endereço, assunto e conteúdo formatado para o email poder ser enviado.

Segue exemplo:

<a href="mailto:[email protected]?Subject=Aqui%20vai%20o%20assunto&Body=E%20aqui%20o%20corpo">preparar email</a>

Esta mesma técnica pode sim ser utilizada junto do seu formulário, exemplo:

<form id="contatoForm" method="get" action="mailto:[email protected]" target="_blank">
    <input type="hidden" name="Subject" value="Meu assunto">
    <input type="hidden" name="Body" value="">
    <input class="cells" type="text" name="nome" placeholder="nome">
    <input class="cells" type="text" name="email" placeholder="email">
    <button type="submit" value="click" id="enviar"></button>
</form>

Você vai precisar de um pequeno Javascript pra formatar seu texto.

Javascript nativo:

document.getElementById('contatoForm').addEventListener('submit', function () {
    var nome = this.querySelector('input[name=nome]'), nome = nome.value;
    var email = this.querySelector('input[name=email]'), email = email.value;
    var texto = 'Olá destinatário, \nMeu nome é '+ nome +' e meu email é '+ email;
    this.querySelector('input[name=Body]').setAttribute('value', texto);
});

DEMO

Versão em jQuery:

$('#contatoForm').on('submit', function () {
    var nome = $(this).find('input[name=nome]'), nome = nome.val();
    var email = $(this).find('input[name=email]'), email = email.val();
    var texto = 'Olá destinatário, \nMeu nome é '+ nome +' e meu email é '+ email;
    $(this).find('input[name=Body]').attr('value', texto);
});

DEMO 2

Considerações:

  • A action do form deve ser GET (e não POST, alguns browsers vão aceitar POST, não todos);
  • Adicionei o target no form para ter compatibilidade com clientes de email embutidos no browser;
  • Seu input do email estava com email=email e é name="email", poderia causar um erro na hora de selecionar o campo;
  • Não esqueça que o DOM deve ter sido carregado para vc poder adicionar o listener para evento do formulário;
2
  • 2
    Bom, considerei a resposta do @Gabriel Gartz a correta, pois o que eu queria nao da pra ser feito sem hospedar minha pagina em um servidor, entao ajustei minha pagina a fazer o que ele me deu como resposta a cima! Obrigado a todos pela ajuda! Commented 6/02/2014 às 16:56
  • @GuilhermeVianna bom saber que minha resposta te ajudou, foi nostálgico escrever essa resposta, tive que lembrar como se formatava email com uri, algo que vem dos primórdios dos browsers. Commented 6/02/2014 às 16:59
3

De acordo com seu comentário eu usaria esse form direcionando ele via POST para uma action do Struts e nessa action utilizaria Velocity para montar o template HTML do que será o e-mail.

Depois, para de fato enviar o e-mail, você tem que ter informações de login, senha, caminho POP ou IMAP do servidor bem como a porta para enviar utilizando a própria API de e-mail do Java EE. Eu particularmente uso Apache Commons Mail que internamente usa a API do Java EE, mas simplifica para nós desenvolvedores como fazê-lo.

1

Navegadores não enviam email. O seu código é o mais perto que você vai chegar usando apenas o navegador.

Você não consegue enviar email apenas com HTML & JavaScript -- em aplicações Web, você só consegue enviar emails de forma segura no lado servidor.

Existem maneiras de enviar email sem ter um servidor fazendo requisição AJAX para um serviço externo como este, mas não são recomendáveis porque são inseguras (é fácil alguém mandar email no seu nome), com alto potencial para abuso.

2
  • Entendi, vou hospedar ele...fazendo isso você sabe me dizer como fazer isso mais simples possivel @elias? Commented 6/02/2014 às 12:02
  • @GuilhermeVianna Então, acho que o jeito mais simple é enviar com o Gmail mesmo, pra não precisar configurar um servidor SMTP. Se você for usar PHP no servidor, pode seguir esse tutorial.
    – elias
    Commented 6/02/2014 às 12:10
-2

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.

-3

Seguindo sua sugestão consegui fazer o que eu queria. No campo "email" eu coloquei para que não aparecesse o email para onde seria enviado o formulario. O email é redirecionado direto pro email colocado no campo "value"

Segue código como ficou, e conforme pode verificar no código, eu acrescentei novas labels e funcionou direitinho:

  <form
            action="https://formspree.io/f/{form_id}"
            method="POST"
            >
            <label>
                Esse e-mail será encaminhado direto para a empresa:
                <th type="email" name="email" readonly=“true” value="[email protected]">
            </label>

            <br>
            <hr>
        
                   

            <label for="nome">Seu nome</label>
            <input type="text" id="nome" name="nome" >
            <br>
            <hr>
            <label for="contato">Motivo do contato</label>
            <input type="text" id="contato" name="contato" >
            <br>
            <hr>
            <label for="descricao">Mensagem</label>
            <textarea name="descricao" id="descricao" ></textarea>

            <hr>
            
            <!-- your other form fields go here -->
            <button type="submit">Send</button>
    </form>

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 .