按下发送按钮后，如何将我的表格发送到我的电子邮件？

Question

我有从以下链接使用的这段代码： https : //codepen.io/TimQuincey/pen/Dtjox/

我不确定如何获得“发送！” 按钮将用户重定向到我的电子邮件地址，包括他们的消息，姓名和电子邮件。

我试图在电子邮件中添加“发送”按钮，但这只是重新启动了表单，对您的帮助将不胜感激！

 body { padding-top: 25px; background-color: #454545; margin-left: 10px; margin-right: 10px; } .container { max-width: 600px; margin: 0 auto; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: #FAFAFA; } .head { -webkit-border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; background-color: #2ABCA7; color: #FAFAFA; } h2 { text-align: center; padding: 18px 0 18px 0; font-size: 1.4em; } input { margin-bottom: 10px; } textarea { height: 100px; margin-bottom: 10px; } input:first-of-type { margin-top: 35px; } input, textarea { font-size: 1em; padding: 15px 10px 10px; font-family: 'Source Sans Pro', arial, sans-serif; border: 1px solid #cecece; background: #d7d7d7; color: #FAFAFA; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 80%; max-width: 600px; } ::-webkit-input-placeholder { color: #FAFAFA; } :-moz-placeholder { color: #FAFAFA; } ::-moz-placeholder { color: #FAFAFA; } :-ms-input-placeholder { color: #FAFAFA; } button { margin-top: 15px; margin-bottom: 25px; background-color: #2ABCA7; padding: 12px 45px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #2ABCA7; -webkit-transition: .5s; transition: .5s; display: inline-block; cursor: pointer; width: 30%; color: #fff; } button:hover, .button:hover { background: #19a08c; } label.error { font-family: 'Source Sans Pro', arial, sans-serif; font-size: 1em; display: block; padding-top: 10px; padding-bottom: 10px; background-color: #d89c9c; width: 80%; margin: auto; color: #FAFAFA; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /* media queries */ @media (max-width: 700px) { label.error { width: 90%; } input, textarea { width: 90%; } button { width: 90%; } body { padding-top: 10px; } } .message { font-family: 'Source Sans Pro', arial, sans-serif; font-size: 1.1em; display: none; padding-top: 10px; padding-bottom: 10px; background-color: #2ABCA7; width: 80%; margin: auto; color: #FAFAFA; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } 

 <br/> <br /> <br /> <script> // When the browser is ready... $(function() { // validate $("#contact").validate({ // Set the validation rules rules: { name: "required", email: { required: true, email: true }, message: "required", }, // Specify the validation error messages messages: { name: "Please enter your name", email: "Please enter a valid email address", message: "Please enter a message", }, // submit handler submitHandler: function(form) { //form.submit(); $(".message").show(); $(".message").fadeOut(4500); } }); }); </script> <!-- contact form created for treehouse competition. --> <form id="contact"> <div class="container"> <div class="head"> <h2>Say Hello</h2> </div> <input type="text" name="name" placeholder="Name" /><br /> <input type="email" name="email" placeholder="Email" /><br /> <textarea type="text" name="message" placeholder="Message"></textarea><br /> <div class="message">Message Sent</div> <a href="mailto:holdenrebecca.24@gmail.com" target="_blank"> <button id="submit" type="submit"> Send! </button> </a> </div> </form> 

Answer 1

还有很多其他方法可以做到这一点，但是我通常这样做：

您可以删除标签<a> ，将id属性添加到输入中，然后将AjaxCall添加到您的SubmitHandler中，如下所示：

 $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                url: '@Url.Action("actionName","controllerName")',
                data: JSON.stringify({
                    'name': $('#name').val(),
                    'email': $('#email').val(),
                    'message': $('#message').val(),
                })
            });

然后，在您的controllerName中创建操作actionName，如下所示：

        [HttpPost]
        public JsonResult actionName(string name, string email, string message)
        {
            try
            {
                yourContext.Database.ExecuteSqlCommand("exec dbo.emailProcedure @name @email @message", new SqlParameter("@name", name), new SqlParameter("@email", email), new SqlParameter("@message", message));
                return Json(true);
            catch (Exception)
            {
                return Json(false);
            }            
        }

另外，您应该创建您的emailProcedure并在需要时处理视图中返回的Json。

编辑

抱歉，我刚刚在注释中看到您正在使用PHP。 我在示例中使用了C＃。 但这可能会给您一些提示。

Answer 2

您可以改用以下形式：

    <form action="*/cgi-bin/formmail/yourservermailscript.pl*" method="post">
<input type="hidden" name="recipient" value="*youremail@domain.com*">
<input type="hidden" name="subject" value="*Subject of email*">
<input type="hidden" name="redirect" value="*yourthankyoupg.htm*">

请注意，所有带有星号的位置都应更改为您的特定信息。

有时，您可以在网站托管服务商的帮助文件中找到实际的脚本路径和名称。 或者，您可以向您的网站托管支持团队发送一封电子邮件，询问sendmail脚本的路径。

该路径将如下所示： /cgi-bin/mail/sendmail.pl

它取决于您的网站托管服务器的服务器配置。 尽管该表格必须在服务器上有效才能正常工作。 如果您只是在自己的计算机上本地预览，它将无法正常工作。 希望这对您和我都一样有帮助。

最好的祝福。