Question

我正在尝试将提交按钮链接为电子邮件地址。但似乎无法让它发挥作用。

有关我可能做错的任何建议吗？

看起来它适用于第一次检查，但每当我将其上传到网站时它都不起作用= S

这是HTML：

<a href="mailto:email@email.co"><input type="submit" value="Get In Touch" name="submit" class="submit" id="submit"></a>

以下是CSS：

body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}

div {
background: #fff;
margin: 0 auto;
width: 200px;
padding: 100px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

input[type="submit"] { 
height: 50px; 
padding: 0 48px; margin: 10px auto 0 auto; 
background: #090a0b; 
border: 0; 
text-transform: uppercase; 
font-family: "Open Sans";
font-size: 24px; 
color: #fff; 
font-weight: 400;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
opacity: 1;
-webkit-appearance: none;
border: solid 1px #fff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
background: transparent;  
}

Answer 1

如果你真的想在<a>中使用提交按钮，那么你可以使用它而不是<a>标签。

<强> HTML

<input type="submit" class='button' value="Mail US" onclick="window.location.href='mailto:email@email.co'">

<强> CSS

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
 }

在这里添加：Fiddle

否则，您只能使用<a>标记，并使用CSS覆盖它。两者都是很好的方法

Answer 2

尝试这种方式：

HTML

<a class="button" href="mailto:email@email.co">Get In Touch</a>

CSS

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
 }

只需使用a标记并应用一些css

即可

Answer 3

您可以使用<a>标记并设置样式，或<button>（有时在早期的IE中为fubar），或者，如果您需要使用表单你可以这样做

<form action="mailto:user@user.com">
    <input type="submit" name="submit" value="Email">
</form>

Answer 4

如果您尝试将完整数据的表单提交到电子邮件地址，则不需要简单的mailto。所有mailto都会打开您计算机上的本机电子邮件应用程序，并使用您在href中输入的电子邮件地址填写“收件人：”字段。

要提交包含表单数据的电子邮件，您需要一个电子邮件处理程序。在PHP中，您只需将$_POST数据附加到php mail()函数即可。这是一个good tutorial。

另一种选择是使用像emailmeform这样的托管解决方案。甚至是像addthis或sharethis这样的javascript邮件解决方案。他们有可用的API，允许您将数据输入到正在发送的电子邮件中。

希望这有帮助！

将CSS按钮链接到电子邮件 - 如何完成？

4 个答案: