-1

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?

Denver Prophit Jr.
  • 154
  • 2
  • 19

1 Answers1

2

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>
freefaller
  • 19,368
  • 7
  • 57
  • 87
  • Unable to complete test. The `window.open` is not opening up gmail app. Just a new page with that URL encoded. @freefaller – Denver Prophit Jr. Oct 29 '19 at 13:59
  • 1
    If you're not getting any more console errors, then it's likely that email is not configured correctly on your computer – freefaller Oct 29 '19 at 14:03
  • Even with all my errors, it was opening gmail app before on mobile. Now, it just goes to the top of the page. – Denver Prophit Jr. Oct 29 '19 at 14:07
  • 1
    Going to the top of the page indicates javascript syntax error, so once again the console in your developer tools is your friend. Not sure how much more I can do – freefaller Oct 29 '19 at 14:09
  • 1
    If the code in your question is what you're using (in particular the part that reads `"+phone%0a+message);`) then you simply haven't read/understood what two of us have been telling you right from the start. That is invalid syntax! It should be `"+phone+"%0a"+message);` – freefaller Oct 29 '19 at 14:12
  • no more console error messages on desktop test. I'm using iPhone 7+ chrome. I'm using your final answer in the 3rd snippet and tested development site. It's your code. – Denver Prophit Jr. Oct 29 '19 at 14:14
  • 1
    Ahhh, of course... completely missed it. Update the `onclick` that calls the function so that it has `return false` at the end... `` – freefaller Oct 29 '19 at 14:15
  • Updated my question with your suggestions. Tested on both desktop/mobile. Still reloads the page instead of opening the gmail app on iPhone 7+ – Denver Prophit Jr. Oct 29 '19 at 14:22
  • 1
    OK, last suggestion, because I'm running out of ideas and time. Make sure the "Persist" option is turned on in your console. That means that any errors are left in the console, which would otherwise be wiped out when you navigate to a new page (which it sounds like you are). I'm guessing there are still issues, but you've just not seem them. I would also recommend that you stop putting what I assume is your real email address in public forums, unless you like spam – freefaller Oct 29 '19 at 14:28
  • instead of open.window I tried https://stackoverflow.com/questions/21028939/mailto-using-javascript with `document.location.href` and removed parenthesis. Opens gmail. But, no new lines. – Denver Prophit Jr. Oct 29 '19 at 14:58