diff options
| -rw-r--r-- | t/app/controller/contact.t | 8 | ||||
| -rw-r--r-- | templates/web/base/contact/index.html | 7 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/contact/who.html | 64 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 6 | ||||
| -rw-r--r-- | web/js/contact.js | 14 |
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&utm_campaign=contact_workflow_links&utm_medium=link&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); + } +}); |