Create mailto from form with custom fields

Question

I have a HTML form with 3 fields (Name, E-Mail and Message) and I want to create a custom mailto with this 3 fields but I don't want create a fixed content like this:

<a href="mailto:[email protected]?subject=Subject&body=HelloWorld">Send a mail</a>

Is this possible? If it isn't, do I have another way to do a simple formulary? My page is a landing page and only have HTML, CSS and some JavaScript (Bootstrap too).

--- Edit ---

I found this, for example: http://www.techrepublic.com/article/set-up-an-html-mailto-form-without-a-back-end-script/

But it write too much information in the body, the result is literal:

Name=Your name
[email protected]
Comment=Testing textarea 
Submit=Submit

Epigraph

So you need first a JavaScript file, in order to listen to the submit() event and perform your tasks. – Cotton

And how can I do it? I'm new with JavaScript. – Epigraph

Answer 1

I can answer myself, after a deep search I could fix my problem.

JavaScript:

function sendMail() {
    var name = $('#contact #name').val();
    var email = $('#contact #email').val();
    var message = $('#contact textarea').val();
    window.location.href = 'mailto:[email protected]?subject=The subject - ' + name + ' (' + email + ')' + '&body=' + message;
};

HTML:

<form> 
    <input type="text" id="name" name="name" >
    <input type="email" id="email" name="email">
    <textarea rows="5"></textarea>
</form>
<button type="submit" class="btn btn-primary" onclick="sendMail()">Button Text</button>

We can't use a submit input, because window.location.href doesn't work with it; we need to use a button who will run a function.

And it's all, very simple :)

Epigraph