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.


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.

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 @charliea21 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 has a contact form I made using Node.js. See server.js of 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: Sending Emails with Node.js Using SMTP, Gmail, and OAuth2 | by Nick Roach | Medium. 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" };
    } else {
      var status = { "status": "200" };

And then my contact.html became this:

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

      body {
        margin-top: 15%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 15%;

      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;
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>
      CONTACT ME [My replies come at the speed of lightning, I think, but I'm not sure...?]
      <label for="name">Name</label><br />
        placeholder="Your name"
      <br /><br />
      <label for="email">Email</label><br />
        placeholder="Your email"
      <br /><br />
      <label for="message">Message</label><br />
        placeholder="Enter your message here"
      <br /><br />
      <button name="submit" type="submit" id = "submit">Submit!</button>
      const contactform = document.getElementsByTagName("form")[0];
      contactform.onsubmit = function(event) {
        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 => {
            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!");

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.