It has been discovered that submitting the form is not required. You can create an HTML form with the desired form elements. Take a look at how my form is set up:
<form>
to:<input name="mailto" type="text">
re:<input name="subject" type="text">
body:<textarea name="body"></textarea>
<input type="button" onclick="processForm()">
</form>
Keep in mind, the last input acts as a button to prevent form submission. When clicked, the onclick event triggers the execution of processForm(). This function retrieves the form values and organizes them into a string suitable for the mailto protocol, like so:
<script>
function processForm(){
var inputs = document.getElementsByTagName("input");
var message = document.getElementsByTagName("textarea");
var str = inputs[0].name + ":" + inputs[0].value; // mailto:[email address]
str += "?" + inputs[1].name + "=" + inputs[1].value; // ?subject=[subject]
str += "&" + message[0].name + "=" + message[0].value;// &body=[body]
str += str.replace(/\+/ig,"%20"); // url encode space char '+'
location.href=str; // invoke mailto
}
</script>
The final adjustment ensures that the string is urlencoded by replacing '+' with '%20'. If further encoding is necessary, encodeURI() function can be used. The script concludes by activating the mailto protocol, invoking the default email client on the system. I tested this by sending myself an email successfully.
A simpler method for serializing form data is available through "JavaScript Form Serialize". However, slight modifications may still be required. See below:
<script type="text/javascript" src="js/serialize-0.2.js"></script>
<script type="text/javascript">
document.getElementById("Serialize").onclick = function () {
var str = serialize(document.forms[0]);
var arr = str.split("&");
arr.reverse();
str = arr.join("&");
str = str.replace("mailto=","mailto:");
str = str.replace("&subject", "?subject");
location.href = str;
};
</script>
In this alternative, the button is replaced with a link. After passing the form data to serialize(), adjustments are made to ensure compatibility with the mailto protocol.
For more information on the mailto protocol, a detailed technical explanation can be found here. For a basic understanding of mailto syntax, refer to this link.