带有 SMTP 的 JS 和 CSS 联系表

问题描述 投票：0回答：1

我正在编辑联系表格。已经非常接近正常运行了。看来我有一个小错误，导致表单无法正确提交。正确提交后，应显示一个弹出框，并且表单应发送消息。这些都没有发生。我可能做错了什么？谢谢！

https://SiteEditing.cc/C-F-ARC-9-2023/c-f.html

一旦我的表单正常运行，我希望我的单选问题成为隐藏的蜜罐问题。

/* SmtpJS.com - v3.0.0 */
var Email = { send: function (a) { return new Promise(function (n, e) { a.nocache = Math.floor(1e6 * Math.random() + 1), a.Action = "Send"; var t = JSON.stringify(a); Email.ajaxPost("https://smtpjs.com/v3/smtpjs.aspx?", t, function (e) { n(e) }) }) }, ajaxPost: function (e, n, t) { var a = Email.createCORSRequest("POST", e); a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.onload = function () { var e = a.responseText; null != t && t(e) }, a.send(n) }, ajax: function (e, n) { var t = Email.createCORSRequest("GET", e); t.onload = function () { var e = t.responseText; null != n && n(e) }, t.send() }, createCORSRequest: function (e, n) { var t = new XMLHttpRequest; return "withCredentials" in t ? t.open(e, n, !0) : "undefined" != typeof XDomainRequest ? (t = new XDomainRequest).open(e, n) : t = null, t } };
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', Sans-Serif;
}

.form-container {
    width: 100%;
    height: 100%;
    background: Transparent;
    color-OFF: #C0C0C0;
    display: flex;
    align-items: center;
    justify-content: center;
}

form {
    background: #4169E1;
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
}

.form-title {
    background: #FFF;
    color: #663399;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.form-radio {
    background: #FFF;
    color: #663399;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    padding-top: 5px;
    /*display: none;*/
}

form input, form textarea {
    border: 0;
    margin: 10px 0;
    padding: 20px;
    outline: none;
    background: #FFF;
    color: #663399;
    font-size: 16px;
    font-weight: bold;
}

form button {
    padding: 15px;
    background: #663399;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    border: 0;
    outline: none;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 30px;
}

::-webkit-input-placeholder { /* Edge */
    color: #663399;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #663399;
}

::placeholder {
    color: #663399;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <meta name="description" content="">
        
        <meta name="author" content="">
        
        <title>SiteEditing.cc</title>
        
        <!-- Font A -->
        
        <link href="Font-A-5.15.4/css/all.css" rel="stylesheet">
        
        <link href="c-f.css" rel="stylesheet">
        
    </head>
    
    <body>
        
    <div class="form-container">
    
    <form onsubmit="sendEmail(); reset(); return false;">
        
    <h3 class="form-title">SSL SECURE CONTACT FORM <i class="fas fa-lock fa-spin"></i><br>FORM SOFTWARE STILL BEING BUILT.</h3>
    
    <input type="text" id="name" placeholder="Your Name?" oninvalid="this.setCustomValidity('Your Name MUST Be Added!')" Required>
    
    <input type="email" id="email" placeholder="Your VALID Email Address?" autocomplete="off" oninvalid="this.setCustomValidity('Your VALID Email Address MUST Be Added!')" Required>
    
    <input type="text" id="phone" placeholder="Your Contact Phone Number?">
    
   <input type="subject" id="subject" placeholder="Your Message Subject?" oninvalid="this.setCustomValidity('Your Subject MUST Be Added!')" Required>
   
   <textarea id="message" rows="4" placeholder="Your Message?" oninvalid="this.setCustomValidity('Your Message MUST Be Added!')" Required></textarea>
    
    <div class="form-radio">
    <p><i class="fas fa-shield-alt fa-spin"></i> What Are You? (To Be Hidden)</p>
    
    <input type="radio" id="radio-1" name="h-pot"><label for="radio-1"> A I &nbsp;</label>
    
    <input type="radio" id="radio-2" name="h-pot"><label for="radio-2"> BOT &nbsp;</label>
</div>

    <button type="submit">SEND <i class="fas fa-share"></i></button>
        
    </form>
   </div>
        
    <script src="c-f.js"></script>
    
    <script>

function sendEmail () {
        Email.send({
    Host : "mail.siteediting.cc",
    Username : "[email protected]",
    Password : "-1fpzJ8h*+H3",
    Port : "587",
    To : "[email protected]",
    From : "document.GetElementById("email").value,
    Subject : "S E Contact Form Message",
    Body : "Name: " + document.GetElementById("name").value,
        + <br><br> Email: " + document.GetElementById("email").value,
        + <br><br> Phone Number: " + document.GetElementById("phone").value,
        + <br><br> Message: " + document.GetElementById("message").value,
}).then(
  message => alert(Message Sent!)
);
    }
    
    </script>
        
    </body>
</html>

javascript css forms smtp
1个回答
0
投票

我看到的一些可能的问题是语法错误、不正确的函数调用、不安全的密码泄露。即使这有效，但这并不安全。

function sendEmail() {
  Email.send({
    Host: "mail.siteediting.cc",
    Username: "[email protected]",
    Password: "-1fpzJ8h*+H3",
    Port: "587",
    To: "[email protected]",
    From: document.getElementById("email").value,
    Subject: "S E Contact Form Message",
    Body: `Name: ${document.getElementById("name").value}<br><br>Email: ${document.getElementById("email").value}<br><br>Phone Number: ${document.getElementById("phone").value}<br><br>Message: ${document.getElementById("message").value}`
  }).then(
    message => alert('Message Sent!')
  );
}

再次强调：在客户端 JavaScript 中公开 SMTP 凭据并不安全。考虑使用服务器端方法发送电子邮件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.