How to do a Ubmit sending filled data in the form to an email?

Question

<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>

I implemented this code above, but once I do form Ubmit, it opens my own email and with the data filled as if I were sending a new email. What I want is for the user to fill with name and email in the fields and this data goes to my inbox. I looked for solutions but most use the same that I am doing or with href, which does not solve the problem. I know it’s simple but I need something simple to finish.

Answer 1

The browser does not send email, but it is possible to create a link that already calls the user’s email client, with address, subject and formatted content so that the email can be sent.

Following example:

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

This same technique can be used next to your form, example:

<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>

You will need a small Javascript to format your text.

Native Javascript:

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

Version in 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

Considerations:

• The form action should be GET (and not POST, some browsers will accept POST, not all);
• I added target to the form for compatibility with email clients built into the browser;
• Your email input was with email=email and is name="email", could cause an error when selecting the field;
• Don’t forget that the DOM must have been loaded so you can add the Systener to form event;

Answer 2

According to your comment I would use this form directing it via POST to a Struts action and in this action I would use Velocity to build the HTML template of what email will be.

Then, to actually send the email, you have to have login information, password, POP or IMAP path of the server as well as the port to send using the email API itself Java EE. I particularly use Apache Commons Mail that internally uses the Java EE API, but simplifies for us developers how to do it.

Answer 3

Browsers do not send email. Your code is the closest you will get using just the browser.

You can’t email only with HTML & Javascript -- in web applications, you can only send emails securely on the server side.

There are ways to send email without having a server request AJAX to an external service as this, but they are not recommended because they are insecure (it is easy to email your name), with high potential for abuse.