Smtpjs

For more detail see, Smtpjs Documentation⟶

Smtpjs

Using Smtpjs you 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 settings 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

 window.Email.send({
  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 then update your smtp credential

See the sample code under the form bellow for better understanding.

<form data-form="data-form" onsubmit="return false"><label class="form-label text-700 mt-4 mb-3" for="inputName1"><i class="fas fa-user me-2"></i>NAME</label><input class="form-control mt-0" id="inputName1" type="text" name="name" /><label class="form-label text-700 mt-4 mb-3" for="inputEmail"> <i class="fas fa-envelope me-2"></i>YOUR EMAIL</label><input class="form-control mt-0" id="inputEmail" type="email" name="email" /><label class="form-label text-700 mt-4 mb-3" for="validationTextarea1"> <i class="fas fa-pen me-2"></i>MESSAGE</label><textarea class="form-control is-invalid border-400 mt-0" id="validationTextarea1" placeholder="Message" rows="6" cols="50" required="required" name="message"> </textarea><button class="btn btn-primary w-100 mt-3" type="submit">Send</button>
  <div class="feedback mt-2"></div>
</form>