Submit Contact Responses To email

I am using repl.it to build my website, however, repl.it has a server named HTML/CSS/JS and it does not support PHP which is mainly used to submit contact responses to email. The website is built in the HTML/CSS/JS Server. So I cannot use PHP to submit contact responses to email. Is there an alternate way of doing it with Node.js?

I still have the PHP set up but it just needs to be converted to Node.js if that is possible.

PHP File:

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

REST OF The CODE:

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>

Is there a way to translate the PHP code into Javascript, and whenever the user hits the submit button, the responses get sent to email?

Answer

Generally speaking, although repl.it has done a lot of progress since it has been online, like featuring hosting your repl as well as theirs unique upm (repl.it universal package manager), I’d suggest that it isn’t, at least yet, a suitable platform to build such an app despite being inherently simple. repl.it is a very restricted platform and for good security-wise reasons.

With that being said, in case you insist on building this app in their environment while assuming you don’t have any node.js background, instead of creating an HTML,CSS,JS repl, you could create a PHP Web Server one and upload all the website’s static files in the local folder under the repl’s Files section.

Now, as mentioned before, because repl.it is a very restricted environment you’d probably notice that it doesn’t support the PHP’s mail function, nor curl. As a workaround, you can use an email sending API like SendGrid’s (btw they offer a free tier plan, allowing you to send 100 emails/day) and implement it using the file_get_contents function, which, apparently, repl.it does fully support.

An example would be something as follows:

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 $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": "[e-mail]"}]}],
  "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);
}

?>

This example is only a demonstration for you to get an idea regarding how to do so. Just bear in mind that it doesn’t apply any security best practices whatsoever!