Last active
October 18, 2022 09:06
-
-
Save henideepak/ba37708ad6d9c77de7a2371e7ac41620 to your computer and use it in GitHub Desktop.
How to send an email from JavaScript ?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> | |
<title>How to send an email from JavaScript ?</title> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="d-grid gap-3 "> | |
<h2 class="text-center">How to send an email from JavaScript ?</h2> | |
<form class="row g-3 m-10 p-4" id="Inqueryform"> | |
<div class="col-md-6 mb-3"> | |
<input type="text" class="form-control" name="fname" placeholder="First name" aria-label="First name"> | |
</div> | |
<div class="col-md-6 mb-3"> | |
<input type="text" class="form-control" name="lname" placeholder="Last name" aria-label="Last name"> | |
</div> | |
<div class="col-md-6 mb-3"> | |
<input type="text" class="form-control" name="email" placeholder="Email" aria-label="Email"> | |
</div> | |
<div class="col-md-6 mb-3"> | |
<input type="text" class="form-control" name="subject" placeholder="Subject" aria-label="Subject"> | |
</div> | |
<div class="col-md-12 mb-3"> | |
<textarea class="form-control" id="Textarea" placeholder="Please insert Your Message..!"></textarea> | |
</div> | |
<div class="col-12"> | |
<button type="button" id="subbtn" class="btn btn-primary">Sign in</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script> | |
<script src="https://smtpjs.com/v3/smtp.js"></script> | |
<script> | |
$('form').validate({ | |
rules: { | |
fname: "required", | |
lname: "required", | |
email: { | |
required: true, | |
email: true | |
}, | |
subject: "required", | |
}, | |
messages: { | |
fname: "First Name field is required.", | |
lname: "Last Name field is required.", | |
} | |
}); | |
$(document).ready(function() { | |
$('#subbtn').click(function() { | |
$validd = $('#Inqueryform').valid(); | |
console.log($validd); | |
if ($validd == true) { | |
var $fname = $('input[name="fname"]').val(); | |
var $lname = $('input[name="lname"]').val(); | |
var $email = $('input[name="email"]').val(); | |
var $subject = $('input[name="subject"]').val(); | |
var $message = $('textarea#Textarea').val(); | |
var $bodymessage = 'Name: ' + $fname + ' ' + $lname + '<br> Email: ' + $email + '<br> Message: ' + $message; | |
Email.send({ | |
Host: "smtp.gmail.com", | |
Username: "username@emample.com", | |
Password: "password", | |
To: 'sendermail@example.com', | |
From: $email, | |
Subject: $subject, | |
Body: $bodymessage, | |
}).then(function(message) { | |
alert("mail sent successfully"); | |
//$('#Inqueryform').submit(); | |
}); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment