Blue Utopia Blog

Adding mailto links with subject and body text

Wed, Jan 21, 2015 - 11:56 AM

in Website

We recently performed a redesign of a client website. One of the things they wanted to do but didn’t know how was to add a link on their website that would allow their visitor to send a pre-populated email to their legislators. Obviously there are a number of ways to accomplish the generic task of advocacy and signing petitions/letters is far more popular right now. But the client wanted this direct form of outreach and they had some good reasons. So we did it for them and though it would be good to post a how-to for this particular process.

To start, if you wanted to insert an email link in your webpage, a standard email link looks like this:

If you want to email us, just < a class="medlink" href=”mailto:email@domain.com“ > click here < /a >.

The difference between a page link and an email link is the addition of the mailto:

From this point forward, we will only use the link text, not the html formatting

So the link portion of an email lit looks like this: mailto:email@domain.com

To add the subject line, just add "?subject=subject line here" to the end of your mailto link. Like this:

mailto:email@domain.com?subject=what we need in our schools

Now, to go a step further, you can also add default body text. By doing this, you’re actually pre-populating your visitors’ emails with default text which they can change if they like. To add the email body, just add &body=here’s the body text right after the subject line end quote. Like this:

mailto:email@domain.com?subject=what we need in our schools&body=Dear Representative Doe. I really wanted to write you today to tell you.

One thing you’ll notice is that you’re email body is one long string. So the last trick is to apply some formatting. We’re only going to apply line breaks. The reason is that these are critical and that very little other formatting will work very well across the various readers.

To insert a new line break, add this: %0D

You can add 2 at a time to effectively make a paragraph break like this: %0D%0D

  • Share It!