如何发送联系我们 HTML 页面详情 email

Question

我需要有人检查此代码并指导我进行下一步以获取“联系我们”页面详细信息，例如全名、Email、主题、通过 email 的文本。 我想知道我需要在下面的代码中进行哪些更改才能使其正常工作。 我有什么选择？

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
    <script>
        function clickHere() {
            var name = document.getElementById("textName");
            var namevalue = name.value;
            var email = document.getElementById("emailName");
            var emailvalue = email.value;
            var subject = document.getElementById("subjectName");
            var subjectvalue = subject.value;
            var text = document.getElementById("importantName");
            var textvalue = text.value;
            var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
            var regEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            if (namevalue.length == 0) { 
                alert("Please enter your name");    
                     return false; 
                    } 
                if(!regName.test(namevalue)){
                    alert('Invalid name given.');
                return false;   
                    }
            if (emailvalue.length == 0) {

                alert ("Please enter your email"); }

                if(!regEmail.test(emailvalue)){
                    alert("Please enter valid Email ID");
                        return false;
                }
            
            if (subjectvalue.length == 0) {
                alert ("Please enter the subject");
            
            }

            if (textvalue.length == 0) {
                alert ("Please enter some text");
            
            }
            if((namevalue.length != 0) && (emailvalue.length != 0) && (subjectvalue.length != 0) && (textvalue.length != 0)) {
                alert("Thank you for submitting")
                    return true;
            }
        }
    </script>
    
</head>
<body>
    <div style="background-color: lightblue; font-size: 25px; text-align: center; border: 4px solid blue;">
        <p>Contact Us</p>
    </div>
    <div style="background-color: lightblue; font-size: 15px; text-align: center; border: 4px solid blue;"> 
        <p>For any business inquires contact us</p>
    </div>
        <div><input type="text" value=" Full Name" id="textName" maxlength="100"/></div>
        <div><input type="text" value="Email" id="emailName"/></div>
        <div><input type="text" value="Subject" id="subjectName"/></div>
        <div><input type="text" value=Text id="importantName" style=”width:500px;height:50px;”></div>
        <input type="button" value="Click here" onclick="clickHere();"/>
        
    </div>
</body>
</hmtl>

Answer 1

使用placeholder='Please enter you Mail here'而不是直接设置值。
用于消息标签<textarea></textarea>
您应该看看一些不错的样式，例如： https://codepen.io/soufiane-khalfaoui-hassani/pen/LYpPWda

Answer 2

根据评论，一种方法是设置服务器，您可以将详细信息发送到该服务器，它可以 email 将它们打开。 我建议您查看 Node.js 因为它是 javascript 并且避免您必须学习另一种语言。

Firebase 是另一种解决方案，它可以避免设置服务器。 查找 Firebase 函数或搜索 Firebase 教程。

最后，您可以从您的前端代码调用第三方 Email API（SendGrid 就是一个例子）。 我不会在生产中推荐这种方法，因为您必须向所有用户公开您的 API 登录详细信息，但如果是为了好玩，这是一个选项。

如何发送联系我们 HTML 页面详情 email

问题描述

2 个解决方案

解决方案1
0 2020-12-23 23:05:16

解决方案2
0 2020-12-24 00:22:55

如何发送 联系我们 HTML 页面详情 email

问题描述

2 个解决方案

解决方案1 0 2020-12-23 23:05:16

解决方案2 0 2020-12-24 00:22:55

如何发送联系我们 HTML 页面详情 email

解决方案1
0 2020-12-23 23:05:16

解决方案2
0 2020-12-24 00:22:55