JBAS-1324 Patron reg downloadable forms ; tweaks
authorBill Erickson <berickxx@gmail.com>
Wed, 27 Apr 2016 16:12:26 +0000 (12:12 -0400)
committerBill Erickson <berickxx@gmail.com>
Thu, 21 Mar 2019 19:46:23 +0000 (15:46 -0400)
* Create panel along the right for links to printable forms
* Change page title
* Add note about mailed cards delivery time
* Link to BCMS versions of card images

Signed-off-by: Bill Erickson <berickxx@gmail.com>
KCLS/openils/var/templates_kcls/opac/register.tt2

index b344a44..ea70880 100644 (file)
@@ -1,7 +1,7 @@
 [%- PROCESS "opac/parts/header.tt2";
     PROCESS "opac/parts/org_selector.tt2";
     PROCESS "opac/parts/state_selector.tt2";
-    ctx.page_title = l("Request Library Card");
+    ctx.page_title = l("Get a Library Card");
 
 # for privacy, reload the page after (default) 5 minutes
 refresh_time = ctx.register.settings.refresh_timeout || 300; 
@@ -12,9 +12,9 @@ ctx.refresh = refresh_time _ '; ' _ 'https://www.kcls.org';
 ctx_org = ctx.physical_loc || ctx.search_ou || ctx.aou_tree.id;
 
 # TODO put these on the EG server?
-card_url = 'https://www.kcls.org/images/library/cards/Card_';
-wallet_cards = ['12man', 'blank', 'books', 'mirror'];
-keychain_cards = ['keychain'];
+card_url = 'https://kcls.bibliocms.com/wp-content/uploads/sites/20/2016/02/';
+wallet_cards = ['Card_Pride', 'Card_12', 'Card_blank', 'Card_mirror'];
+keychain_cards = ['Keychain_red'];
 
 MACRO input_field(fclass, fname, label, type, css_class, value) BLOCK;
   field_path = fclass _ "." _ fname; 
@@ -82,7 +82,7 @@ END; # input_field()
     font-family: 'Open Sans', sans-serif;                                      
     letter-spacing: .5pt;                                                      
     font-size: 15px;                                                           
-    width: 700px; /* to match bibliocms */
+    width: 900px; /* to match bibliocms */
 }
 #main-content-register label {
     font-weight: bold;
@@ -95,6 +95,21 @@ END; # input_field()
     margin-top: 12px;
     list-style-type: none;
 }
+#main-content-left {
+  width: 75%;
+  float: left;
+}
+#main-content-right {
+  width: 24%;
+  float: right;
+  font-size: 85%;
+}
+/*
+#main-content-right h3 {
+  font-size : 100%; 
+}
+*/
+
 .grid { width: 95%; }
 .grid-cell {
   float: left;
@@ -114,8 +129,8 @@ END; # input_field()
     width: 90%;
 }
 #main-content-register .card-img {
-  width: 120px;
-  height:76px;
+  width: 195px;
+  height:123px;
 }
 .mailing-address-hidden {
   display:none;
@@ -126,6 +141,12 @@ END; # input_field()
 }
 .success-minus-1 { font-size: 95%; }
 .success-minus-2 { font-size: 90%; }
+
+#download-forms-list a, download-forms-list a:visited {
+  color: #41bee8;
+  text-decoration: none;
+  font-weight: 600;
+}
 </style>
 
     </head>
@@ -136,365 +157,458 @@ END; # input_field()
 <div id="content-wrapper">
   <div id="main-content-register">
 
-  <h1>[% l('Request a Library Card')%]</h1>
-
-  [% IF ctx.register.success %]
-    <h2>[% l('Registration successful!') %]<h3>
-    <p class='success-minus-1'>
-      To fully activate your card you will need to visit a KCLS library
-      with proof of address and photo ID that shows your date of
-      birth. 
+  <div id='main-content-left'>
+    <h1>[% l('Request a Library Card')%]</h1>
+
+    [% IF ctx.register.success %]
+      <h2>[% l('Registration successful!') %]<h3>
+      <p class='success-minus-1'>
+        To fully activate your card you will need to visit a KCLS library
+        with proof of address and photo ID that shows your date of
+        birth. 
+        <br/>
+        Parents/guardians can assist with proof of address for full
+        activation for applicants under 18. Find a list of the documents
+        you may use to provide proof of address on our
+        <a href='https://w3.kcls.org/PDF/KCLS%20600%20ENG.pdf'>
+          downloadable application.
+        </a>
+      </p>
       <br/>
