提交联系回复到电子邮件答案

【问题标题】：Submit Contact Responses To email提交联系回复到电子邮件
【发布时间】：2021-09-24 21:11:48
【问题描述】：

我正在使用repl.it 来构建我的网站，但是，repl.it 有一个名为 HTML/CSS/JS 的服务器，它不支持主要用于向电子邮件提交联系回复的 PHP。该网站是在 HTML/CSS/JS 服务器中构建的。所以我不能使用 PHP 向电子邮件提交联系回复。使用 Node.js 是否有另一种方法？

我仍然设置了 PHP，但如果可能的话，只需将其转换为 Node.js。

PHP 文件：

$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$email_address = $_POST['email'];
$message = $_POST['subject'];
if(empty($fname) || 
empty($lname) || 
empty($email_address) || 
empty($message)){
    $errors .= "\n Error: all fields are required";
}else{
//some other code 
$to = $myemail;
$email_subject = "Contact form submission:" . $name;
$email_body = "You have received a new message. ".
" Here are the details:\n Name: " . $name . "\n ".
"Email: $email_address\n Message \n " . $message;
$headers = "From:" . $myemail . "\n";
$headers .= "Reply-To:" . $email_address;
mail($to,$email_subject,$email_body,$headers);

header('Location: thank-you.html');
}

代码的其余部分：

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: rgb(62, 3, 179);
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: deeppink;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="contact.php" method="POST">
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" name="firstname" placeholder="Your name.." required>

            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>

            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
            <input type="submit" value="Submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

有没有办法将 PHP 代码翻译成 Javascript，并且每当用户点击提交按钮时，响应就会发送到电子邮件？

【问题讨论】：

是的，有办法做到这一点，但我们不会为您重写代码。您具体在哪里需要帮助？
代码只是问题的一部分。一般来说，您不能直接从未注册的域发送邮件。如help center 所述，这个问题过于宽泛，需要您自己进行大量研究
你可能想看看这个link。
你能检查一下吗 - stackoverflow.com/questions/4295782/…
您好，我为您找到了一些东西，也许对您有帮助，stackoverflow.com/questions/32041229/…

标签： javascript php html css node.js

【解决方案1】：

总的来说，虽然repl.it 上线以来已经取得了很大的进步，比如特色hosting your repl 以及他们独特的upm（repl.it 通用包管理器），我还是建议它尽管本质上很简单，但至少目前还不是构建此类应用程序的合适平台。 repl.it 是一个非常受限的平台，出于良好的安全考虑。

话虽如此，如果你坚持在他们的环境中构建这个应用程序，同时假设你没有任何node.js 背景，而不是创建一个HTML,CSS,JS repl，你可以创建一个PHP Web Server 并上传repl的Files部分下的本地文件夹中的所有网站的静态文件。

现在，如前所述，因为repl.it 是一个非常受限的环境，您可能会注意到它不支持PHP 的mail 函数，也不支持curl。作为一种解决方法，您可以使用像SendGrid's 这样的电子邮件发送API（顺便说一句，他们提供free tier plan，允许您每天发送100 封电子邮件）并使用file_get_contents 函数来实现它，显然，repl.it完全支持。

一个例子如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Get in Touch</title>
</head>
<body>
    <section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="contact.php" method="POST">
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" name="firstname" placeholder="Your name.." required>

            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>

            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
            <input type="submit" value="Submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
</body>
</html>

style.css

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: rgb(62, 3, 179);
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: deeppink;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

scripts.js

(() => {
    //Serialize the form at index.html page and send a proper XmlHttpRequest to ./send-mail.php
})();

index.php

<?php

  readfile('index.html');
  die();

?>

send-mail.php

<?php

$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$email_address = $_POST['email'];
$message = $_POST['subject'];

if(empty($fname) || 
empty($lname) || 
empty($email_address) || 
empty($message)){
  echo "All fields are required!";
}

else {

$mailOptions = array(
  'firstName' => $fname,
  'lastName' => $lname,
  'emailAddress' => $email_address,
  'subject' => "Contact form submission: $fname $lname",
  'body' => "You have received a new message. ".
            "Here are the details:\nName: $fname $lname\n".
            "Email: $email_address\nMessage:\n$message"
);

$result = sendMail($mailOptions);

//$result error handling, ensuring the email has been sent, etc.

}


function sendMail($mailOptions)
{
  $sendEndpoint = 'https://api.sendgrid.com/v3/mail/send';

  //Acording to SendGrid's API email send request
  $payload = '{"personalizations": [{"to": [{"email": "website_owner@domain.tld"}]}],
  "from": {"email": "' . $mailOptions['emailAddress'] . '"},"subject": "' . $mailOptions['subject'] . '",
  "content": [{"type": "text/plain", "value": "' . $mailOptions['body'] . '"}]}';

  $opts = array('http' =>
      array(
          'method'  => 'POST',
          'header'  => array(
            'Authorization: Bearer <<YOUR_API_KEY>>',
            'Content-Type: application/json'
          ),
          'content' => $payload
      )
  );

  $context = stream_context_create($opts);

  return file_get_contents($sendEndpoint, false, $context);
}

?>

这个例子只是一个示范，让您了解如何做。请记住，它不应用任何安全最佳实践！

【讨论】：

上述代码是否发送到电子邮件？我用什么替换<<YOUR_API_KEY>>？我不确定在哪里可以找到 API 密钥
@CodeUser2300 如前所述，假设您使用XmlHttpRequest 在scripts.js 中的同一来源下正确地将POST 请求发送到send-mail.php 端点，则应发送对SendGrid 的API 的请求。关于<<YOUR_API_KEY>>，您必须将register to their service 替换为您自己的。详情请参考他们的API Reference。

【解决方案2】：

您需要安装nodemailer。那么

var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

【讨论】：