CODEWITHSUNDEEP
javascriptphpemail
ELE
ELE

Reputation: 33

How to mailto in form with smtp in js

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("[email protected]",
"[email protected]",
"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!

Upvotes: 1

Views: 1791

Answers (2)

user4616966
user4616966

Reputation:

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.

Upvotes: 0

Luis Diego Hern&#225;ndez
Luis Diego Hern&#225;ndez

Reputation: 748

@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("[email protected]",
          "[email protected]",
          "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>

Upvotes: 1

Related Questions