HTML mailto form: prefill subject and body

user2642450 picture user2642450 · Aug 1, 2013 · Viewed 25.7k times · Source

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>(000) 000-0000 </h6>
                </li>
                <li class="icon icon-envelope">
                    <a href="mailto:[email protected]">[email protected]</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer

JoshMc picture JoshMc · Aug 1, 2013

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.