HTML contact form not sending emails to Gmail inbox

Other Questions Gmail
1

I’m building a contact form that should email the submitted data to a Gmail address but it’s not working properly. When users fill out the form and hit submit, nothing gets sent to the email account. I’ve been trying to figure out what’s wrong with my setup but can’t seem to get it right.

Here’s what I have so far:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">

<form onsubmit="submitForm(); clearFields(); return false;">

<h2> CONTACT US <hr width="40px" style="background: #333; height:3px"></h2>
<input type="text" id="fullname" placeholder="Your Name" required>
<input type="email" id="useremail" placeholder="Email Address" required>
<input type="text" id="mobile" placeholder="Phone Number" required>
<textarea id="usertext" rows="5" placeholder="Your message here..."></textarea>
<button type="Submit"> Send Message </button>

</form>

</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
function submitForm(){
Email.send({
Host : "smtp.gmail.com",
Username : "[email protected]",
Password : "**********",
To : '[email protected]',
From : document.getElementById("useremail").value,
Subject : "Website Contact Form Message",
Body : "Full Name: " + document.getElementById("fullname").value
+ "<br> Email: " + document.getElementById("useremail").value
+ "<br> Mobile: " + document.getElementById("mobile").value
+ "<br> Message: " + document.getElementById("usertext").value
}).then(
message => alert("Email sent successfully!")
);
}
</script>
</body>
</html>

Can anyone help me understand why the emails aren’t being delivered? I’m pretty new to this stuff so any advice would be helpful.

2

Yeah, this is super common. SMTP.js has major limitations and Gmail blocks most attempts like this for security. Plus you’re exposing your credentials in frontend code - that’s a massive security hole.

I hit this same wall a few months back building a client portal. Wasted hours messing with SMTP configs before I realized I had it backwards.

You need a backend service handling the emails. Latenode fixes this without any server code. Just create a workflow that catches form data via webhook, then sends emails through a real email service.

Here’s the fix:

  1. Ditch all the SMTP.js code
  2. Set up a Latenode workflow with webhook trigger
  3. Add email node connecting to Gmail or whatever provider
  4. Change your form to POST to the webhook URL

Keeps credentials secure and emails actually go through. You can even add auto-responses or save form data to a database.

Takes maybe 10 minutes to setup and actually works. Way better than wrestling with client-side email sending.

3

Had this exact issue last year with my portfolio site. Gmail’s been blocking SMTP.js connections completely since they updated security policies. Even with proper auth, emails get rejected at server level. Your code looks fine - you’re just fighting Gmail’s paranoia about browser-based SMTP requests. I wasted weeks troubleshooting before realizing it wasn’t my setup that was broken. Switch to EmailJS instead. It handles server-side stuff and connects directly with Gmail without exposing credentials. Just register your email service, grab an API key, and swap out your JavaScript for their send function. Takes 15 minutes to migrate and actually delivers reliably.

4

check your gmail spam folder first - most contact form emails land there. also, gmail needs app passwords now instead of regular ones, so that’s probably why it’s failing. generate one in your google account security settings.