[fixmystreet.com] FMS Pro demo access request form

3 files changed, 105 insertions, 3 deletions

diff --git a/templates/web/fixmystreet.com/about/council.html b/templates/web/fixmystreet.com/about/council.html
index 062a66a21..93c2604d1 100644
--- a/templates/web/fixmystreet.com/about/council.html
+++ b/templates/web/fixmystreet.com/about/council.html
@@ -23,7 +23,33 @@
       <p class="councils-hero__subtitle__secondary">Residents, staff and contractors love FixMyStreet for its easy-use interfaces.
         If you’re the budget-holder, you’ll love its sensible pricing, too.</p>
     </div>
-
+    <div class="councils-hero__demo-access">
+      <h2>Try FixMyStreet Professional right now, on our demo site</h2>
+      <form class="councils-hero__demo-access__form js-fms-pro-demo-form">
+        <div class="form-group">
+          <label for="demo-name">Name</label>
+          <span class="required">required</span>
+          <input type="text" name="name" id="demo-name" required>
+        </div>
+        <div class="form-group">
+          <label for="demo-email">Contact email</label>
+          <span class="required">required</span>
+          <input type="email" name="em" id="demo-email" required>
+          <p class="form-note">Ending in .gov.uk</p>
+        </div>
+        <div class="form-group">
+          <label for="demo-phone">Contact phone number</label>
+          <input type="text" name="extra.phone" id="demo-phone">
+        </div>
+        <div class="form-group">
+          <label for="demo-job">Job title</label>
+          <input type="text" name="job" id="demo-job">
+        </div>
+        <div class="form-group submit-group">
+          <input type="submit" value="Let me in" class="btn">
+        </div>
+      </form>
+    </div>
   </div>
   <div class="councils-sales councils-sales--benefits">
     <div class="councils-content-wrapper">
diff --git a/web/cobrands/fixmystreet.com/fmsforcouncils.scss b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
index bf156b73d..ee166b8fd 100644
--- a/web/cobrands/fixmystreet.com/fmsforcouncils.scss
+++ b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
@@ -142,8 +142,71 @@ $fms-pink: #E65376;
     color: #777;
   }
 
+  .councils-hero__demo-access {
+    background-color: $fms-pink;
+    border-radius: 3px;
+    color: #fff;
+    padding: 2em;
+    margin: 4em auto -4em auto;
+    max-width: 26em;
+    position: relative;
+    z-index: 1;
+
+    @media (min-width: 44em) {
+      padding: 3em;
+    }
+
+    h2 {
+      text-align: center;
+      margin: 0 0 1em 0;
+    }
+
+    .form-group {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    label {
+      font-weight: normal;
+    }
+
+    // Avoid border collapse jump on jQuery.slideDown()
+    .form-group:first-child label {
+      margin-top: 0;
+    }
+
+    input[type="text"],
+    input[type="email"] {
+      border: 1px solid desaturate(darken($fms-pink, 10%), 20%);
+      width: 100%;
+      padding: 0.5em;
+      border-radius: 3px;
+      font-size: 1em;
+      box-sizing: border-box;
+    }
+
+    .btn {
+      display: block;
+      margin: 0 auto;
+      background-image: none;
+      background-color: desaturate(darken($fms-pink, 10%), 20%);
+      border: none;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: desaturate(darken($fms-pink, 20%), 20%);
+      }
+    }
+
+    .required,
+    .form-note {
+      color: mix($fms-pink, #fff, 30%);
+    }
+  }
+
   .councils-sales {
-    padding: 3em 0 5em;
+    padding: 2em 0 5em;
     .councils-content-wrapper {
       max-width: 58em;
     }
@@ -188,7 +251,8 @@ $fms-pink: #E65376;
   .councils-sales--benefits {
     background-color: #F7F6F5;
     border-bottom: 1px solid #e9e9e9;
-    padding-top: 1em;
+    padding-top: 5em;
+
     h2 {
       font-size: 2.5em;
       text-align: center;
diff --git a/web/cobrands/fixmystreet.com/js.js b/web/cobrands/fixmystreet.com/js.js
index f0598dbdb..5aecd820e 100644
--- a/web/cobrands/fixmystreet.com/js.js
+++ b/web/cobrands/fixmystreet.com/js.js
@@ -65,4 +65,16 @@ $(function(){
             });
         }
     });
+
+    // Hide the demo access form behind a button, to save space on initial page load
+    $('.js-fms-pro-demo-form').each(function(){
+        var $form = $(this);
+        var $revealBtn = $('<button>').addClass('btn').text('Request access').on('click', function(){
+            $form.slideDown(250, function(){
+                $form.find('input[type="text"], input[type="text"]').eq(0).focus();
+            });
+            $(this).remove();
+        }).insertAfter($form);
+        $form.hide();
+    });
 });