-      Parents/guardians can assist with proof of address for full
-      activation for applicants under 18. Find a list of the documents
-      you may use to provide proof of address on our
-      <a href='https://w3.kcls.org/PDF/KCLS%20600%20ENG.pdf'>
-        downloadable application.
-      </a>
-    </p>
-    <br/>
-    <a href='/eg/opac/register'><button 
-      id='submit-another'>Submit Another Application</button></a>
-    <br/>
-    <br/>
-    <div class='success-minus-2'>
-      You will be automatically redirected to 
-      <a href="https://www.kcls.org">www.kcls.org</a>...
-    </div>
-    <hr/>
-    <input type='hidden' id='register-success' value='yep'/>
-  [% ELSE %]
-
-  <form method='POST' onsubmit="return onsub()">
-    <ul>
-      <li>
-        <label>Choose a card size....</label>
-        <span class="patron-reg-required">*</span>
-        <div>
-          <ul>
-            <li>
-              <input type="radio" name='card-type' id="card-type-wallet" 
-                onclick="show_card_types('wallet')">
-              <label for="">Wallet</label>
-            </li>
-            <li>
-              <input type="radio" id="card-type-keychain" name='card-type'
-                onclick="show_card_types('keychain')">
-              <label for="card-type-keychain">Keychain</label>
-            </li>
-          </ul>
-        </div>
-      </li>
-      <li id='wallet-cards' style='display:none'>
-        <label>Wallet Options</label>
-        <div class="grid">
-          [% FOR ctype IN wallet_cards %]
-          <div class="grid-cell">
-            <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
-            <div class="card-style-option">
-              <input [% IF loop.first %]id='first-wallet-card'[% END %]
-                type="radio" name="stgsc.10" value="[% ctype %]"/>
-            </div>
-          </div>
-          [% END %]
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-      <li id='keychain-cards' style='display:none'>
-        <label>Keychain Options</label>
-        <div class="grid">
-          [% FOR ctype IN keychain_cards %]
-          <div class="grid-cell">
-            <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
-            <div class="card-style-option">
-              <input [% IF loop.first %]id='first-keychain-card'[% END %]
-                type="radio" name="stgsc.10" value="[% ctype %]"/>
-            </div>
-          </div>
-          [% END %]
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-
-      <li>
-        <label>Choose delivery method of your new library card:</label>
-        <div>
-          <ul>
-            <li>
-              <input type='radio' name='stgu.delivery_method' 
-                value='Mail' checked='checked'/>
-              <label>Mail to me.</label>
-            </li>
-            <li>
-              <input type='radio' name='stgu.delivery_method' 
-                value='Pick up'/>
-              <label>I will pick up at my home library</label>
-            </li>
-          </ul>
-        </div>
-      </li>
-
-      <li><h2>Your Information</h2></li>
+      <a href='/eg/opac/register'><button 
+        id='submit-another'>Submit Another Application</button></a>
+      <br/>
+      <br/>
+      <div class='success-minus-2'>
+        You will be automatically redirected to 
+        <a href="https://www.kcls.org">www.kcls.org</a>...
+      </div>
       <hr/>
+      <input type='hidden' id='register-success' value='yep'/>
+    [% ELSE %]
 
-      <li>
-        <div class="grid">
-          <div class="grid-cell">
-            <div>
-              <label for="sgtu.first_given_name">First Name</label>
-              <span class="patron-reg-required">*</span>
-            </div>
-            <div>[% input_field('stgu', 'first_given_name', 'First Name') %]</div>
+    <form method='POST' onsubmit="return onsub()">
+      <ul>
+        <li>
+          <label>Choose a card size....</label>
+          <span class="patron-reg-required">*</span>
+          <div>
+            <ul>
+              <li>
+                <input type="radio" name='card-type' id="card-type-wallet" 
+                  onclick="show_card_types('wallet')">
+                <label for="">Wallet</label>
+              </li>
+              <li>
+                <input type="radio" id="card-type-keychain" name='card-type'
+                  onclick="show_card_types('keychain')">
+                <label for="card-type-keychain">Keychain</label>
+              </li>
+            </ul>
           </div>
