snipette/snipette-crowdfunding-site
snipette/snipette-crowdfunding-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add submission form (doesn't work yet though)

Browse source
This commit is contained in:
Hippo 2021-12-28 18:36:08 +05:30
parent 410d7dd828
commit 394eb69983
1 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/index.htm
View file

@ -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>