javascript - 提交联系回复到电子邮件

标签 javascript php html css node.js

我正在使用 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，并且每当用户点击提交按钮时，响应都会发送到电子邮件？

最佳答案

一般来说，虽然 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 .作为一种解决方法，您可以使用电子邮件发送 API，例如 SendGrid's。 (顺便说一句，他们提供 free tier plan ，允许您每天发送 100 封电子邮件)并使用 file_get_contents 实现它函数，显然是 repl.it完全支持。
一个例子如下:
索引.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>
样式.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;
  }
}
脚本.js
(() => {
    //Serialize the form at index.html page and send a proper XmlHttpRequest to ./send-mail.php
})();
索引.php
<?php

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

?>
发送邮件.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);
}

?>
此示例只是一个演示，让您了解如何执行此操作。请记住，它不应用任何安全最佳实践!

关于javascript - 提交联系回复到电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68402647/

上一篇：用于常见 reducer 类型的 TypeScript 泛型

下一篇：r - 为什么这段代码在 R 控制台中工作，而不是作为 R 包的一部分？

相关文章：

javascript - "value"在 d3 力定向图中代表什么

javascript - 单击“喜欢”按钮时，它应该显示特定数据吗？

php - 如何通过ajax在php中插入多个同名输入

php - 如何每分钟运行 'free -m' 并添加到当前页面(仅限 php)

html - CSS - 使子 div 具有与父 div 相同的填充

javascript - C#和Js之间通过socket发送二进制数据

javascript - Electron 主流程脚本是否可以通过 `postMessage`函数监听页面发布的消息？

php - SQL 语句不会限制。显示没有结果

html - 表格中的 SVG 在 Internet Explorer 中不缩放

javascript - document.click 以删除页面上的类行为不正常

©2024 IT工具网  联系我们