javascript - 如何使用 emailjs 发送电子邮件?
问题描述
所以我一直在尝试为客户设置一个联系页面,我目前正在使用 emailjs 来做这件事,但是在发送测试电子邮件以查看它是否有效时,它不断出现错误。
我曾尝试访问 emailjs 的网站以找出它有什么问题,但我一无所获。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles2.css">
<link rel="stylesheet" href="css/newheader.css">
<link rel="stylesheet" href="css/contact.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
<script type="text/javascript">
(function(){
emailjs.init("user_ID"); // i have the user id in the code I just didn't want to post it online
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// generate the contact number value
this.contact_number.value = Math.random() * 100000 | 0;
emailjs.sendForm('contact_service', 'contact_template', this);
});
}
</script>
</head>
<body>
<header>
{{>header_2}}
</header>
<form id="contact-form">
<input type="hidden" name="contact_number">
<label>Name</label>
<input type="text" name="user_name">
<label>Email</label>
<input type="email" name="user_email">
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
预期的结果是发送一封测试电子邮件以使事情顺利进行,但由于某种原因它不起作用,它出现了错误的请求,所以我不确定该怎么做。
解决方案
发送电子邮件非常简单,您不需要插件。首先让我们准备好您的表格;将这些属性添加到表单中。
<form id="contact-form" method="POST" action="PHP/mailto.php">
现在是时候设置一个 js 脚本了:
// first things first you gotta listen to the submit event and stop it from
// performing the 'action' which is redirecting the form data to the php
// file we are going to create.
document.getElementById('contact-form').addEventListener('submit', function(event){
//this prevents the form from doing its default action: redirection
event.preventDefault();
// disable inputs so form can only be sent once
$disabled_inputs = document.querySelectorAll('input, textarea');
for(i = 0; i < $disabled_inputs.length; i++){
$disabled_inputs[i].disabled = true;
}
// empty JSON object that will hold form data
var data = {};
//this function will loop through the data and collect the info on the inputs
// and text areas with a name attribute
this.querySelectorAll('input[name], textarea[name]').forEach(function($input) {
// this formats the data in a JSON object {inputname : inputvalue}
$data[$input.getAttribute('name')] = $input.value;
});
// take a look at the console so you get used to the json format
console.log($data);
// this will store the data in a JSON object so you have to clean it to send
// it to the php file with a post variable set
var json_upload = "your_php_postvariable=" + JSON.stringify($data);
// open new ajax request
var inquriry_request = new XMLHttpRequest();
// declare ajax method and origin (look at the form element)
inquriry_request.open("POST", "/PHP/mailto.php");
// declare cleaned JSON format to PHP file
inquriry_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// send ajax request with data
inquriry_request.send(json_upload);
// this functions runs after ajax request loads response
inquriry_request.onload = function(){
// create new script element
scripter = document.createElement('script');
// declare javascript type
scripter.type = 'text/javascript';
// load script echoed from php file inside this tag
scripter.innerHTML = inquriry_request.responseText;
// append script to body (this will cause script to run)
document.querySelector('body').append(scripter);
}
});
现在让我们设置 mailto.php 文件:
<?php
// run this function if post variable is set
if(isset($_POST['your_php_variable']){
// this while output an error log inside the /PHP/ directory
error_log(0);
// html email headers
$headers = "From: Web Emails <your@email.com>\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
// php post variable loop input attributes
var $php_post_var_loop = $_POST['your_php_variable'];
$name = $php_post_var_loop['user_name'];
$email = $php_post_var_loop['user_email'];
$message = $php_post_var_loop['message'];
// strings in php are appended by dots
$email_text = "From: ". $name . "<br><br>".
"Email: " . $email . "<br><br>".
"Message: " . $message;
// run if statement to check if php function ran to send mail
if(@mail('your@email.com', 'Email Subject', $email_text, $headers)){
// use this if you have to switch between single and double quotes
// inside your js script
$quo = '"';
echo "//js code to run if mail sends!"
} else {
// use this if you have to switch between single and double quotes
// inside your js script
$quo = '"';
echo = "//js code to run if mail does not send"
}
}
?>
推荐阅读
- haskell - 无法创建幻影应用函子类
- javascript - 在 JavaScript 中从另一个数组中获取一个数组的元素
- mysql - 我想将第二个查询与第一个查询合并,并将产品媒体和类别媒体显示为 MY SQL Magento 2 中的 URL
- amazon-web-services - AWS CodeDeploy - 我可以在哪里配置 ASG 的部署选项?
- c++ - 这是一个在二叉树中插入数据但时间限制超过的程序
- python - 从 CSV 文件计算标题中带有单词 the 的电影
- sql - SQL GROUP BY 查找最大日期
- angular - 使用 CanActivate 时重定向到特定页面
- mysql - 在 Mysql 工作台中对单个表进行查询
- javascript - 我正在使用 Mozilla pdf.js 库。有没有办法在提供密码的情况下获取解密的字节?