-          <div class="grid-cell">
-            <div><label for="sgtu.second_given_name">Middle Name</label></div>
-            <div>[% input_field('stgu', 'second_given_name', 'Middle Name') %]</div>
+        </li>
+        <li id='wallet-cards' style='display:none'>
+          <label>Wallet Options</label>
+          <div class="grid">
+            [% FOR ctype IN wallet_cards %]
+            <div class="grid-cell">
+              <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
+              <div class="card-style-option">
+                <input [% IF loop.first %]id='first-wallet-card'[% END %]
+                  type="radio" name="stgsc.10" value="[% ctype %]"/>
+              </div>
+            </div>
+            [% END %]
           </div>
-          <div class="grid-cell">
-            <div>
-              <label for="sgtu.family_name">Last Name</label>
-              <span class="patron-reg-required">*</span>
+          <div class="grid-clear"></div>
+        </li>
+        <li id='keychain-cards' style='display:none'>
+          <label>Keychain Options</label>
+          <div class="grid">
+            [% FOR ctype IN keychain_cards %]
+            <div class="grid-cell">
+              <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
+              <div class="card-style-option">
+                <input [% IF loop.first %]id='first-keychain-card'[% END %]
+                  type="radio" name="stgsc.10" value="[% ctype %]"/>
+              </div>
             </div>
-            <div>[% input_field('stgu', 'family_name', 'Last Name') %]</div>
+            [% END %]
           </div>
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-
-      <li>
-        <label for="stgu.day_phone">Phone Number</label>
-        <div class="grid">
-          <div class="grid-cell">
-            <div>[% input_field('stgu', 'day_phone', 'Phone Number') %]</div>
+          <div class="grid-clear"></div>
+        </li>
+
+        <li>
+          <label>Choose delivery method of your new library card:</label>
+          <div>
+            <ul>
+              <li>
+                <input type='radio' name='stgu.delivery_method' 
+                  value='Mail' checked='checked'/>
+                <label>Mail to me 
+                  <span style='font-size:85%'>(Delivered within 1-2 weeks)</span>
+                </label>
+              </li>
+              <li>
+                <input type='radio' name='stgu.delivery_method' 
+                  value='Pick up'/>
+                <label>I will pick up at my home library</label>
+              </li>
+            </ul>
           </div>
-          <div class="grid-cell">(xxx-xxx-xxxx)</div>
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-
-      <li>
-        <label for="stgu.dob">
-          Birth Date<span class="patron-reg-required">*</span>
-        </label>
-        <input type="hidden" name="stgu.dob" id="stgu.dob"/>
-        <div class="grid">
-          <div class="grid-cell">
-            <div><input onchange="compile_dob()" type="text" 
-              maxlength="2" size="2" id="dob.month"></div>
-            <div><label for="dob.month">MM</label></div>
+        </li>
+
+        <li><h2>Your Information</h2></li>
+        <hr/>
+
+        <li><h3>Name</h3></li>
+        <li>
+          <div class="grid">
+            <div class="grid-cell">
+              <div>
+                <label for="sgtu.first_given_name">First</label>
+                <span class="patron-reg-required">*</span>
+              </div>
+              <div>[% input_field('stgu', 'first_given_name', 'First') %]</div>
+            </div>
+            <div class="grid-cell">
+              <div><label for="sgtu.second_given_name">Middle</label></div>
+              <div>[% input_field('stgu', 'second_given_name', 'Middle') %]</div>
+            </div>
+            <div class="grid-cell">
+              <div>
+                <label for="sgtu.family_name">Last</label>
+                <span class="patron-reg-required">*</span>
+              </div>
+              <div>[% input_field('stgu', 'family_name', 'Last') %]</div>
+            </div>
           </div>
-          <div class="grid-cell">
-            <div><input onchange="compile_dob()" type="text" 
-              maxlength="2" size="2" id="dob.day"></div>
-            <div><label for="dob.day">DD</label></div>
+          <div class="grid-clear"></div>
+        </li>
+
+        <li>
+          <label for="stgu.day_phone">Phone Number</label>
+          <div class="grid">
+            <div class="grid-cell">
+              <div>[% input_field('stgu', 'day_phone', 'Phone Number') %]</div>
+            </div>
+            <div class="grid-cell">(xxx-xxx-xxxx)</div>
           </div>
