Make who question more prominent.

2 files changed, 39 insertions, 32 deletions

diff --git a/templates/web/base/contact/index.html b/templates/web/base/contact/index.html
index 8e0894312..f71c36fb1 100644
--- a/templates/web/base/contact/index.html
+++ b/templates/web/base/contact/index.html
@@ -1,3 +1,6 @@
+[% extra_js = [
+    version('/js/contact.js')
+] -%]
 [% INCLUDE 'header.html',
     title = loc('Contact Us')
     robots = 'noindex,nofollow'
@@ -71,6 +74,8 @@
 
         [% END %]
 
+        [% INCLUDE 'contact/who.html' %]
+
         <label for="form_name">[% loc('Your name') %]</label>
         [% IF field_errors.name %]
            <div class="form-error">[% field_errors.name %]</div>
@@ -95,8 +100,6 @@
         [% END %]
         <input type="text" class="form-control required" name="subject" id="form_subject" value="[% subject | html %]" size="30">
 
-        [% INCLUDE 'contact/who.html' %]
-
         <label for="form_message">[% loc('Message') %]</label>
         [% IF field_errors.message %]
            <div class="form-error">[% field_errors.message %]</div>
diff --git a/templates/web/fixmystreet.com/contact/who.html b/templates/web/fixmystreet.com/contact/who.html
index e16809e48..a683412b7 100644
--- a/templates/web/fixmystreet.com/contact/who.html
+++ b/templates/web/fixmystreet.com/contact/who.html
@@ -3,10 +3,37 @@
 
 [% IF field_errors.dest %]
 <div class="form-error">[% field_errors.dest %]</div>
-[% ELSIF field_errors.not_for_us %]
-    <div class="form-error">You can only contact the team behind FixMyStreet using our contact form</div>
+[% END %]
+
+<div class="checkbox-group">
+    <input name="dest" id="dest_help" type="radio" value="help" class="required"[% IF dest AND dest == 'help' %] checked[% END %]>
+    <label class="inline" for="dest_help">I need help using the site</label>
+</div>
+
+<div class="checkbox-group">
+    <input name="dest" id="dest_feedback" type="radio" value="feedback" class="required"[% IF dest AND dest == 'feedback' %] checked[% END %]>
+    <label class="inline" for="dest_feedback">I have feedback about the site</label>
+</div>
+
+<div class="checkbox-group">
+    <input name="dest" id="dest_from_council" type="radio" value="from_council" class="required"[% IF dest AND dest == 'from_council' %] checked[% END %]>
+    <label class="inline" for="dest_from_council">I am from a council and I have a question for the FixMyStreet team</label>
+</div>
+
+<div class="checkbox-group">
+    <input name="dest" id="dest_council" type="radio" value="council" class="required"[% IF dest AND dest == 'council' %] checked[% END %]>
+    <label class="inline" for="dest_council">I want to report a street problem</label>
+</div>
+
+<div class="checkbox-group">
+    <input name="dest" id="dest_update" type="radio" value="update"[% IF dest AND dest == 'update' %] checked[% END %]>
+    <label class="inline" for="dest_update">My street problem hasn't been fixed</label>
+</div>
+
+<div id="dest-error"[% IF NOT field_errors.not_for_us %] class="hidden"[% END %]>
+  <div class="form-error">You can only contact the team behind FixMyStreet using our contact form</div>
 
-    [% IF dest == 'council' %]
+  <div class="form-error__box form-error--council[% IF dest != 'council' %] hidden[% END %]">
     <p>
     We’re not the council: we just run this website which helps you report issues
     to them.
@@ -24,7 +51,9 @@
     right place for it. You should find contact details on your council's own
     website.
     </p>
-    [% ELSIF dest == 'update' %]
+  </div>
+
+  <div class="form-error__box form-error--update[% IF dest != 'update' %] hidden[% END %]">
     <p>
     FixMyStreet is great for reporting problems, but we don't fix them - your
     council oversees that.
@@ -46,32 +75,7 @@
     you could try contacting your local councillor, using another useful mySociety site:
     <a href="https://www.writetothem.com/?utm_source=fixmystreet.com&amp;utm_campaign=contact_workflow_links&amp;utm_medium=link&amp;utm_content=contact+not_fixed">WriteToThem</a>.
     </p>
-
-    [% END %]
-[% END %]
-
-<div class="checkbox-group">
-    <input name="dest" id="dest_help" type="radio" value="help" class="required"[% IF dest AND dest == 'help' %] checked[% END %]>
-    <label class="inline" for="dest_help">I need help using the site</label>
-</div>
-
-<div class="checkbox-group">
-    <input name="dest" id="dest_feedback" type="radio" value="feedback" class="required"[% IF dest AND dest == 'feedback' %] checked[% END %]>
-    <label class="inline" for="dest_feedback">I have feedback about the site</label>
-</div>
-
-<div class="checkbox-group">
-    <input name="dest" id="dest_from_council" type="radio" value="from_council" class="required"[% IF dest AND dest == 'from_council' %] checked[% END %]>
-    <label class="inline" for="dest_from_council">I am from a council and I have a question for the FixMyStreet team</label>
+  </div>
 </div>
 
-<div class="checkbox-group">
-    <input name="dest" id="dest_council" type="radio" value="council" class="required"[% IF dest AND dest == 'council' %] checked[% END %]>
-    <label class="inline" for="dest_council">I want to report a street problem</label>
-</div>
-
-<div class="checkbox-group">
-    <input name="dest" id="dest_update" type="radio" value="update"[% IF dest AND dest == 'update' %] checked[% END %]>
-    <label class="inline" for="dest_update">My street problem hasn't been fixed</label>
-</div>
 [% END %]