User-Hostile Unsubscribe Forms

I'm a bit of a stickler for good user experience design. One of my biggest grievances has to do with how companies treat their users who want to unsubscribe to their email newsletters.

Some do it right (they usually go with MailChimp or another pain-free one-click unsubscribe service). Others make you go through checkbox hell.

What is checkbox hell? Simple:

A bunch of input fields that are pre-checked, all of which must be un-checked to unsubscribe you from their mass flurry of emails, and lacking an 'unsubscribe all' button in the hopes that some users may simply give up and be subjected to this further.

This is bullshit, and I hate clicking these boxes. So let's use some plain old Javascript to fix that. First, we'll go and inspect our input field elements by right clicking on it in Chrome and selecting Inspect Element:

Alright, we look one line above the highlighted one to find our input field:

<input id="monday" class="tgl tgl-flat" type="checkbox" checked>

Here's what we want to do:

  • Using plain old Javascript, grab all of our input elements and store it in an array-like object within a variable.
  • Iterate over that variable and set each element's checked property to false.

That's basically it, so let's get to it. We'll switch over the the console to get this done.

To grab all of our input names, we're going to use document.getElementsByTagName. You can check out the documentation on MDN.

Now that we have all the elements stored within this HTMLCollection, we can begin to iterate through it.

Note: This HTMLCollection is an array-like object. This means that while it looks like an array and has opening and closing brackets that list comma-separated values, it is not an actual array. Running Array.isArray on our HTMLCollection produces false:

This also means that we don't have access to any of the native Array prototype methods, but that's okay -- we only need to do this once, so we'll iterate with a for-loop:

for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].checked = false;

And there you go! Just like that.

Show Comments