Rewrite for better state handling

fund-us/css/index.css

@@ -58,7 +58,7 @@ input[name="donationAmount"]
 	height: 0;
 }
 
-#donationForm, #progressIndicator, #thankYouMessage, #errorMessage
+#patronageForm, #progressIndicator, #thankYouMessage, #errorMessage
 {
 	margin-left: auto;
 	margin-right: auto;
@@ -77,7 +77,7 @@ input[name="donationAmount"]
 
 
 
-.donationForm
+.patronageForm
 {
 	padding: 10px;
 	width: 300px;
@@ -93,7 +93,7 @@ input[name="donationAmount"]
 }
 
 @media only screen and (min-width: 380px) {
-	.donationForm {
+	.patronageForm {
 		padding: 10px;
 		width: 358px;
 	}
@@ -248,6 +248,7 @@ input[name="donationAmount"] + label
 	line-height: 30px;
 	padding: 0;
 	-webkit-appearance: none;
+	opacity: 0.5;
 }
 
 @media only screen and (min-width: 380px) {
@@ -259,7 +260,7 @@ input[name="donationAmount"] + label
 	}
 }
 
-#donateButton
+#submitButton
 {
 	font-size: 16px;
 	margin-top: 4px;
@@ -274,13 +275,13 @@ input[name="donationAmount"] + label
 	background-color: #E3F9A8;
 }
 
-#donateButton:hover
+#submitButton:hover
 {
 	background-color: #CBE89B;
 	/* border: 2px solid #A4C776; */
 }
 
-#donateButton:disabled
+#submitButton:disabled
 {
 	color: #ccc;
 	background-color: #eee;
@@ -288,7 +289,7 @@ input[name="donationAmount"] + label
 }
 
 @media only screen and (min-width: 380px) {
-	#donateButton
+	#submitButton
 	{
 		font-size: 20px;
 	}

fund-us/index.html

@@ -30,7 +30,7 @@
       </div>
 
       <!-- Donation form -->
-      <div id='donationForm' class='donationForm'>
+      <form id='patronageForm' class='patronageForm'>
 
         <fieldset>
           <legend class='hidden'>Type of donation</legend>
@@ -51,12 +51,12 @@
           <input type='radio' name='donationAmount' value='50' class='hidden selectButton' id='tier6'><label class='donationTierButtonLabel unselectable' for='tier6'>€50</label>
           <input type='radio' name='donationAmount' value='100' class='hidden selectButton' id='tier7'><label class='donationTierButtonLabel unselectable' for='tier7'>€100</label>
           <!-- Unfortunately can’t use an input type='number' here because the events are not fired consistently across major browsers. -->
-          <input type='radio' name='donationAmount' value='0' class='hidden' id='tier8'><label class='donationTierButtonLabel unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='text' title='Custom donation amount'></input></label>
+          <input type='radio' name='donationAmount' value='-1' class='hidden selectButton' id='tier8'><label class='donationTierButtonLabel unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='string' pattern='[0-9]{1,6}' title='Custom donation amount'></input></label>
         </fieldset>
 
-        <button id='donateButton'>Become a patron</button>
+        <button type='submit' id='submitButton'>Become a patron</button>
         <small class='donation-currency'>Donations are in <a href='https://transferwise.com/gb/currency-converter/currencies/eur-euro'>Euros</a></small>
-      </div> <!-- end of donation form -->
+      </form> <!-- end of donation form -->
 
   <script src='https://js.stripe.com/v3/'></script>
   <script src='js/index.js'></script>