HTML mailto form: prefill subject and body

Question

I am editing an HTML template and need help in the contact form section. I want to make it so when user clicks on the send message button, then the default email client (in my case, Outlook) opens up and the name, subject and body of the email are pre-filled with the values from the form. How would I do that?

Contact form markup:

<div id="footer" class="container">
    <header>
        <h2>Questions or comments? <strong>Get in touch:</strong></h2>
    </header>
    <div class="row">
        <div class="6u">
            <section>
                <form>
                    <div class="row half">
                        <div class="6u">
                            <input name="name" placeholder="Name" type="text" class="text" />
                        </div>
                        <div class="6u">
                            <input name="Subject" placeholder="Subject" type="text" class="text" />
                        </div>
                    </div>
                    <div class="row half">
                        <div class="12u">
                            <textarea name="message" placeholder="Message"></textarea>
                        </div>
                    </div>
                    <div class="row half">
                        <div class="12u">
                            <a href="#" class="button button-icon icon icon-envelope">Send Message</a>
                        </div>
                    </div>
                </form>
            </section>
        </div>

        <div class="row">
            <ul class="icons 6u">
                <li class="icon icon-home">
                    <h6> 1235 street <br />
                    city, state 0000<br /> </h6>
                </li>
                <li class="icon icon-phone">
                    <h6>[phone] </h6>
                </li>
                <li class="icon icon-envelope">
                    <a href="mailto:[email protected]">[email protected]</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Pushy

Don't forget to encode the URL if you are dynamically adding content or your body/subject contains spaces. Otherwise you will get very odd results! – Hum

Answer 1

If I understand you correctly, you can use mailto links to predefine the body and email of a message upon opening in an email client.

<a href="mailto:[email protected]?subject=Email Subject&body=Contents of email">[email protected]</a>

An AJAX form may be more suitable as the user would not require an email client to open up the link.

Cerous

thanks for reply. I tried that but that let user put infomration in outlook rather then on the site. It's local site and everyone use outlook. What i want is when user fill out everything on the site and then they hit send and then outlook opens up with all the information already filled in and then they can just hit send. Form look like this: imgur.com/13JRi8Z – Pushy

If you want the information to be used in Outlook, the email input is not necessary. I suggest using a PHP/AJAX contact form for ease - it will allow the user to input their message, name and email and send it directly to the desired email with ease. Here is an example of an AJAX contact form. Downloading it will give you a base to edit to suit your needs. – Cerous

This is nice. Is there any chance to make this a HTML email? E.g. I tried mailto:[email protected]?body=content<br/>with<br/>html&html=true, but it does not work. (for me those links go to gmail, maybe it is specific per email client) – Recombination

Answer to my own question: https://mcmap.net/q/54185/-mailto-link-with-html-body – Recombination

Having the user's email client send the email makes the email traceable for both the sender (it will be saved to their outbox) and for the recipient.(the email will be from the sender, not from the web form mailing service, which may not have the privilege to send email as that sender). – Preconcert