How to make a submit by sending data filled in the form to an email?
<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 as soon as I submit the form, it opens my own email and with the data filled in 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 that data goes to my inbox. I looked for solutions but most use the same as I am doing or with href, which does not solve the problem. I know it's simple but I need one simple thing to finish.
3 answers
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 assemble the HTML template of what will be the email.
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 Java EE email API itself. I particularly use Apache Commons Mail which internally uses the do API Java EE, but simplifies for us developers how to do 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 formatted content for the email to be sent.
Follows 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 with 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 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);
});
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 in the form to have compatibility with email clients built into the browser;
- your email input was with email=email and is name= "email", it could cause an error when selecting the field;
- do not forget that the DOM must have been loaded for vc be able to add listener to form event;
Browsers do not send email. Your code is as close as you'll get using just the browser.
You can't send 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 making AJAX requests to an external service like this , but they are not recommended because they are insecure (it is easy for someone to send email on your name), with high potential for abuse.