I am trying to figure out how to send an email to myself using data collected from a contact form. I am building an app using Meteor and Bootstrap. I am open to writing the data into a Google Spreadsheet if that's a lot easier, but would prefer to send an email. Here is my code so far:
HTML:
<div class="modal fade" id="contact">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" onsubmit="return check_contact();">
<div class="modal-header" style="text-align: center">
<img style="max-width:140px;" src="LagoonLogoContact.png">
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-1 control-label"><i class="fa fa-user" id="contact-name-icon"></i></label>
<div class="col-lg-11">
<input type="text" class="form-control" id="contact-name" placeholder="name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-1 control-label"><i class="fa fa-envelope-o" id="contact-email-icon"></i></label>
<div class="col-lg-11">
<input type="email" class="form-control" id="contact-email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-1 control-label"><i class="fa fa-pencil" id="contact-message-icon"></i></label>
<div class="col-lg-11">
<textarea class="form-control" rows="8" placeholder="message" id="contact-message"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-primary pull-left" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</a>
<button class="btn btn-primary pull-right" type="submit"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</form>
</div>
</div>
</div>
JAVASCRIPT (Below HTML on same page):
<script>
function check_contact() {
var name = document.getElementById('contact-name').value;
var email = document.getElementById('contact-email').value;
var message = document.getElementById('contact-message').value;
var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(name == "" || email == "" || message == ""){
document.getElementById('contact-name').style.border = "1px solid black";
document.getElementById('contact-name-icon').style.color = "black";
document.getElementById('contact-email').style.border = "1px solid black";
document.getElementById('contact-email-icon').style.color = "black";
document.getElementById('contact-message').style.border = "1px solid black";
document.getElementById('contact-message-icon').style.color = "black";
if(name == ""){
document.getElementById('contact-name').style.border = "1px solid #ff6464";
document.getElementById('contact-name-icon').style.color = "#ff6464";
}
if(email == "" || !reg.test(email)){
document.getElementById('contact-email').style.border = "1px solid #ff6464";
document.getElementById('contact-email-icon').style.color = "#ff6464";
}
if(message == ""){
document.getElementById('contact-message').style.border = "1px solid #ff6464";
document.getElementById('contact-message-icon').style.color = "#ff6464";
}
return false;
}
else{
if(reg.test(email)){
console.log("working here");
var nameSend = $('#contact-name').val();
var emailSend = $('#contact-email').val();
var messageSend = $('#contact-message').val();
var dataSend = 'nameSend=' + name + '&emailSend=' + email + '&messageSend=' + message;
console.log(dataSend);
return true;
}
else {
return false;
}
}
}
</script>
Thanks for the help! :)
The email package allows you to send emails very easily. Note that email.send()
only works on the server so you'll need to define a server method and call it from the client.
You also need to be careful not to create a spam vector: if the client can call this function with all parameters then anyone can easily script it to send out a bazillion emails. Usually you don't want both the recipient and the body field to come from the client.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.