-          <div class="grid-cell">
-            <div><input onchange="compile_dob()" type="text" 
-              maxlength="4" size="4" id="dob.year"></div>
-            <div><label for="dob.year">YYYY</label></div>
+          <div class="grid-clear"></div>
+        </li>
+
+        <li>
+          <label for="stgu.dob">
+            Birth Date<span class="patron-reg-required">*</span>
+          </label>
+          <input type="hidden" name="stgu.dob" id="stgu.dob"/>
+          <div class="grid">
+            <div class="grid-cell">
+              <div><input onchange="compile_dob()" type="text" 
+                maxlength="2" size="2" id="dob.month"></div>
+              <div><label for="dob.month">MM</label></div>
+            </div>
+            <div class="grid-cell">
+              <div><input onchange="compile_dob()" type="text" 
+                maxlength="2" size="2" id="dob.day"></div>
+              <div><label for="dob.day">DD</label></div>
+            </div>
+            <div class="grid-cell">
+              <div><input onchange="compile_dob()" type="text" 
+                maxlength="4" size="4" id="dob.year"></div>
+              <div><label for="dob.year">YYYY</label></div>
+            </div>
+            <div class="grid-cell">
+              <div><span id='dob.display'></span></div>
+            </div>
           </div>
-          <div class="grid-cell">
-            <div><span id='dob.display'></span></div>
+          <div class="grid-clear"></div>
+        </li>
+
+        <li>
+          <label for="stgu.email">
+            Your email address for faster library notices
+          </label>
+          <div>[% input_field('stgu', 'email', 'Email', 'email') %]</div>
+        </li>
+
+        <li>
+          <label>Optional: What is your gender identity?</label>
+          <div>[% input_field('stgsc', '1', 'Gender') %]</div>
+        </li>
+
+        <li>
+          <label class="gfield_label" for="">
+            If you are under age 18, list all parents<br/>and guardians living at your address:
+          </label>
+          <div>[% input_field('stgu', 'ident_value2', 'Parent / Guardian', 'text', 'wide-input') %]</div>
+        </li>
+
+        <li>
+          <label for="stgu.home_ou">
+            What do you want your home library to be?
+          </label>
+          <div>
+            [% INCLUDE build_org_selector 
+                name='stgu.home_ou' 
+                id='stgu.home_ou' 
+                value=value || ''
+                can_have_users_only=1
+                no_indent=1
+                no_root=1
+                none_label=l('Please choose a library...')
+                onchange="validate('stgu.home_ou')"
+                valid_org_list=ctx.register.valid_orgs
+            %]
+            <span class="patron-reg-required">*</span>
+            [% IF ctx.register.invalid.bad_home_ou %]
+            <span class='patron-reg-required'>
+                [% l('Please select a valid library') %]
+            </span>
+            [% END %]
           </div>
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-
-      <li>
-        <label for="stgu.email">
-          Your email address for faster library notices
-        </label>
-        <div>[% input_field('stgu', 'email', 'Email', 'email') %]</div>
-      </li>
-
-      <li>
-        <label>Optional: What is your gender identity?</label>
-        <div>[% input_field('stgsc', '1', 'Gender') %]</div>
-      </li>
-
-      <li>
-        <label class="gfield_label" for="">
-          If you are under age 18, list all parents<br/>and guardians living at your address:
-        </label>
-        <div>[% input_field('stgu', 'ident_value2', 'Parent / Guardian', 'text', 'wide-input') %]</div>
-      </li>
-
-      <li>
-        <label for="stgu.home_ou">
-          What do you want your home library to be?
-        </label>
-        <div>
-          [% INCLUDE build_org_selector 
-              name='stgu.home_ou' 
-              id='stgu.home_ou' 
-              value=value || ''
-              can_have_users_only=1
-              no_indent=1
-              no_root=1
-              none_label=l('Please choose a library...')
-              onchange="validate('stgu.home_ou')"
-              valid_org_list=ctx.register.valid_orgs
-          %]
-          <span class="patron-reg-required">*</span>
-          [% IF ctx.register.invalid.bad_home_ou %]
-          <span class='patron-reg-required'>
-              [% l('Please select a valid library') %]
-          </span>
-          [% END %]
-        </div>
-      </li>
-
-      <li><h2>Contact Preferences</h2></li>
-      <hr/>
-
-      <li>
-        <label>May we contact you?</label>
-        <div>
-          <ul>
-            <li>
-              [% input_field('stgsc', '3', 'Events Mailing', 'checkbox') %]
-              <label for="stgsc.3">Tell me about KCLS news and events</label>
-            </li>
-            <li>
-              [% input_field('stgsc', '4', 'Foundation Mailing', 'checkbox') %]
-              <label for="stgsc.4">
-                Send me information about The King County Library System Foundation
-              </label>
-            </li>
-          </ul>
-        </div>
-      </li>
-
-      <li>
-        <h3>
-          Residential Address<span class="patron-reg-required">*</span>
-        </h3>
-      </li>
-
-      <li>
-        <div>[% input_field(
-          'stgba', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
-        <label for="stgba.street1">
-          Street Address
-          <span class="patron-reg-required">*</span>
-        </label>
-      </li>
-      <li>
-        <div class="grid">
-          <div class="grid-cell" style="width:40%">
-            <div>[% input_field(
-              'stgba', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
-            <div><label for="stgba.street2">Address Line 2</label></div>
+        </li>
+
+        <li><h2>Contact Preferences</h2></li>
+        <hr/>
+
+        <li>
+          <label>May we contact you?</label>
+          <div>
+            <ul>
+              <li>
+                [% input_field('stgsc', '3', 'Events Mailing', 'checkbox') %]
+                <label for="stgsc.3">Tell me about KCLS news and events</label>
+              </li>
+              <li>
+                [% input_field('stgsc', '4', 'Foundation Mailing', 'checkbox') %]
+                <label for="stgsc.4">
+                  Send me information about The King County Library System Foundation
+                </label>
+              </li>
+            </ul>
           </div>
-          <div class="grid-cell" style="width:40%">
-            <div>[% input_field('stgba', 'city', 'City') %]</div>
-            <div>
-              <label for="stgba.city">
-                City<span class="patron-reg-required">*</span>
-              </label>
+        </li>
+
+        <li>
+          <h3>
+            Residential Address<span class="patron-reg-required">*</span>
+          </h3>
+        </li>
+
+        <li>
+          <div>[% input_field(
+            'stgba', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
+          <label for="stgba.street1">
+            Street Address
+            <span class="patron-reg-required">*</span>
+          </label>
+        </li>
+        <li>
+          <div class="grid">
+            <div class="grid-cell" style="width:40%">
+              <div>[% input_field(
+                'stgba', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
+              <div><label for="stgba.street2">Address Line 2</label></div>
             </div>
-          </div>
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-      <li>
-        <div class="grid">
-          <div class="grid-cell" style="width:40%">
-            <div>[% PROCESS state_selector name='stgba.state' id='stgba.state' %]</div>
-            <div>
-              <label for="stgba.state">
-                State<span class="patron-reg-required">*</span>
-              </label>
+            <div class="grid-cell" style="width:40%">
+              <div>[% input_field('stgba', 'city', 'City') %]</div>
+              <div>
+                <label for="stgba.city">
+                  City<span class="patron-reg-required">*</span>
+                </label>
+              </div>
             </div>
           </div>
-          <div class="grid-cell" style="width:40%">
-            <div>[% input_field('stgba', 'post_code', 'Zip / Post Code') %]</div>
-            <div>
-              <label for="stgba.post_code">
-                Zip / Post Code<span class="patron-reg-required">*</span>
-              </label>
+          <div class="grid-clear"></div>
+        </li>
+        <li>
+          <div class="grid">
+            <div class="grid-cell" style="width:40%">
+              <div>[% PROCESS state_selector name='stgba.state' id='stgba.state' %]</div>
+              <div>
+                <label for="stgba.state">
+                  State<span class="patron-reg-required">*</span>
+                </label>
+              </div>
+            </div>
+            <div class="grid-cell" style="width:40%">
+              <div>[% input_field('stgba', 'post_code', 'Zip / Post Code') %]</div>
+              <div>
+                <label for="stgba.post_code">
+                  Zip / Post Code<span class="patron-reg-required">*</span>
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="grid-clear"></div>
-        <input type='hidden' name='stgba.country' value='USA'/>
-      </li>
-      
-      <li>
-        <label>Mailing Address</label>
-        <div>
-          <input type="checkbox" onclick="show_hide_mailing(this.checked)"
-            name="mailing_matches_billing"
-            id="mail_addr_matches_billing" checked="checked">
-          <label for="mail_addr_matches_billing">Same as Residential Address</label>
-        </div>
-      </li>
-
-      <li id='mailing-address-1' style='display:none'>
-        <div>[% input_field(
-          'stgma', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
-        <label for="stgma.street1">
-          Street Address
-          <span class="patron-reg-required">*</span>
-        </label>
-      </li>
-      <li id='mailing-address-2' style='display:none'>
-        <div class="grid">
-          <div class="grid-cell" style="width:40%">
-            <div>[% input_field(
-              'stgma', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
-            <div><label for="stgma.street2">Address Line 2</label></div>
+          <div class="grid-clear"></div>
+          <input type='hidden' name='stgba.country' value='USA'/>
+        </li>
+        
+        <li>
+          <label>Mailing Address</label>
+          <div>
+            <input type="checkbox" onclick="show_hide_mailing(this.checked)"
+              name="mailing_matches_billing"
+              id="mail_addr_matches_billing" checked="checked">
+            <label for="mail_addr_matches_billing">Same as Residential Address</label>
           </div>
-          <div class="grid-cell" style="width:40%">
-            <div>[% input_field('stgma', 'city', 'City') %]</div>
-            <div>
-              <label for="stgma.city">
-                City<span class="patron-reg-required">*</span>
-              </label>
+        </li>
+
+        <li id='mailing-address-1' style='display:none'>
+          <div>[% input_field(
+            'stgma', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
+          <label for="stgma.street1">
+            Street Address
+            <span class="patron-reg-required">*</span>
+          </label>
+        </li>
+        <li id='mailing-address-2' style='display:none'>
+          <div class="grid">
+            <div class="grid-cell" style="width:40%">
+              <div>[% input_field(
+                'stgma', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
+              <div><label for="stgma.street2">Address Line 2</label></div>
             </div>
-          </div>
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-      <li id='mailing-address-3' style='display:none'>
-        <div class="grid">
-          <div class="grid-cell" style="width:40%">
-            <div>[% PROCESS state_selector name='stgma.state' id='stgma.state' %]</div>
-            <div>
-              <label for="stgma.state">
-                State<span class="patron-reg-required">*</span>
-              </label>
+            <div class="grid-cell" style="width:40%">
+              <div>[% input_field('stgma', 'city', 'City') %]</div>
+              <div>
+                <label for="stgma.city">
+                  City<span class="patron-reg-required">*</span>
+                </label>
+              </div>
             </div>
           </div>
-          <div class="grid-cell" style="width:40%">
-            <div>[% input_field('stgma', 'post_code', 'Zip / Post Code') %]</div>
-            <div>
-              <label for="stgma.post_code">
-                Zip / Post Code<span class="patron-reg-required">*</span>
-              </label>
+          <div class="grid-clear"></div>
+        </li>
+        <li id='mailing-address-3' style='display:none'>
+          <div class="grid">
+            <div class="grid-cell" style="width:40%">
+              <div>[% PROCESS state_selector name='stgma.state' id='stgma.state' %]</div>
+              <div>
+                <label for="stgma.state">
+                  State<span class="patron-reg-required">*</span>
+                </label>
+              </div>
+            </div>
+            <div class="grid-cell" style="width:40%">
+              <div>[% input_field('stgma', 'post_code', 'Zip / Post Code') %]</div>
+              <div>
+                <label for="stgma.post_code">
+                  Zip / Post Code<span class="patron-reg-required">*</span>
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="grid-clear"></div>
-        <input type='hidden' name='stgma.country' value='USA'/>
-      </li>
-
-      <li>
-        <div class="grid">
-          <div class="grid-cell">
-            <input type="submit" value="[% l('Submit Registration') %]"/>
-          </div>
-          <div class="grid-cell">
-            <button onclick="location.href='https://www.kcls.org/'; return false">
-              Cancel and Return to KCLS
-            </button>
+          <div class="grid-clear"></div>
+          <input type='hidden' name='stgma.country' value='USA'/>
+        </li>
+
+        <li>
+          <div class="grid">
+            <div class="grid-cell">
+              <input type="submit" value="[% l('Submit Registration') %]"/>
+            </div>
+            <div class="grid-cell">
+              <button onclick="location.href='https://www.kcls.org/'; return false">
+                Cancel and Return to KCLS
+              </button>
+            </div>
           </div>
-        </div>
-        <div class="grid-clear"></div>
-      </li>
-    </ul>
-  </form>
-  [% END # IF ctx.success %]
+          <div class="grid-clear"></div>
+        </li>
+      </ul>
+    </form>
+    [% END # IF ctx.success %]
+    </div><!-- main-content-left -->
+    <div id='main-content-right'>
+      <h3>Download an Application</h3>
+      [% app_url = 'https://www.kcls.org/usingthelibrary/card/applications'; 
+         text_img_url = 'https://www.kcls.org/includes/usingthelibrary/images';
+         langs = [
+          { label => 'English', 
+            pdf => 'ENG%20KCLS%20600%20Library%20Card%20Application.pdf'},
+          { label => 'Arabic', 
+            pdf => 'ARABIC%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'arabic_diacritics.gif'
+            img_width => 79,
+            img_height => 20},
+          { label => 'Chinese',
+            pdf => 'CHINESE%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'cantonese.gif',
+            img2 => 'mandarin.gif',
+            img_width => 66,
+            img_height => 22,
+            img2_width => 47,
+            img2_height => 24},
+          { label => 'French',
+            pdf => 'FRENCH%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'french.gif',
+            img_width => 61,
+            img_height => 19},
+          { label => 'Korean',
+            pdf => 'KOREAN%20KCLS%20600%20Library%20Card%20Application.pdf'},
+          { label => 'Russian',
+            pdf => 'RUSSIAN%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'russian.gif',
+            img_width => 61,
+            img_height => 19},
+          { label => 'Somali',
+            pdf => 'SOMALI%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'somali.gif',
+            img_width => 81,
+            img_height => 17},
+          { label => 'Spanish',
+            pdf => 'SPANISH%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'spanish.gif',
+            img_width => 61,
+            img_height => 19},
+          { label => 'Vietnamese',
+            pdf => 'VIETNAMESE%20KCLS%20600%20Library%20Card%20Application.pdf',
+            img => 'vietnamese.gif',
+            img_width => 81,
+            img_height => 20},
+          { label => 'English (Large Print)',
+            pdf => '062211%20KCLS%20600%20LP.pdf'}
+        ];
+      %]
+      <ul id='download-forms-list'>
+        [% FOREACH lang IN langs %]
+          <li>
+            <a href='[% app_url %]/[% lang.pdf %]'>[% lang.label %]</a>
+          </li>
+          [% IF lang.img %]
+            <li>
+              <a href='[% app_url %]/[% lang.pdf %]'>
+                <img src='[% text_img_url %]/[% lang.img %]'
+                  width="[% lang.img_width %]"
+                  height="[% lang.img_height %]"
+                />
+              </a>
+              [% IF lang.img2 %]
+              <a href='[% app_url %]/[% lang.pdf %]'>
+                <img src='[% text_img_url %]/[% lang.img2 %]'
+                  width="[% lang.img2_width %]"
+                  height="[% lang.img2_height %]"
+                />
+              </a>
+              [% END %]
+            </li>
+          [% END %]
+        [% END %]
+        <li>
+          You'll need <a href='http://get.adobe.com/reader/'>Adobe Reader</a>.
+        </li>
+        <li>                                                                   
+          <a href='http://kcls.bibliocms.com/faq/library-cards/'>Related FAQs</a>
+        </li> 
+        <li>
+          <hr/>
+          Read our <a href='https://www.kcls.org/usingthelibrary/policies/privacy.cfm'>Privacy Policy</a>.
+        </li>
+      </ul>
+    </div>
+    <div class="grid-clear"></div>
   </div>
 </div>