Make who question more prominent.

5 files changed, 64 insertions, 35 deletions

diff --git a/t/app/controller/contact.t b/t/app/controller/contact.t
index 254522b92..3fa83be9b 100644
--- a/t/app/controller/contact.t
+++ b/t/app/controller/contact.t
@@ -346,6 +346,7 @@ for my $test (
         page_errors =>
           [ 'There were problems with your report. Please see below.',
             'Please enter who your message is for',
+            'You can only contact the team behind FixMyStreet using our contact form', # The JS-hidden one
         ]
     },
     {
@@ -391,11 +392,12 @@ for my $test (
             $test->{fields}->{'extra.phone'} = '';
             is_deeply $mech->visible_form_values, $test->{fields}, 'form values';
 
+            # Ugh, but checking div not hidden; text always shown and hidden with CSS
             if ( $test->{fields}->{dest} and $test->{fields}->{dest} eq 'update' ) {
-                $mech->content_contains( 'www.writetothem.com', 'includes link to WTT if trying to update report' );
+                $mech->content_contains('<div class="form-error__box form-error--update">');
             } elsif ( $test->{fields}->{dest} and $test->{fields}->{dest} eq 'council' ) {
-                $mech->content_lacks( 'www.writetothem.com', 'does not include link to WTT if trying to contact council' );
-                $mech->content_contains( 'should find contact details', 'mentions checking council website for contact details' );
+                # Ugh, but checking div not hidden
+                $mech->content_contains('<div class="form-error__box form-error--council">');
             }
         }
     };
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 %]
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 15b42cc3e..a2da14280 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -510,6 +510,12 @@ textarea.form-error {
   @include border-radius(0 0.25em 0.25em 0.25em);
 }
 
+.form-error__box {
+    border: solid 2px #ff0000;
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+}
+
 ul.error {
   background:#ff0000;
   color:#fff;
diff --git a/web/js/contact.js b/web/js/contact.js
new file mode 100644
index 000000000..9529ede16
--- /dev/null
+++ b/web/js/contact.js
@@ -0,0 +1,14 @@
+$('[name=dest]').change(function() {
+    var err = $('.form-error--' + this.value),
+        inputs = $(this).closest('form').find('input[type=text], input[type=submit]');
+    $('.form-error__box').addClass('hidden');
+    if (err.length) {
+        $('#dest-error').removeClass('hidden');
+        $('#dest-error .form-error').show(); // might have been hidden by normal validate
+        inputs.prop('disabled', true);
+        $('.form-error--' + this.value).removeClass('hidden');
+    } else {
+        $('#dest-error').addClass('hidden');
+        inputs.prop('disabled', false);
+    }
+});