How to make a submit by sending completed data in the form to an email?

Posted on

Question :

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

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

    <div id="cadastro">
        <form id="contatoForm" method="post" action="">
            <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>

I’ve implemented this code above, but as soon as I submit the form, it opens my own email and with the completed data as if I were sending a new email. What I want is for the user to fill in with name and email in the fields and this data goes to my inbox. I searched for solutions but most use the same thing I’m doing or with href, which does not solve the problem. I know it’s simple but I need a simple thing to finish.


Answer :

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

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


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 content formatted for the email to be sent.

Here’s an example:

<a href="">preparar email</a>

This same technique can be used with your form, for example:

<form id="contatoForm" method="get" action="" 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>

You will need a little 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);


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



    The action of the form must be GET (not POST, some browsers will accept POST, not all);

  • I added the target on the form to be compatible with email clients embedded in the browser;
  • Your email input was with email = email and is name=”email”, could cause an error when selecting the field;
  • Do not forget that the DOM must have been loaded so you can add the form event listener;

Browsers do not send email.
Your code is the closest you’ll get to using only the browser.

You can not send email with HTML & JavaScript – In Web applications, you can only send emails securely on the server side.

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


Leave a Reply

Your email address will not be published. Required fields are marked *