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
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 @charliea21 said:
Yes, after that in the server-side, you can use nodemailer
to forward it to your mail inbox.
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.
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: The friendly community where everyone builds the web to see how I configured it.
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
@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
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.