Making a contact form

sooo . I am trying to make a simple contact form but dont really know how to make one. Would i use hello webpage or express. And what would i do after that.

thanks
Misly

You can use hello-express and define an express POST route to handle the contact form response then do some processing with that data. You can use the HTML <form> element to help you create a form!

If you don’t want to code you can always embed a Google Form.
https://forms.new

Making one with Google Forms can make your page look ugly, especially if it doesn’t match with the styles (but if you’re in a hurry, that’s an option!).


On what @xXProGamerXx said:

Yes, after that in the server-side, you can use nodemailer to forward it to your mail inbox.

1 Like

I am using google forms currently but it doesnt look too great and I tried making my own but it keeps saying filename.php cannot post

No, you don’t have to use PHP. You can simply use Node.js.

1 Like

Thanks. I will try, I’ll reply if anything doesnt work.

My website khaleelgibran.com has a contact form I made using Node.js. See server.js of glitch.com/~khaleelgibran to see how I configured it.

1 Like

i have went through yours and i dont understand how im supposed to get the client id, client secret and refresh token

thank you it works now :grinning: :grinning:

@khalby786 i am having one issue though, after the form is complete it loads, and times out

This article was the one that helped me: https://medium.com/@nickroach_50526/sending-emails-with-node-js-using-smtp-gmail-and-oauth2-316fe9c790a1. It will tell you how to get a


Yes, I noticed that, I’m working on a fix, will let you know when its complete. But the mail gets sent!


And I saw your testing :stuck_out_tongue_winking_eye:

Well, I’m experiencing something of the similar sort. I modified the smtpTransport.sendMail(mailContent, (err, response) => { .. }) in server.js to something like this:

smtpTransport.sendMail(mailContent, (err, response) => {
    if (err) {
      var status = { "status": "404" };
      response.send(status);
      console.log("Error!")
    } else {
      var status = { "status": "200" };
      response.send(status);
      console.log("Sucess!");
    }
    smtpTransport.close();
  });

And then my contact.html became this:

<!DOCTYPE html>
<html>
  <head>
    <title>Contact - Khaleel Gibran</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/style.css" />

    <style>
      body {
        margin-top: 15%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 15%;
      }

      input,
      textarea {
        display: block;
        margin-bottom: 10px;
        padding: 5px;
        width: 100%;
        border: 1px solid lightgrey;
        border-radius: 3px;
        font-size: 16px;
      }

      button {
        font-size: 16px;
        border-radius: 3px;
        background-color: yellow;
        border: 1px solid grey;
        color: black;
        cursor: pointer;
        padding: 13px;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>
    <h1>
      CONTACT ME [My replies come at the speed of lightning, I think, but I'm not sure...?]
    </h1>
    <form>
      <label for="name">Name</label><br />
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Your name"
        required
      />
      <br /><br />
      <label for="email">Email</label><br />
      <input
        id="email"
        name="email"
        type="text"
        placeholder="Your email"
        required
      />
      <br /><br />
      <label for="message">Message</label><br />
      <textarea
        id="message"
        name="message"
        placeholder="Enter your message here"
        rows="3"
        required
      >
      </textarea>
      <br /><br />
      <button name="submit" type="submit" id = "submit">Submit!</button>
    </form>
    
    <script>
    
      const contactform = document.getElementsByTagName("form")[0];
      
      contactform.onsubmit = function(event) {
        
        event.preventDefault();
        
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var email = document.getElementById("email").value;
        
        var data = { "name": name, "email": email, "message": message };
        
        fetch("/contact", {
          method: 'POST',
          body: JSON.stringify(data),
          headers: {'Content-Type': 'application/json'},
        })
          .then(res => JSON.stringify(res))
          .then(data => {
            console.log(data);
          
            if (data.status === "404") {
              document.body.innerHTML = ("Uh oh, something went wrong! Try again later?");
            } else {
              document.body.innerHTML = ("Your form has been successfully sent!");
            }
            
          })
      
      }
      
    </script>
  </body>
</html>

What I’ve done is that I prevented the form from being refreshed (using event.preventDefault()) and it sends the mail fine, but in the script, I’m checking for the status send from the server-side:

if (data.status === "404") {
    document.body.innerHTML = ("Uh oh, something went wrong! Try again later?");
} else {
   document.body.innerHTML = ("Your form has been successfully sent!");
}

This does work, but it takes place only after a looong time and only after I get a 502 response.