Using the mailto: on an anchor tag is a great way to help visitors email you more easily, but did you know that you can actually pre-populate their message with a subject, and even the message itself? Its actually really simple.

<a href="mailto:webdevbydoing@gmail.com?subject=I Love your site&body=Tell me more about web development!">Email Me</a>

Email Me

As you can see in the code above, all you do, is after the email address you write ?subject= and for the message, you write &body=. Thats simple enough, and that information can be found easy enough, but lets do one better than that. Lets say your company has multiple departments. So they might have a Sales, Service, and Support, and each department should get its own emails going to a separate address. We can manage by adding a little extra. Take a look at this form below (and feel free to do an “inspect element” on the the Email link as you change the drop-down menu)

If you know javascript pretty well, then you might know right away what I’m doing here, but if not, here’s the code

<select id="emailselect" onChange="email()">
    <option value="sales">Sales</option>
    <option value="service">Service</option>
    <option value="support">Support</option>
</select>
<a id="mailbutton" href="mailto:webdevbydoing@gmail.com?subject=I Love your site&body=Tell me more about web development!">Email Me</a>

<script>
function email(){
	var department = document.getElementById('emailselect').value;
	var button = document.getElementById('mailbutton')
	switch (department)
	{
	case "sales":
	  button.setAttribute("href","mailto:sales@webdevbydoing.com?subject=I want to buy something&body=Send me 1,000 websites ASAP")
	  button.innerHTML = "Email Sales";
	  break;
	case "service":
	  button.setAttribute("href","mailto:service@webdevbydoing.com?subject=I need service&body=My Website is terrible!")
	  button.innerHTML = "Email Service";
	  break;
	case "support":
	  button.setAttribute("href","mailto:support@webdevbydoing.com?subject=What is support anyway&body=Whatever it is I want some!")
	  button.innerHTML = "Email Support";
	  break;
	}
}
</script>

This isn’t a tutorial on switch case code so I’m not going to go too deeply into this, but basically what’s going on here, is that when the drop-down menu is changed, it calls a function. That function then grabs the value of the drop-down menu and matches it with one of the cases, then changes the attributes and text for the email link.

Keep in mind that there are 100 different ways to do this, the method I used here works well for example purposes, but as always keep your mind open to various possibilities.

Share below any changes / improvements / examples that you have to this…