From 394eb6998306a3d14da0ceb160aa6a6aa8f1191f Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Tue, 28 Dec 2021 18:36:08 +0530
Subject: [PATCH] Add submission form (doesn't work yet though)

---
 src/index.htm | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/index.htm b/src/index.htm
index 4011307..5e279cb 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -116,7 +116,7 @@
       <div class="max-w-4xl mx-auto p-10">
         <h1 class="text-center text-2xl font-sans">Donation options</h1>
 
-        <ul class="my-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
+        <ul class="mt-10 mb-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
           <label class="donate-option">
             <input type="radio" name="amount" value="250">
             <li>
@@ -160,6 +160,65 @@
             </li>
           </label>
         </ul>
+
+        <div class="bg-white p-10 rounded-md text-md">
+
+          <div class="my-8">
+            <label for="input-name" class="block text-xl">Name:</label>
+            <input name="name" id="input-name" class="block font-sans text-2xl mb-2 w-full bg-gray-100 p-2 rounded-md" placeholder="Some One" required/>
+            <p>
+              <input type="checkbox" name="anonymous" id="input-anonymous"/>
+              <label for="input-anonymous">Anonymous donation (don't list my name publicly on the website)</label>
+            </p>
+          </div>
+
+          <div class="my-8">
+            <label for="input-contact" class="block text-xl">Email or Phone:</label>
+            <input name="contact" id="input-contact" placeholder="editors@snipettemag.com" class="block font-sans text-2xl mb-2 w-full bg-gray-100 p-2 rounded-md" required/>
+            <label for="input-contact" class="block">We will use this to contact you when it's time to collect the payment</label>
+          </div>
+
+          <div class="my-8">
+            <label for="input-reminder-count" class="block text-xl">How many times should we try to contact you before giving up?</label>
+            <input name="reminder-count" id="input-reminder-count" type="number" value="10" size="3" class="block font-sans text-2xl mb-2 bg-gray-100 p-2 rounded-md" required/>
+            <label for="input-reminder-count" class="block">If we don't manage to collect your payment, we may have to call off the crowdfunding, so please err on the higher side!</label>
+          </div>
+
+          <div class="my-8">
+            <p class="block text-xl">Would you like to receive our weekly newsletter?</p>
+            <div class="inline-block mr-2">
+              <input name="newsletter" value="yes" id="input-newsletter-yes" type="radio" class="text-xl font-sans"/>
+              <label for="input-newsletter-yes" class="text-xl font-sans mr-3">Yes please</label>
+            </div>
+            <div class="inline-block">
+              <input name="newsletter" value="no" id="input-newsletter-no" type="radio" class="text-xl font-sans" checked/>
+              <label for="input-newsletter-no" class="text-xl font-sans">No thanks</label>
+            </div>
+          </div>
+
+          <div class="my-8">
+            <label for="input-message" class="block text-xl">Any other message for us?</label>
+            <textarea name="messages" id="input-message" placeholder="Hi there..." class="block font-sans text-xl mb-2 w-full bg-gray-100 p-2 rounded-md"></textarea>
+            <label for="input-contact" class="block">You can also email us later at <a href="mailto:editors@snipettemag.com">editors@snipettemag.com</a></label>
+          </div>
+
+          <div class="my-5">
+            <p class="block text-xl">Are you a robot?</p>
+            <div class="inline-block mr-2">
+              <input name="robo" value="yes" id="input-robo-yes" type="radio" class="text-xl font-sans" checked/>
+              <label for="input-robo-yes" class="text-xl font-sans">Yup, how did you know?</label>
+            </div>
+            <div class="inline-block">
+              <input name="robo" value="no" id="input-robo-no" type="radio" class="text-xl font-sans"/>
+              <label for="input-robo-no" class="text-xl font-sans">No, of course not</label>
+            </div>
+          </div>
+        </div>
+
+        <button class="bg-green-500 my-5 w-full p-5 text-xl uppercase font-sans rounded-md">
+          Save Pledge
+        </button>
+
       </div>
     </div>