Why is my Contact form not working?

I tried to make a working html+js contact form, but when i press button it says “Message sent Succesfully” but i dont get message on my gmail that is linked:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel="stylesheet" href="./style3.css">

</head>
<body>
<h1>Contact Us</h1>
<section class="contact-wrap">
  <form action="" class="contact-form" onsubmit="sendEmail(); reset(); return false;">
    <div class="col-sm-6">
      <div class="input-block">
        <label for="">First Name</label>
        <input type="text" class="form-control" id="name" required>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="input-block">
        <label for="">Last Name</label>
        <input type="text" class="form-control" id="family" required>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="input-block">
        <label for="">Email</label>
        <input type="email" class="form-control" id="email" required>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="input-block">
        <label for="">Message Subject</label>
        <input type="text" class="form-control" id="subject" required>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="input-block textarea">
        <label for="">Drop your message here</label>
        <textarea rows="6" type="text" class="form-control" id="message"></textarea>
      </div>
    </div>
    <div class="col-sm-12">
      <button class="square-button" type="submit">Send</button>
    </div>
  </form>
</section>
<!-- partial -->
  <script src="https://smtpjs.com/v3/smtp.js"></script>
  <script>
    function sendEmail(){
      Email.send({
        Host : "smtp.gmail.com",
        username : "my.email@gmail.com",
        password : "12345",
        To : "any.email@gmail.com",
        From : document.getElementById("email").value,
        Subject : "New Form Submition",
        Body : "Name: " + document.getElementById("name").value
          + "<br> Second Name: " + document.getElementById("family").value
          + "<br> Email: " + document.getElementById("email").value
          + "<br> Message: " + document.getElementById("message").value
      }).then(
      message => alert("Message sent Succesfully!")
      );
  }
  </script>
</body>
</html>

Hi @de0lite and welcome to the forum!

Sending email from a webpage isn’t a great idea for a few reasons:

  • Practically, browsers won’t allow you to just open a TCP connection to any SMTP server over any port. Hence, you already need some other way of establishing the connection.
  • Furthermore, your HTML, CSS, and JavaScript are sent to your visitors (the clients). You’d have to send your SMTP credentials (username and password) to the client so they can send the mail

It’s a bit like you are buying something off of Ebay and instead of wiring $20 to the seller, you give them the credentials to your bank account. Sure, they can easily “self-service” take the $20 and be done with it, but you have no guarantees they won’t take more (in this case: send more email, send phishing email, spam email, send mail to other people) and your bank won’t allow this either (in this case: the browser won’t allow you to open random connections).

To properly send emails, you need some kind of backend that handles this for you. Depending on what technologies you use and where you host your site you have a lot of options. Can you tell us a bit more about your site and where it is hosted?

1 Like

thanks, but what if you use security token?

I’m not really sure how the security token would work to be honest. I assume it’s meant to take care of the second bullet point I brought up in my post? In that case, you’d still have to deal with the first one (practical issues). But no matter how you do it, you’ll need some backend / server-side application to help you out. Pure client-side e-mailing isn’t possible.