将联系人回复提交到电子邮件

我使用repl.it来构建我的网站，但是repl.it有一个名为HTML/CSS/JS的服务器，它不支持PHP，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_addressn 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，每当用户点击提交按钮时，响应就会发送到电子邮件？

总的来说，尽管repl.it自上线以来已经取得了很大的进步，比如托管您的repl和他们独特的upm(repl.it通用包管理器(，但我认为它至少还不是一个构建这样一个应用程序的合适平台，尽管它本质上很简单。repl.it是一个非常受限的平台，出于良好的安全考虑。

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

现在，如前所述，由于repl.it是一个非常受限的环境，您可能会注意到它不支持PHP的mail函数，也不支持curl。作为一种解决方法，您可以使用发送电子邮件的API，如SendGrid的(顺便说一下，他们提供免费的分层计划，允许您每天发送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-mailphp

<?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 $lnamen".
"Email: $email_addressnMessage: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);
}
?>

这个例子只是演示如何做到这一点。请记住，它没有应用任何安全最佳实践

您需要安装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);
}
});