简体   繁体   English

如何在js中使用smtp邮寄表单

[英]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) . 我想要一个按钮(在这种情况下为“发送电子邮件”按钮)来触发mailto而不打开电子邮件客户端,我希望它自动发送(在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 . 然后,我发现了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! 非常感谢!

Why use some JavaScript Emailing service? 为什么要使用一些JavaScript电子邮件服务? Just use PHP. 只需使用PHP。
PHP is a server-sided language. PHP是一种服务器端语言。 Using commands like $To = $_POST['to']; 使用$To = $_POST['to'];类的命令$To = $_POST['to']; and $From = $_POST['from']; $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. 我建议您阅读Mail函数上的PHP手册,以了解如何使用PHP发送电子邮件。 PHP Mail function It's quite simple actually. PHP Mail函数实际上非常简单。 If you don't know much of PHP, just go to W3Schools.com's PHP tutorials. 如果您不太了解PHP,请访问W3Schools.com的PHP教程。

<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. 在上面的代码中,它使用带有attribute方法和action的form元素。 Method tells the client that it's going to run in POST, or the more secure version of GET. 方法告诉客户端它将在POST或更安全的GET版本中运行。 GET can be seen in a URL like this: https://mywebsite.co/index.php?input=Hi 可以在这样的URL中看到GET: https//mywebsite.co/index.php?input = Hi
Unlike GET, POST cannot be seen in the URL, thus it is harder to interfere with. 与GET不同,POST无法在URL中看到,因此很难进行干预。 In other words, POST is safer to use. 换句话说,POST更安全使用。 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. INPUT标记必须具有“名称”,以便服务器可以接收它们。 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. 占位符是TEXT和PASSWORD的输入属性,当值为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. SUBMIT按钮的值只是该按钮将显示的文本。 You do not gather data from the button itself. 您不从按钮本身收集数据。

@Ty Q.'s answer is the best approach, but after reviewing SmtpJS , this is how you'd use it: @Ty Q.的答案是最好的方法,但是在回顾了SmtpJS之后 ,这就是您的使用方式:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM