18

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:hello@hello.com">hello@hello.com</a>
                </li>
            </ul>
        </div>
    </div>
</div>
JSTL
  • 808
  • 1
  • 14
  • 25
user2642450
  • 191
  • 1
  • 1
  • 3
  • 1
    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! – Sami M Aug 09 '18 at 19:32

1 Answers1

44

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:hello@hello.com?subject=Email Subject&body=Contents of email">hello@hello.com</a>

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

JoshMc
  • 669
  • 5
  • 15
  • 1
    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: http://imgur.com/13JRi8Z – user2642450 Aug 01 '13 at 15:34
  • 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](http://www.freecontactform.com/ajax_form.php) is an example of an AJAX contact form. Downloading it will give you a base to edit to suit your needs. – JoshMc Aug 01 '13 at 15:43
  • This is nice. Is there any chance to make this a HTML email? E.g. I tried `mailto:name@example.com?body=content
    with
    html&html=true`, but it does not work. (for me those links go to gmail, maybe it is specific per email client)     – donquixote Feb 02 '18 at 19:08
  • Answer to my own question: https://stackoverflow.com/questions/5620324/mailto-with-html-body – donquixote Feb 02 '18 at 19:12
  • 1
    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). – reinierpost Nov 08 '19 at 11:13