How to mailto in form with smtp in js

Question

I'm stuck here. I want a button (in this case; the Send-email button) to trigger mailto without opening an email client, I want it to automatically send (in JS, smtp) . I don't know if I asked too much and if this is even possible.. This is my form:

<form id="form">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
        <input id="username" type="text" class="form-control blender-pro-book form-text" placeholder="Username" aria-describedby="basic-addon1">
        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
        <input id="message" type="text" class="form-control blender-pro-book form-text" placeholder="Message" aria-describedby="basic-addon1">
      </div>
      <p class="error-holder"><span id="error" class="error blender-pro-book"><i class="fa fa-exclamation-triangle"></i>Try again please!</span></p>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
      <button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>
    </div>
  </div>
</form>

I've tried putting in several codes but they all result in opening an email client. Then, I discovered SmtpJS.com. I have put the script code in my index file, but I have no clue where to put this code:

Email.send("from@you.com",
"to@them.com",
"This is a subject",
"this is the body",
"mx1.hostinger.nl", */ That's my hosting SMTP /* 
"username",
"password");

I just want this button to send an email:

<button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>

Can you please tell me where to put it in my form?

Thank you a lot!

You would need to make an AJAX call from your client to your server so it sends the email. — Luis Diego Hernández, Feb 11 '17 at 18:43
@LuisDiegoHernández thank you for your comment. I'm googling that right now :) — ELE, Feb 11 '17 at 18:45

score 1 · Answer 1 · answered Feb 11 '17 at 19:03

1

@Ty Q.'s answer is the best approach, but after reviewing SmtpJS, this is how you'd use it:

<html>
  <head>

  </head>
  <body>
    <form id="form">
      <!--form goes here-->
      <input type="submit" value="Submit" />
    </form>
    <script src="http://smtpjs.com/smtp.js"></script>
    <script>
      function sendMail(e){
        event.preventDefault();
        console.log('This will send the mail through SmtpJS');
        Email.send("from@you.com",
          "to@them.com",
          "This is a subject",
          "this is the body",
          "smtp.yourisp.com",
          "username",
          "password");
      }

      function init(){
        document.getElementById('form').onsubmit = sendMail;
      }

      window.onload = init;
    </script>
  </body>
</html>

answered Feb 11 '17 at 19:03

Luis Diego Hernández

748
12
25

Thanks very much for answering! Unfortunately, this doesn't work for me. the Submit button doesn't do anything. Do you happen to know why? – ELE Feb 11 '17 at 19:12
You should run this code on your local environment, since the snippet is sandboxed. Send the info inside `Email.send()` with your info and it should work. – Luis Diego Hernández Feb 11 '17 at 19:15
I have already put in my information there before but it still doesn't work. – ELE Feb 11 '17 at 19:18
Maybe it has to do with authentication or some other issue. Were you able to do it? – Luis Diego Hernández Feb 11 '17 at 22:32
No, I was not able to do it! I did put in the correct information! – ELE Feb 12 '17 at 10:00

score 0 · Answer 2 · 2017-02-11T19:14:48.500

0

Why use some JavaScript Emailing service? Just use PHP.
PHP is a server-sided language. Using commands like $To = $_POST['to']; and $From = $_POST['from'];, you can acquire data sent from a form element. I recommend you read the PHP manual on the Mail function in order to learn how to send an e-mail using PHP. PHP Mail function It's quite simple actually. If you don't know much of PHP, just go to W3Schools.com's PHP tutorials.

<form method="POST" action="mymail.php">
<input name="to" type="text" placeholder="To:" value="" />
<input name="from" type="text" placeholder="From:" value="" />
<input name="cc" type="text" placeholder="CC:" value="" />
<!-- Blah Blah Blah, your code goes here, I'm not very good at this site -->
<input type="submit" value="Submit" />
</form>

In the above code, it uses a form element with the attributes method and action. Method tells the client that it's going to run in POST, or the more secure version of GET. GET can be seen in a URL like this: https://mywebsite.co/index.php?input=Hi
Unlike GET, POST cannot be seen in the URL, thus it is harder to interfere with. In other words, POST is safer to use. Action represents the file the data is going to be sent to. The server will process the data and it will interpret it into the code (if provided). INPUT tags must have a "name" in order for them to be receivable by the server. The "type" represents whether the INPUT will be just regular "text", a "password", or a "submit". Submit is a button which'll tell the form to send the data when clicked. Placeholder is an input attribute for TEXT and PASSWORD which will show the specified input when the value is null. Value is the attribute which basically contains the parts you want the server to receive. Except for the button, SUBMIT. The value for the SUBMIT button is just the text the button will show. You do not gather data from the button itself.

edited Feb 11 '17 at 19:14

answered Feb 11 '17 at 18:44

Hello, thanks a lot for your answer. What code goes "there"? Do you mean the email.send one? – ELE Feb 11 '17 at 18:51
@MelissaLockwood You are meaning ?? If you are, this is just extra code that you may want to insert into the form for design or what not, or you may need to add some input tags following the idea of what I am presenting in the code above, so you can transfer the data to your PHP file... if you want to use PHP (which I recommend). – Feb 11 '17 at 18:53
JavaScript just makes the emailing process a little bit more confusing. I recommend you avoid using it because it's (in the end) just a waste of time. PHP has an entire function setup for this, mail(). You can use forms to send this data after clicking "Submit". – Feb 11 '17 at 18:55
I must be very stupid, but I don't know what I to do right now at all. Can you please explain me in more detailed steps what to do? – ELE Feb 11 '17 at 19:03
Uh, sure. I'll go ahead and edit my post real quick. – Feb 11 '17 at 19:04
I still don't get it but I'm trying to understand really hard! Tried several things multiple times but they don't seem to work.. – ELE Feb 11 '17 at 20:14
I have tried making a new mymail.php file but in what directory do I place it? – ELE Feb 11 '17 at 20:49
@MelissaLockwood Same directory as the file with the
code.
– Feb 11 '17 at 22:03
@MelissaLockwood You can't send e-mails offline. It will have to be uploaded to your website (if you have one) to be sent. I'm not sure about services like XAMPP or WAMPP or SmtpJS, however. – Feb 11 '17 at 22:06
Yes I have one and I host it with hostinger so I can easily use a ftp. So I made the mymail.php file in the right dir with this code - but when I click the submit button it doesn't send anything – ELE Feb 12 '17 at 09:55
@MelissaLockwood Please refer to this: http://stackoverflow.com/questions/24644436/php-mail-form-doesnt-complete-sending-e-mail – Feb 12 '17 at 18:37
The question asked how not to use php to send an email. Not every server has php enabled. – peterretief Aug 15 '20 at 10:20

How to mailto in form with smtp in js

2 Answers2