Question

我有这个代码我在这个链接中使用：https://codepen.io/TimQuincey/pen/Dtjox/

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

我尝试将电子邮件添加到“发送”按钮，但这只是重新启动表单，我们将非常感谢任何帮助！

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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*">

请注意，所有带星号的地点都应更改为您的具体信息。

实际的脚本路径＆amp;有时可以在您的网站主机的帮助文件中找到名称。或者，您可以向您的网站主机支持团队发送电子邮件，询问sendmail脚本的路径。

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

根据您网站主机的服务器配置而有所不同。虽然表单必须在您的服务器上存在才能使其正常工作。如果您只是在自己的计算机上本地预览它将无法工作。希望这对你有所帮助，对我来说也是如此。

最诚挚的问候。

当按下发送按钮时，如何让我的表单发送到我的电子邮件？

2 个答案:

修改