Loading...

For detail documentation, Smtpjs documentation ⟶

Smtpjs

UsingSmtpyou will be able to directly send email using client-side javascript without any server-level configurations.

You can also specify where to send the data via an hidden input:

How to configure and use Gmail SMTP to send emails from Javascript?

In case you are planning to use Gmail's SMTP to send mails, then make sure you have properly configured the below settings:

Allowed access in Gmail for less secure apps:

To use Gmail SMTP you'll need to allow access for less secure apps from google account settings. Turning the below setting off will allow your Javascript to connect to Gmail.

Disabled 2-step factor authentication

As you're going to connect to Gmail remotely using a program, so 2-step factor authentication should be disabled. Click here to learn more on how to disable 2FA

Once, the above settings are done, your Google SMTP server configurations would look something like this
  • MTP Server/Hostname: smtp.gmail.com
  • MTP Username: [Your Gmail Address]
  • SMTP password: [Your Gmail Password]
  • SMTP Port: 587
  • TLS/SSL: Required

If you are using gulp based workflow, Open form-processor.js and update your smtp credential

 widow.Email.sent({
	Host: "smtp.mailtrap.io", 
	Username: "Your User Name",
	Password: "Your Password",
	To: formData.email,
	From: "You@isp.com",
	Subject: "This is the subject",
	Body: `And this is the body` 
 })

if you are not using gulp based workflow, Open src/js/form-processor.js find formInit method update your smtp credential.

See the sample code under the form below for better understanding:

<form data-form="data-form" onsubmit="return false">
  <div class="form-group"><label class="form-label" for="name">Name </label><input class="form-control" id="name" type="text" name="name" placeholder="Name" /></div>
  <div class="form-group"><label class="form-label" for="email">Your Email</label><input class="form-control" id="email" type="email" name="from" placeholder="Email" /></div>
  <div class="form-group"><label for="message"> Message </label><textarea class="form-control" id="message" rows="8" name="message" placeholder="Write your massage..."></textarea></div>
  <div class="form-group"><input class="btn btn-primary d-block w-100" type="submit" name="submit" value="Send!" /></div>
  <div class="feedback mt-3"></div>
</form>