如何将表单参数发送到 mailto 链接？

Question

我尝试了How do I add HTML form data to a mailto link 的解决方案，但该解决方案在我的移动设备上的 HTML5 sn-p 中不起作用。

<!-- contact -->
<section id="section-contact" class="section appear clearfix">
    <div class="container">

        <div class="row mar-bot40">
            <div class="col-md-offset-3 col-md-6">
                <div class="section-header">
                    <h2 class="section-heading animated" data-animation="bounceInUp">Contact us</h2>
                    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit, sed quia non numquam.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div id="sendmessage">Your message has been sent. Thank you!</div>
                <div id="errormessage"></div>
                <form role="form" class="contactForm">
                    <div class="form-group">
                        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" name="telephone" id="telephone" placeholder="111-111-1111" data-rule="email" data-msg="Please enter a valid telephone number" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                        <div class="validation"></div>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                        <div class="validation"></div>
                    </div>

                   <div class="text-center">
                            <button type="submit" class="line-btn green" onclick="submitForm();return false;">Submit</button>
                   </div>
                </form>
                <script>
function submitForm(){
    var name = document.getElementsByName("name")[0].value;
    var email = document.getElementsByName("email")[0].value;
    var phone = document.getElementsByName("telephone")[0].value;
    var subject = document.getElementsByName("subject")[0].value;
    var message = document.getElementsByName("message")[0].value;
    window.open("mailto:denver.prophit@gmail.com?subject=" + encodeURIComponent(subject) +
  "&body=Name:%20" + encodeURIComponent(name) +
  "%0a%0aTelephone:%20" + encodeURIComponent(phone) +
  "%0a%0a" + encodeURIComponent(message));
}
</script>
            </div>
        </div>
    </div>
</section>

我所期望的是打开 gmail 应用程序。我得到的是滚动回到页面顶部。不确定在阅读了上一个问题中的问题后我错过了什么？

Answer 1

正如我们两个在 cmets 中强调的那样，您的 javascript 无效，在这一行...

window.open("mailto:example@gmail.com?subject=subject&body=Name:%20:name\n\n+Telephone:%20" + phone\ n\ n + message);

尤其是" + phone\ n\ n + message); 部分

固定版本是……

window.open("mailto:example@gmail.com?subject=subject&body=Name:%20:name\n\n+Telephone:%20" + phone + "\n\n" + message);

通过查看开发人员工具中的控制台（在浏览器上按 F12）很容易发现这一点，它会向您显示 javascript 中存在错误。

---

此外，\n 不会在您的电子邮件客户端中生成换行符，因此您应该改用%0a（编码为\n）...

window.open("mailto:example@gmail.com?subject=subject&body=Name:%20:name%0a%0a+Telephone:%20" + phone + "%0a%0a" + message);

最初我说使用%0d，它是编码的\r...所以如果你想要\r\n，请使用%0d%0a

---

最后，我相信该行中还有一些其他小问题，这将导致错误的值被传递到电子邮件客户端。

特别是 name 和 +... 的使用，以及您没有对值进行 URI 编码的事实，这意味着如果其中任何一个具有 ? 或 & 之类的东西，它会弄乱链接

这就是我相信你需要的……

window.open("mailto:example@gmail.com?subject=" + encodeURIComponent(subject) +
  "&body=Name:%20" + encodeURIComponent(name) +
  "%0a%0aTelephone:%20" + encodeURIComponent(phone) +
  "%0a%0a" + encodeURIComponent(message));

---

我完全错过了它，但我认为它回到页面顶部的原因是按钮点击没有被取消。

将调用函数的onclick更新为return false...

<button type="submit" class="line-btn green" onclick="submitForm();return false;">Submitx</button>