Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create mailto from form with custom fields

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
like image 434
Aitor Avatar asked Sep 16 '15 09:09

Aitor


People also ask

How do I use mailto in forms?

Mailto link is a default way to sending a mail when the consumer wants to communicate or wants to give feedback, then clicking the mailto link will open a default sending mail window. So we can use mailto which directs us to the mail once the form is submitted.

How do you link an HTML form to an email?

There is no feature in HTML to send the form submission directly to an email address. What about “mailto” ? Using mailto: You can set the action field of the form as 'mailto'. In this case, the web browser invokes the email client to send the form submission to the email address specified.

Which HTML input type allows for mailto address entry?

In HTML you can specify a mailto: address in the <form> element's [action] attribute.


1 Answers

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 :)

like image 112
Aitor Avatar answered Sep 19 '22 15:09

Aitor