From dba83b872c605858a0f5544ad9749cd4685ae8fa Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Tue, 19 Mar 2024 16:54:41 +0000
Subject: [PATCH] fixup! Add stripe donate form

---
 www/docs/js/main.js                           | 144 ++---
 www/docs/style/sass/parts/_donate_form.scss   | 549 ++----------------
 www/docs/style/sass/parts/_toc.scss           |   1 +
 .../templates/html/donate/_stripe_donate.php  | 150 +++--
 4 files changed, 210 insertions(+), 634 deletions(-)

diff --git a/www/docs/js/main.js b/www/docs/js/main.js
index 8d856b156b..7ed5b2d878 100644
--- a/www/docs/js/main.js
+++ b/www/docs/js/main.js
@@ -361,85 +361,89 @@ function trackLinkClick(link, category, name, value) {
 
 /* Donate page */
 
-$(function() {
+function fullname_show(focus){
+  $('.donate-fullname').slideDown(100, function(){
+    if (focus) {
+      $('.donate-fullname input').focus();
+    }
+  });
+}
 
-  if ($.easytabs){
-      $('#tab-container').easytabs({ animate: false });
-  }
-  
-  var selected = {};
+function fullname_hide(){
+  $('.donate-fullname').slideUp(100);
+}
+
+function fullname_toggle(test, focus){
+  test ? fullname_show(focus) : fullname_hide();
+}
+
+function othervalue_show(focus){
+  $('.how-much-other-value').slideDown(100, function(){
+    $('.how-much-other-value input').prop("disabled", false);
+    if (focus) {
+      $('.how-much-other-value input').focus();
+    }
+  });
+}
 
+function othervalue_hide(){
+  $('.how-much-other-value').slideUp(100, function(){
+    $('.how-much-other-value input').prop("disabled", true);
+  });
+}
+
+function othervalue_toggle(test, focus){
+  test ? othervalue_show(focus) : othervalue_hide();
+}
+
+function amounts_annually(){
+  $('.donate-annually-amount').show();
+  $('.donate-monthly-amount').hide();
+  $('.donate-one-off-amount').hide();
+}
+
+function amounts_monthly(){
+  $('.donate-annually-amount').hide();
+  $('.donate-monthly-amount').show();
+  $('.donate-one-off-amount').hide();
+}
+
+function amounts_oneoff(){
+  $('.donate-annually-amount').hide();
+  $('.donate-monthly-amount').hide();
+  $('.donate-one-off-amount').show();
+}
+
+$(function() {
 
   $('#how-often-annually').click(function() {
     var defaultValue = $(this).data('default-amount');
-    $('.donate-annually-amount').show();
-    $('.donate-monthly-amount').hide();
-    $('.donate-one-off-amount').hide();
     $('#how-much-annually-' + defaultValue).prop('checked', true);
-    $('.how-much-other-value').slideUp(100, function(){
-      $('.how-much-other-value__input').prop( "disabled", true );
-  });
+    amounts_annually();
+    othervalue_hide();
   });
   $('#how-often-monthly').click(function() {
     var defaultValue = $(this).data('default-amount');
-    $('.donate-monthly-amount').show();
-    $('.donate-annually-amount').hide();
-    $('.donate-one-off-amount').hide();
     $('#how-much-monthly-' + defaultValue).prop('checked', true);
-    $('.how-much-other-value').slideUp(100, function(){
-      $('.how-much-other-value__input').prop( "disabled", true );
-  });
+    amounts_monthly();
+    othervalue_hide();
   });
   $('#how-often-once').click(function() {
     var defaultValue = $(this).data('default-amount');
-    $('.donate-one-off-amount').show();
-    $('.donate-annually-amount').hide();
-    $('.donate-monthly-amount').hide();
     $('#how-much-one-off-' + defaultValue).prop('checked', true);
-    $('.how-much-other-value').slideUp(100, function(){
-    $('.how-much-other-value__input').prop( "disabled", true );
+    amounts_oneoff();
+    othervalue_hide();
   });
-  
-  }); 
-  
-  $('#gift-aid-yes').click(function() {
-    if($(this).is(':checked')) {
-      $('.donate-fullname').slideDown();
-    } else {
-      $('.donate-fullname').slideUp();
-    }
+
+  $('#gift-aid-yes').click(function(){
+    fullname_toggle($('#gift-aid-yes').is(':checked'), true);
   });
-  
-  //Donate form 'other' amount box toggle if box value is empty
-  current_value = $('#how-much-other-value__input').val();
-  if (current_value == '') {
-    $('#how-much-other-value__input').prop( "disabled", true );
-    $('.how-much-other-value').hide();
-  };
+  fullname_toggle($('#gift-aid-yes').is(':checked'));
   
   $('[id^=how-much-]').click(function(){
-      if($('#how-much-other').is(":checked")){
-          $('.how-much-other-value').slideDown(100, function(){
-            $('.how-much-other-value__input').prop( "disabled", false ).focus();
-          });
-      }
-      else if($('#how-much-other').is(":not(:checked)")){
-          $('.how-much-other-value').slideUp(100, function(){
-              $('.how-much-other-value__input').prop( "disabled", true );
-          });
-      }
-  });
-  
-  $('input[type=radio]').click(function() {
-      selected[this.name] = 1;
-      var total = 0;
-      for (s in selected) {
-          total++;
-      }
-      if (total === 4) {
-          $('.form__error').remove();
-      }
+    othervalue_toggle($('#how-much-other').is(':checked'), true);
   });
+  othervalue_toggle($('#how-much-other').is(':checked'));
   
   $('#donate_button').click(function(e) {
     e.preventDefault();
@@ -452,39 +456,39 @@ $(function() {
     if (amount == 'other') {
       amount = $('input[name=how-much-other]').val();
     }
-    $('.form__error').remove();
+    $('.donate-form__error').remove();
     if (!amount || !howoften) {
-      $(this).parent().before('<p class="form__error">Please select an amount to donate.</p>');
+      $(this).parent().before('<p class="donate-form__error">Please select an amount to donate.</p>');
       return;
     }
     if (!contact_permission) {
-      $(this).parent().before('<p class="form__error">Please tell us if we can contact you about our work (or not!).</p>');
+      $(this).parent().before('<p class="donate-form__error">Please tell us if we can contact you about our work (or not!).</p>');
       return;
     }
     if (giftaid == 'Yes' && !full_name) {
-      $(this).parent().before('<p class="form__error">Please enter your full name for gift aid.</p>');
+      $(this).parent().before('<p class="donate-form__error">Please enter your full name for gift aid.</p>');
       return;
     }
-  
+
     var submitPaymentForm = function(){
         grecaptcha.execute();
     };
-  
+
     if (!window.analytics) {
       return submitPaymentForm();
     }
-  
+
     window.analytics.trackEvent(
       "donate_form_submit", {"frequency": howoften, "value": amount }
       ).done(submitPaymentForm);
-  });
+    });
   
   });
   
   function onDonateError(message) {
-    var displayError = document.getElementsByClassName('form__error-wrapper')[0];
+    var displayError = document.getElementsByClassName('donate-form__error-wrapper')[0];
     document.getElementById('spinner').style.display = 'none';
-    displayError.innerHTML = '<p class="form__error">' + message + '</p>';
+    displayError.innerHTML = '<p class="donate-form__error">' + message + '</p>';
   }
   
   function onDonatePass(token) {
diff --git a/www/docs/style/sass/parts/_donate_form.scss b/www/docs/style/sass/parts/_donate_form.scss
index 13af4e802c..28fcf5d34d 100644
--- a/www/docs/style/sass/parts/_donate_form.scss
+++ b/www/docs/style/sass/parts/_donate_form.scss
@@ -1,514 +1,87 @@
-// form scss generally copied from the mySociety.org stylesheets
-
-.donation-box {
-  border: 2px solid black;
-  border-radius: 10px;
-  padding: 10px;
-  background-color: white;
-
-}
+.donate-form {
+  label {
+    font-size: 1em;
+    color: inherit;
+  }
 
-@mixin grid-column--full {
-    @include grid-column;
-    width: 100%;
+  input#full-name {
+    max-width: 25em;
+    margin-top: 1em;
+  }
 }
 
-@mixin grid-column--one-third--no-gutter {
-    @include grid-column--no-gutter;
-    width: 25%;
+.donate-form__error-wrapper {
+  color: $alert-color;
 }
 
-@mixin grid-column--no-gutter {
-    float: left;
+.donate-form .fat-radio-buttons,
+.how-much-other-value,
+.donate-giftaid__label,
+.donate-fullname {
+  margin: 1em 0 1.5em 0;
 }
 
+.fat-radio-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
 
-$size-font-base: 18px;
-$donate-form-breakpoint: 758px;
-
-$colour_orange: #E0A55A;
-$colour_blue: #48A9F0;
-$colour_green: #77BB63;
-$colour_yellow: #FEDC66;
-$colour_red: #DA545D;
-$colour_purple: #B260B0;
-$colour_off_white: #F5F3ED;
-$colour_lighter_grey: #F0EDE6;
-$colour_light_grey: #DFDED8;
-$colour_grey: #C6C4BE;
-$colour_mid_grey: #959287;
-$colour_dark_grey: #615E58;
-$colour_black: #424242;
-
-$colour_background: $colour_black;
-$colour_links: $colour_blue;
-$colour_borders: $colour_light_grey;
-
-
-@mixin flexbox() {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
+  .inline-radio-label {
     display: flex;
-  }
-  
-@mixin flex-align($alignment) {
-    -webkit-box-align: $alignment;
-    -webkit-align-items: $alignment;
-    -ms-flex-align: $alignment;
-    align-items: $alignment;
-  }
-
-@function calculateRem($size, $base) {
-    $remSize: $size / $base;
-    @return #{$remSize}rem;
-  }
-  
-  /*
-   * Send a size in pixels, property (optional), and a base size (optional)
-   * Returns the same size calculated in rems and a fall-back px for older browsers
-   * Input
-   * @include remSize(18px, margin-top, 16px);
-   * Output
-   * margin-top: 18px;
-   * margin-top: 1.125rem;
-   */
-  @mixin remSize($size, $property:font-size, $base:$size-font-base) {
-    #{$property}: $size; //Fallback in px
-    #{$property}: calculateRem($size, $base);
-  }
-
-
-  .donate-form {
-  
-    .form__element {
-      max-width: 36em;
-    }
-  }
-  
-  .donate-page-header {
-    padding-bottom: 1.5em;
-    position: relative;
-  }
-  
-  .donate-page-header__title {
-    @include remSize(36px);
-  }
-  
-  .donate-page-header__para {
-    @include remSize(21px);
-    @include remSize(27px, line-height);
-    color: $colour_dark_grey;
-  }
-  
-  .donation-thanks__message {
-    z-index: 3;
-    position: relative;
-  }
-  
-  .donation-thanks__message__header {
-    text-align: center;
-    @include remSize(60px);
-    font-weight: bold;
-  
-    @media (min-width: $medium-screen)  {
-        @include remSize(96px);
-    }
-  }
-  
-  .donation-thanks__message__para {
-    @include remSize(21px);
-    line-height: 1.5em;
-    color: $colour_dark_grey;
-  }
-  
-  .donation-thanks__message__share {
-    text-align: center;
-  }
-  
-  .donate-canvas {
-    margin-bottom: 4em;
-    @media (min-width: $medium-screen)  {
-      margin-bottom: 8em;
-    }
-  }
-  
-  .confetti {
-    background-image: url('../img/confetti.png');
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 477px 370px;
-    height: 741px;
-    width: 100%;
-    max-width: 100%;
-    position: absolute;
-    top: -230px;
-    left: 0;
-    z-index: 1;
-  
-    @media (min-width: $medium-screen)  {
-        top: -100px;
-        background-size: 954px 741px;
-    }
-  
-    @media ($high-dpi-screen)  {
-      background-image: url('../img/confetti@2.png');
-    }
-  }
-  
-  .donate-page-sidebar {
-    @include grid-column--full;
-    @media (min-width: $donate-form-breakpoint) {
-      @include grid-column--one-third--no-gutter;
-    }
-  }
-  
-  .donate-page-sidebar__entry {
-    background-color: $colour_off_white;
-    @include remSize(21px, padding);
-    border-radius: 5px;
-    @media (min-width: $medium-screen)  {
-      width: 120%;
-      margin-right: -20%;
-    }
-  }
-  
-  .donate-page-sidebar__title {
-    @include remSize(13px);
-    text-transform: uppercase;
-    font-weight: bold;
-    margin-bottom: 0.5em;
-    color: $colour_dark_grey;
-  }
-  
-  .donate-page-sidebar__name {
-    @include remSize(23px);
-    margin-bottom: 0.25em;
-  }
-  
-  .donate-page-sidebar__content {
-    @include remSize(14px);
-  }
-  
-  .donate-page-sidebar__image {
-    margin-bottom: 1em;
-    border-radius: 50%;
-    border: 10px solid #fff;
-  }
-  
-  .donate-fullname,
-  .how-much-other-value {
-      background-color: $colour_off_white;
-      padding: 1em;
-      width: 100%;
-      border: 1px solid $colour_borders;
-      border-radius: 3px;
-  }
-  
-  .mysoc-spinner--small {
-      font-size: 0.5em;
-      display: none;
-      margin-left: 1em;
-  }
-  
-  .form__element--submit {
-      display: flex;
-      align-items: center;
-  }
-  
-
-
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0.75em 1em;
+    border: 1px solid #ccc;
+    border-radius: 3px;
 
-  
-  .form__element--vertically-stacked {
-    label,
     input {
-      display: block;
-    }
-  }
-  
-  .form__element__heading {
-    display: block;
-    font-weight: 600;
-    @include remSize(21px);
-    margin-bottom: 1rem;
-    line-height: 1.1em;
-  }
-  
-  .form__element__explainer {
-    display: block;
-    @include remSize(14px);
-    color: $colour_dark_grey;
-    line-height: 1.35em;
-  }
-  
-  .inline-radio-label {
-    // Radio button with a label to the right
-    // [ ] Label
-    cursor: pointer;
-    display: inline-block;
-  
-    @media (min-width: $donate-form-breakpoint) {
-      margin-right: 1em;
-  
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  
-    input[type="radio"] {
-      margin-right: 0.5em;
       margin-bottom: 0;
-      cursor: pointer;
-    }
-
-    .form__element__explainer {
-      margin-left: 23px;
-    }
-  }
-  
-  .fat-radio-buttons {
-    @include flexbox;
-    flex-flow: row wrap;
-  
-    .form__element__heading {
-      flex: 0 0 100%;
-    }
-  
-    .inline-radio-label {
-      @include flexbox;
-      @include flex-align(center);
-      @include justify-content(center);
-      border: 1px solid $colour_light_grey;
-      border-bottom: 0;
-      padding: 1em 1.65em 1em 1.35em;
-      width: 100%;
-  
-      &:first-of-type {
-        border-radius: 3px 3px 0 0;
-      }
-  
-      &:last-of-type {
-        border-bottom: 1px solid $colour_light_grey;
-        border-radius: 0 0 3px 3px;
-      }
-  
-      @media(min-width: $donate-form-breakpoint) {
-        flex: 0 1 auto;
-        width: auto;
-        border-bottom: 1px solid $colour_light_grey;
-        border-radius: 3px;
-        margin-bottom: 1em;
-  
-        &:first-of-type,
-        &:last-of-type {
-          border-radius: 3px;
-        }
-      }
-  
-      &:hover,
-      &:active,
-      &:focus {
-        border-color: #bbb;
-      }
-    }
-  
-    .radio-button-with-title {
-      padding: 0;
-      position: relative;
-  
-      @media (min-width: $donate-form-breakpoint) {
-        flex-basis: 0;
-        flex-grow: 1;
-      }
-  
-      input[type="radio"] {
-        position: absolute;
-        left: 1em;
-        top: 1em;
-      }
-    }
-  
-    .radio-button-with-title__heading {
-      background-color: $colour_off_white;
-      border-bottom: 1px solid $colour_light_grey;
-      display: block;
-      padding: 0.5em 1em 0.5em 1.7em;
-      @include remSize(27px);
-      border-radius: 3px 3px 0 0;
-      font-weight: 600;
-    }
-  
-    .radio-button-with-title__para {
-      display: inline-block;
-      padding: 1em 1.5em 1em 1em;
-      @include remSize(14px);
-      color: $colour_dark_grey
+      margin-right: 0.5em;
     }
   }
-  
-  .fat-radio-buttons__form-inside {
-      padding: 0.777777778em 1em;
-  
-      label {
-        @include remSize(14px);
-      }
-  
-      input:disabled {
-        opacity: 0.5;
-        background-color: $colour_off_white;
-      }
-  }
-  
+
   .radio-label-large {
-    @include remSize(32px);
+    font-size: 1.75rem;
     font-weight: 600;
   }
-  
-  .donate-amounts {
-    justify-content: flex-start;
-    margin-top: 0em;
-  }
-  
-  .how-much-other-value {
-    position: relative;
-    margin-top: 2em;
-    @media (min-width: $donate-form-breakpoint) {
-      margin-top: 0;
-    }
+}
+
+.how-much-other-value {
+  .row.collapse {
+    max-width: 10em;
+    margin: 1em 0 0 0;
   }
-  
-  input.how-much-other-value__input {
-    padding-left: 1.25em;
-    max-width: 100%;
-    width: 8em;
-    z-index: 1;
+
+  input {
+    margin-bottom: 0;
   }
-  
-  .how-much-other-value__currency {
+}
+
+.donate-giftaid__label {
+  position: relative;
+  padding: 1em 1em 1em 2.5em;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+
+  input {
     position: absolute;
-    left: 1.5em;
-    top: 2.0em;
-    z-index: 5;
-    color: $colour_dark_grey;
-  }
-  
-  .donate-giftaid,
-  .donate-contact {
-    max-width: 36em;
-    padding-top: 10px;
+    top: 1.2em;
+    left: 1.2em;
   }
-  
 
-  .donate-fullname {
-    display: none;
-  }
-  
-  .donate-giftaid__label {
+  small {
     display: block;
-    position: relative;
-    cursor: pointer;
-    border: 1px solid $colour_light_grey;
-    padding: 1em 1.7em 1em 3em;
-  
-    &:first-of-type {
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-    }
-  
-    &:last-of-type {
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-  
-    & + & {
-      margin-top: -1px;
-    }
-  
-    &:hover,
-    &:active,
-    &:focus {
-      border-color: #bbb;
-      z-index: 1;
-    }
-  
-    input {
-      position: absolute;
-      top: 1.35em;
-      left: 1.35em;
-    }
-  
-    small {
-      display: block;
-      font-size: 0.8em;
-      line-height: 1.4em;
-      margin-top: 0.5em;
-      color: #777;
-    }
-  }
-  
-  .form__element__input[type] {
-    padding: 0.75em 1em;
-    width: 20em;
-    max-width: 100%;
-  }
-  
-  .form__element__explainer--cards {
-    @extend .image-replacement;
-    margin-top: 0.5em;
-    width: 147px;
-    height: 20px;
-    background-image: url('../img/payment-options-cards.png');
-    background-size: 147px 20px;
-    background-repeat: no-repeat;
-  
-    @media ($high-dpi-screen)  {
-      background-image: url('../img/payment-options-cards@2.png');
-    }
-  }
-  
-  .form__element__explainer--dd {
-    @extend .image-replacement;
-    margin-top: 0.5em;
-    width: 100px;
-    height: 32px;
-    background-image: url('../img/direct-debit.png');
-    background-size: 100px 32px;
-    background-repeat: no-repeat;
-  
-    @media ($high-dpi-screen)  {
-      background-image: url('../img/direct-debit@2.png');
-    }
-  }
-  
-  .paypal-logo {
-    display: inline-block;
-    @extend .image-replacement;
+    line-height: 1.3;
     margin-top: 0.5em;
-    width: 108px;
-    height: 29px;
-    background-image: url('../img/paypal-logo.png');
-    background-size: 108px 29px;
-    background-repeat: no-repeat;
-    margin-top: 0;
-  
-    @media ($high-dpi-screen)  {
-      background-image: url('../img/paypal-logo@2.png');
-    }
-  }
-  
-  .paypal-logo-radio {
-    top: -12px !important; //makes the radio button align with the others
+    font-size: 0.75em;
+    text-transform: none;
   }
-  
-  .form__error {
-    background-color: $colour_red;
-    color: #fff;
-    padding: 1.25em 1.5em;
-    border-radius: 5px;
-    position: relative;
-    z-index: 10;
-    box-shadow: 0px 2px 2px 0 rgba(0,0,0,0.2);
+}
+
+.donate-submit {
+  p small {
+    color: #666;
+    font-size: 0.75em;
   }
-  
\ No newline at end of file
+}
diff --git a/www/docs/style/sass/parts/_toc.scss b/www/docs/style/sass/parts/_toc.scss
index 86e1766865..aa940e169a 100644
--- a/www/docs/style/sass/parts/_toc.scss
+++ b/www/docs/style/sass/parts/_toc.scss
@@ -9,6 +9,7 @@ $toc-page-breakpoint: 40em; // 640px
         &:first-child {
             position: fixed;
             bottom: 0;
+            z-index: 1;
             width: 100%;
             background: $body-bg;
             box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
diff --git a/www/includes/easyparliament/templates/html/donate/_stripe_donate.php b/www/includes/easyparliament/templates/html/donate/_stripe_donate.php
index be906e801d..ea0beac41e 100644
--- a/www/includes/easyparliament/templates/html/donate/_stripe_donate.php
+++ b/www/includes/easyparliament/templates/html/donate/_stripe_donate.php
@@ -20,8 +20,8 @@
     '100' => '£100',
   ),
 );
-$default_amounts = array(
 
+$default_amounts = array(
   'monthly' => '10',
   'annually' => '10',
   'one-off' => '50',
@@ -47,84 +47,82 @@
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 
 
-<div class="donation-box">
-
-
+<form class="donate-form" method="post" name="donation_form">
 
+    <div class="donate-form__error-wrapper">
+      <?php if (isset($error) and $error) { ?>
+        <p class="donate-form__error"><?=$error ?></p>
+      <?php } ?>
+        <noscript>
+            <p class="donate-form__error">Unfortunately, our payment
+            processor requires JavaScript to take payment.<br>
+            Please enable JavaScript and try again, or you can
+            <a href="/contact">contact us</a> for alternative donation methods.</p>
+        </noscript>
+    </div>
 
-<div class="grid-row">
-    <form class="form donate-form" method="post" name="donation_form">
-
-      <div class="form__error-wrapper">
-<?php if (isset($error) and $error) { ?>
-      <p class="form__error"><?=$error ?></p>
-<?php } ?>
-      <noscript>
-        <p class="form__error">Unfortunately, our payment
-                processor requires JavaScript to take payment.<br>
-                Please enable JavaScript and try again, or you can 
-                <a href="/contact">contact us</a> for alternative donation methods.</p>
-      </noscript>
-      </div>
-      <h2 class="form__element__heading">Donate to TheyWorkForYou and mySociety</h3>
-
-      <div class="form__element fat-radio-buttons">
-      <label for="how-often-once" class="inline-radio-label"><input type="radio" id="how-often-once" name="how-often" value="once" data-default-amount="<?= $default_amounts["one-off"] ?>" required <?php get_checked($initial_payment_type, 'one-off') ?>>One-off donation</label>
-      <label for="how-often-annually" class="inline-radio-label"><input type="radio" id="how-often-annually" name="how-often" value="annually" data-default-amount="<?= $default_amounts["annually"] ?>" required <?php get_checked($initial_payment_type, 'annually') ?>>Annual donation</label>
-      <label for="how-often-monthly" class="inline-radio-label"><input type="radio" id="how-often-monthly" name="how-often" value="monthly" data-default-amount="<?= $default_amounts["monthly"] ?>" required <?php get_checked($initial_payment_type, 'monthly') ?>>Monthly donation</label>
+    <h2>Donate to TheyWorkForYou and mySociety</h3>
 
+    <div class="fat-radio-buttons">
+        <label for="how-often-once" class="inline-radio-label"><input type="radio" id="how-often-once" name="how-often" value="once" data-default-amount="<?= $default_amounts["one-off"] ?>" required <?php get_checked($initial_payment_type, 'one-off') ?>>One-off donation</label>
+        <label for="how-often-annually" class="inline-radio-label"><input type="radio" id="how-often-annually" name="how-often" value="annually" data-default-amount="<?= $default_amounts["annually"] ?>" required <?php get_checked($initial_payment_type, 'annually') ?>>Annual donation</label>
+        <label for="how-often-monthly" class="inline-radio-label"><input type="radio" id="how-often-monthly" name="how-often" value="monthly" data-default-amount="<?= $default_amounts["monthly"] ?>" required <?php get_checked($initial_payment_type, 'monthly') ?>>Monthly donation</label>
     </div>
 
+    <h3>How much would you like to give?</h3>
 
-      <div class="form__element fat-radio-buttons donate-amounts">
-        <h3 class="form__element__heading">How much would you like to give?</h3>
-        <?php foreach ($payment_amounts as $payment_type => $amounts) { ?>
-          <?php foreach ($amounts as $amount => $label) { ?>
-            <label
-             for="how-much-<?=$payment_type?>-<?=$amount?>"
-             class="donate-<?=$payment_type?>-amount inline-radio-label"
-             <?php if ($payment_type != $initial_payment_type) { ?>style="display:none"<?php } ?>
-            >
+    <div class="fat-radio-buttons donate-amounts">
+      <?php foreach ($payment_amounts as $payment_type => $amounts) { ?>
+      <?php foreach ($amounts as $amount => $label) { ?>
+        <label
+          for="how-much-<?=$payment_type?>-<?=$amount?>"
+          class="donate-<?=$payment_type?>-amount inline-radio-label"
+          <?php if ($payment_type != $initial_payment_type) { ?>style="display:none"<?php } ?> />
             <input
-             type="radio"
-             id="how-much-<?=$payment_type?>-<?=$amount?>"
-             name="how-much"
-             value="<?=$amount?>" 
-             required <?= (($how_much == $amount) and ($payment_type == $initial_payment_type) ) ? ' checked': '' ?>>
+              type="radio"
+              id="how-much-<?=$payment_type?>-<?=$amount?>"
+              name="how-much"
+              value="<?=$amount?>"
+              required <?= (($how_much == $amount) and ($payment_type == $initial_payment_type) ) ? ' checked': '' ?> />
             <span class="radio-label-large"><?=$label?></span>
-            </label>
-          <?php } ?>
-        <?php } ?>
+        </label>
+      <?php } ?>
+      <?php } ?>
         <label for="how-much-other" class="inline-radio-label how-much-other-label">
-          <input type="radio" id="how-much-other" name="how-much" value="other" required <?php get_checked($how_much, 'other') ?>>
-          <span class="radio-label-large">Other</span>
+            <input type="radio" id="how-much-other" name="how-much" value="other" required <?php get_checked($how_much, 'other') ?> />
+            <span class="radio-label-large">Other</span>
         </label>
-          <div class="how-much-other-value form__element--vertically-stacked fat-radio-buttons__form-inside">
-            <label for="how-much-other-value__label">Amount</label>
-            <span class="how-much-other-value__currency">£</span>
-            <input type="text" id="how-much-other-value__input" class="how-much-other-value__input" name="how-much-other" value="<?= wp_esc_attr($other_how_much) ?>" required>
-          </div>
-      </div>
-
+    </div>
 
+    <div class="how-much-other-value">
+        <label for="how-much-other-value">Amount</label>
+        <div class="row collapse">
+            <div class="small-3 columns">
+                <span class="prefix">£</span>
+            </div>
+            <div class="small-9 columns">
+                <input type="text" id="how-much-other-value" class="how-much-other-value__input" name="how-much-other" value="<?= wp_esc_attr($other_how_much) ?>" required />
+            </div>
+        </div>
+    </div>
 
-      <div class="form__element donate-giftaid">
+    <div class="donate-giftaid">
         <p>If you are a UK tax payer, the value of your donation can be increased by 25% under the Gift Aid scheme <strong>without costing you a penny more</strong>.</p>
         <label for="gift-aid-yes" class="donate-giftaid__label">
             <input type="checkbox" id="gift-aid-yes" name="gift-aid" value="Yes">
             Yes, I want mySociety to claim Gift Aid on my past, present and future donations
-            <small>I am a UK tax payer and understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations in that tax year, it is my responsibility to pay any difference.  
-                I will let mySociety know of any changes to my tax status, including changes to my name or address, or if I need to cancel this agreement.</small>
+            <small>I am a UK tax payer and understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations in that tax year, it is my responsibility to pay any difference. I will let mySociety know of any changes to my tax status, including changes to my name or address, or if I need to cancel this agreement.</small>
         </label>
-      </div>
+    </div>
 
-      <div class="form__element donate-fullname">
+    <div class="donate-fullname">
         <label for="full-name">Thank you! We need your full first and last name to claim Gift Aid.</label>
-        <input type="text" id="full-name" name="full_name" class="form__element__input" placeholder="Your name here">
-      </div>
+        <input type="text" id="full-name" name="full_name" placeholder="Your name here">
+    </div>
+
+    <p>We&rsquo;d like to thank you for your donation and keep you informed about our work.</p>
 
-      <div class="form__element fat-radio-buttons donate-contact">
-        <p>We&rsquo;d like to thank you for your donation and keep you informed about our work.</p>
+    <div class="fat-radio-buttons donate-contact">
         <label class="inline-radio-label" for="contact-yes">
             <input  type="radio" id="contact-yes" name="contact_permission" value="Yes">
             Yes, you can contact me.
@@ -133,25 +131,25 @@ class="donate-<?=$payment_type?>-amount inline-radio-label"
             <input type="radio" id="contact-no" name="contact_permission" value="No">
             No, you can&rsquo;t contact me.
         </label>
-      </div>
+    </div>
 
-      <div class="form__element form__element--submit">
-        <div id='recaptcha' class="g-recaptcha" data-sitekey="<?=OPTION_RECAPTCHA_SITE_KEY ?>" data-callback="onDonatePass" data-size="invisible"></div>
-        <input type="submit" id="donate_button" value="Donate" class="button button-primary button--large">
-        <div id="spinner" class="mysoc-spinner mysoc-spinner--small" role="status">
-            <span class="sr-only">Processing…</span>
-        </div>
+    <div class="donate-submit">
+      <div id='recaptcha' class="g-recaptcha" data-sitekey="<?=OPTION_RECAPTCHA_SITE_KEY ?>" data-callback="onDonatePass" data-size="invisible"></div>
+      <input type="submit" id="donate_button" value="Donate" class="button button-primary button--large">
+      <div id="spinner" class="mysoc-spinner mysoc-spinner--small" role="status">
+          <span class="sr-only">Processing…</span>
       </div>
-      <small>Payment methods avaliable: Card, PayPal, Apple Pay, Google Pay, Direct Debit</small>
-      <input type="hidden" name="utm_source" value="<?=htmlspecialchars(get_or_default('utm_source', 'theyworkforyou.com')) ?>">
-      <input type="hidden" name="utm_content" value="<?=htmlspecialchars(get_or_default('utm_content')) ?>">
-      <input type="hidden" name="utm_medium" value="<?=htmlspecialchars(get_or_default('utm_medium')) ?>">
-      <input type="hidden" name="utm_campaign" value="<?=htmlspecialchars(get_or_default('utm_campaign', 'twfy_donate_page')) ?>">
-    </form>
-
-</div>
-</div>
+      <p><small>Payment methods avaliable: Card, PayPal, Apple Pay, Google Pay, Direct Debit</small></p>
+    </div>
+
+    <input type="hidden" name="utm_source" value="<?=htmlspecialchars(get_or_default('utm_source', 'theyworkforyou.com')) ?>">
+    <input type="hidden" name="utm_content" value="<?=htmlspecialchars(get_or_default('utm_content')) ?>">
+    <input type="hidden" name="utm_medium" value="<?=htmlspecialchars(get_or_default('utm_medium')) ?>">
+    <input type="hidden" name="utm_campaign" value="<?=htmlspecialchars(get_or_default('utm_campaign', 'twfy_donate_page')) ?>">
+
+</form>
+
 <script src="https://js.stripe.com/v3"></script>
 <script>
 var stripe = Stripe('<?=STRIPE_PUBLIC_KEY ?>');
-</script>
\ No newline at end of file
+</script>