How to: Contact your representative email form

So after much frustration with plus(+) signs I finally have a working, unfortunately Javascript dependent, setup for the popular “contact your representative” forms.

These forms are used by online campaigns to put public pressure on officials. They do so by making it as easy as possible for people to send prewritten emails (with their own modifications if at all possible) to them.

Now you can’t just have people give out their email and send it in their stead as it would, very quickly, be caught in the target mail servers spam filter. You can’t spoof their emails either (thank you SPF records!) without getting thrown in the spam. Besides, such an action would lack legitimacy as there’s no way of knowing how much fakery you are doing.

So the solution is to get people to either copy/paste the email into their own client … or even better have it open by itself.

Mailto: to the rescue!

HTML supports the mailto: URI for the <a> element.

<a href="mailto:example@example.com?subject=Test%20Subject&body=Test%20body">Send email</a>

As you can see both the subject and the body parameters need to be url encoded!

Make it editable!

The basic problem with the previous solution, while simple and highly functional (no javascript!) is that the message can’t be edited.

If the internet is to believed there exsists another option. Mailto Forms!

 <form action="mailto:example@email.com">
  <label for="subject">Subject</label>
  <input id="subject" name="subject" type="text" value="Suggested subject" />

  <label for="body">Email body</label>
  <textarea id="body" name="body" rows="25" >
    Suggested body
  </textarea>

  <button type="submit" value="submit">Submit</button>
</form>

But this solution is only partially functional!

In some email clients the spaces in the subject and title will be replaced by plus(+) signs and no amount of playing around with enctype will help.
Even url encoding the string before submitting it will decode it than replace spaces with plus signs. I know … weird.

Half way, best way!

So my solution is to take the form, use javascript (#sadFace) and compile it into an <a> element just as it is clicked.

<form>
  <label for="subject">Subject</label>
  <input id="subject" name="subject" type="text" value="Suggested subject" />

  <label for="body">Email body</label>
  <textarea id="body" name="body" rows="25" >
    Suggested body
  </textarea>

  <a id="email-submit" class="button" href="javascript:{}" onclick="sendEmail();">Send email</a>
</form>

Now add just a little javascript:

function sendEmail() {
  var email = 'example@example.com';
  var subject = encodeURIComponent(jQuery('input#subject').val());
  var body = encodeURIComponent(jQuery('#body').val());
  var line = 	"mailto:"+email+"?subject="+subject+"&body="+body;
  jQuery('#email-submit').attr('href', line);
}

I used jQuery because I was lazy – it could easily have been done without it.

This will allow users to modify the subject and body and send it with their own clients.