Use Stylish to Make Immigration Form Printable

This is an update to a post called Explode All Immigration Form Boxes.  The post was getting cluttered with bits and pieces and, since this is an update, I figured I’d start fresh.  Feel free to read the original post for the impetus behind this.

On the web, in an attempt to make online forms more friendly, we use a style that will display or hide blocks of content.  If you have visited the Canadian Citizenship and Immigration site and used their forms, you’ll know what I mean.  Here’s what the form looks like, and as you progress, each section pops open and the previous one closes.  Sections Personal Description, Marital Status, etc., contain content that is currently hidden.

The default CIC form

This is great if you can do everything online and leave it there.  For legal professionals who help immigrants, it can be important to have a copy of this information.  If I was doing it myself, I would want a copy too.  But if you attempt to print the page, you will only see the current content.  Anything in a hidden block is, well, hidden.

We can use a web browser add-on called Stylish to get around this problem.  It’s free and allows you to change the way a web page looks.  This will work on Mozilla’s Firefox and Google Chrome.  Unlike previous versions of Stylish, it now works exactly the same on both browsers on the desktop.  Chrome doesn’t appear to support Stylish on mobile versions of Chrome, but this will also work on Firefox on Android (tested on a phone and tablet).

Here’s what you need to do to display the entire immigration form:

  1. Click the Write a new style button (or, alternatively, choose Create a New Style if you see that option) and give yours a name (I called mine CIC but you can call it anything)
  2. Cut and paste this line of text into your rule:
    div.ui-accordion-content { display: block !important; }
  3. This will apply to EVERY web site.  You can leave it this way or you can specify “cic.gc.ca”. Make sure you click the Save button up next to where you typed your style name (#1)

When you refresh your immigation form, it should now appear exploded.  I have my Stylish button open, and you can click the deactivate button to return the form to normal.

Exploded immigration form.

Stylish can be used for lots of web sites – I use it to get rid of lots of other site guff – but it does not make any change to the underlying web site.  You’re not hacking anything.  If you look at the form on a computer without Stylish, it will only show one block of information at a time.

Here’s a short video (2:45) that will walk you through how to create the CIC Stylish script.