<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Narasimha Jayanti Donation</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.seva-section, .personal-details, .tax-details, .prasadam-option { margin-bottom: 30px; }
h2 { color: #2c3e50; }
label { display: block; margin-top: 10px; }
input[type="text"], input[type="email"], input[type="number"], select {
width: 100%; padding: 8px; margin-top: 5px;
}
.amount-options button {
margin: 5px; padding: 10px 15px; cursor: pointer;
}
.submit-button {
background-color: #27ae60; color: white; padding: 10px 20px;
border: none; cursor: pointer; font-size: 16px;
}
</style>
</head>
<body>
<h1>Offer Your Seva on Narasimha Jayanti</h1>
<form id="donationForm">
<!-- Seva Selection -->
<div class="seva-section">
<h2>Select a Seva</h2>
<label for="seva">Choose Seva:</label>
<select id="seva" name="seva" required>
<option value="">--Select Seva--</option>
<option value="Annadana Seva">Annadana Seva</option>
<option value="Narasimha Yajna">Narasimha Yajna</option>
<option value="Abhisheka Seva">Abhisheka Seva</option>
<option value="Chandana Alankara">Chandana Alankara</option>
<option value="Panakam Seva">Panakam Seva</option>
<option value="Vishesha Naivedya Seva">Vishesha Naivedya Seva</option>
<option value="Vastralankara Seva">Vastralankara Seva</option>
</select>
<label for="amount">Donation Amount (INR):</label>
<div class="amount-options">
<button type="button" onclick="setAmount(500)">₹500</button>
<button type="button" onclick="setAmount(1000)">₹1000</button>
<button type="button" onclick="setAmount(2500)">₹2500</button>
<button type="button" onclick="setAmount(5000)">₹5000</button>
</div>
<input type="number" id="amount" name="amount" min="1" required>
</div>
<!-- Personal Details -->
<div class="personal-details">
<h2>Your Details</h2>
<label for="name">Full Name *</label>
<input type="text" id="name" name="name" required>
<label for="email">Email ID *</label>
<input type="email" id="email" name="email" required>
<label for="mobile">Mobile Number *</label>
<input type="text" id="mobile" name="mobile" required>
<label for="dob">Date of Birth (for Sankalpa and Archana)</label>
<input type="date" id="dob" name="dob">
</div>
<!-- Tax Exemption Details -->
<div class="tax-details">
<h2>Tax Exemption (80G)</h2>
<label>
<input type="checkbox" id="taxExemption" name="taxExemption">
I would like to receive 80G Certificate
</label>
<div id="taxFields" style="display: none;">
<label for="pan">PAN Number *</label>
<input type="text" id="pan" name="pan">
<label for="address">Full Address *</label>
<input type="text" id="address" name="address">
<label for="state">State *</label>
<select id="state" name="state">
<option value="">--Select State--</option>
<option value="Assam">Assam</option>
<option value="Karnataka">Karnataka</option>
<option value="Maharashtra">Maharashtra</option>
<!-- Add other states as needed -->
</select>
<label for="city">City *</label>
<input type="text" id="city" name="city">
<label for="pincode">Pincode *</label>
<input type="text" id="pincode" name="pincode">
</div>
</div>
<!-- Prasadam Option -->
<div class="prasadam-option">
<h2>Maha Prasadam Delivery</h2>
<label>
<input type="checkbox" id="prasadam" name="prasadam">
I would like to receive Maha Prasadam (Only within India)
</label>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-button">Donate Now</button>
</form>
<script>
function setAmount(value) {
document.getElementById('amount').value = value;
}
document.getElementById('taxExemption').addEventListener('change', function() {
const taxFields = document.getElementById('taxFields');
if (this.checked) {
taxFields.style.display = 'block';
// Make tax fields required
document.getElementById('pan').required = true;
document.getElementById('address').required = true;
document.getElementById('state').required = true;
document.getElementById('city').required = true;
document.getElementById('pincode').required = true;
} else {
taxFields.style.display = 'none';
// Remove required attribute
document.getElementById('pan').required = false;
document.getElementById('address').required = false;
document.getElementById('state').required = false;
document.getElementById('city').required = false;
document.getElementById('pincode').required = false;
}
});
document.getElementById('donationForm').addEventListener('submit', function(e) {
e.preventDefault();
// Here, you can handle form submission, e.g., send data to server
alert('Thank you for your donation!');
});
</script>
</body>
</html>
Stay Connected
get all notifications
His Divine Grace A.C. Bhaktivedanta Swami Prabhupada Founder- Acharya of the world wide Hare Krishna Movement