How To Get Mailto Working On Android Chrome?

So I've seen a couple questions on here about mailto not working on android, my problem is a little bit more specific than that. My website has a mailto link setup as a submit butt

Solution 1:

Using mailto in a from is generally not reliable, so it is mostly a compatibility issue with chrome mobile The Mythical Mailto.

The best and most elegant solution would to handle the form request server side instead of sending an email.

However, another less elegant solution would be adding a hidden anchor tag to the page, catching the event in JS, building the mailto href dynamically, appending the link to the anchor tag href attribute, and then triggering the anchor tag click using JavaScript. See JS fiddle below. Tested on chrome mobile.

$('.questionnaire').on('submit', function(e) {

  var messageBody = '';
  $.each($('.questionnaire').serializeArray(), function(i, field) {
    messageBody += field.name + ": " + field.value + '%0D%0A';
  });

  var hreflink = "mailto:carl@cuttingedgelighting.com?Subject=New%20Vendor&body=" + messageBody;
  $('.mail').attr("href", hreflink);
  e.preventDefault();
  $('.mail')[0].click()

});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formclass="questionnaire"target="_top"method="post"enctype="text/plain">


  First name:<br><inputtype="text"name="firstname"value="Foo"><br> Last name:<br><inputtype="text"name="lastname"value="bar"><br><br><inputtype="submit"value="Submit"></form><aclass="mail"href="mailto:someone@example.com?Subject=Hello%20again"target="_top"style="display: none;">Send Mail</a>