How can I send form parameters to a mailto link? - html

Question

I tried the solution at How do I add HTML form data to a mailto link
that did not work in my HTML5 snippet on mobile.
<!-- 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>
What I expected is the gmail app to open. What I got was a scroll back to the top of the page. Not sure what I missed after reading the questions from the previous question posted?

Answer 1

As highlighted by two of us in comments, your javascript is invalid, on this line...
window.open("mailto:example#gmail.com?subject=subject&body=Name:%20:name\n\n+Telephone:%20" + phone\ n\ n + message);
In particular the " + phone\ n\ n + message); part
The fixed version would be...
window.open("mailto:example#gmail.com?subject=subject&body=Name:%20:name\n\n+Telephone:%20" + phone + "\n\n" + message);
This would have been easily spotted by looking at the Console in your Developer Tools (press F12 on your browser) where it would have shown you that there is an error in the javascript.
Additionally the \n will not produce newlines in your email client, so you should use %0a (which is encoded \n) instead...
window.open("mailto:example#gmail.com?subject=subject&body=Name:%20:name%0a%0a+Telephone:%20" + phone + "%0a%0a" + message);
Originally I said use %0d which is the encoded \r... so if you wanted \r\n use %0d%0a
Finally, I believe there are a couple of other minor issues in that line, which will result in the incorrect values being passed through to the email client.
In particular the use of name and the +... and the fact that you're not URI encoding the values, meaning that if any of them have things like ? or & for example, it will mess up the link
This is what I believe you need...
window.open("mailto:example#gmail.com?subject=" + encodeURIComponent(subject) +
"&body=Name:%20" + encodeURIComponent(name) +
"%0a%0aTelephone:%20" + encodeURIComponent(phone) +
"%0a%0a" + encodeURIComponent(message));
I completely missed it, but I think the reason it's going back to the top of the page is that the button click is not being cancelled.
Update the onclick that calls the function to return false...
<button type="submit" class="line-btn green" onclick="submitForm();return false;">Submitx</button>