将联系回复提交至电子邮件

Question

将联系回复提交至电子邮件

Cod*_*300 5 html javascript css php 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');
}

Run Code Online (Sandbox Code Playgroud)

代码的其余部分：

$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');
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Avr*_*ham 4

一般来说，虽然repl.it自从上线以来已经取得了很大的进步，比如托管你的repl以及他们的独特的upm（repl.it 通用包管理器），但我建议它至少还不是一个合适的尽管本质上很简单，但构建这样一个应用程序的平台。repl.it出于安全方面的考虑，这是一个非常受限制的平台。

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

现在，如前所述，因为这repl.it是一个非常受限的环境，您可能会注意到它不支持 PHP 的mail功能，也不支持curl. 作为解决方法，您可以使用像SendGrid这样的电子邮件发送 API （顺便说一句，他们提供免费套餐，允许您每天发送 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>

Run Code Online (Sandbox Code Playgroud)

样式.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;
  }
}

Run Code Online (Sandbox Code Playgroud)

脚本.js

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

Run Code Online (Sandbox Code Playgroud)

索引.php

<?php

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

?>

Run Code Online (Sandbox Code Playgroud)

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

?>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	4 年，4 月前
查看次数：	523 次
最近记录：	4 年，4 月前