<style></style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Function Payment Form</title>
<style>
.ai-form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.ai-form-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.ai-form-input {
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.ai-form-button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  width: 100%;
  cursor: pointer;
}

.ai-form-button:hover {
  background-color: #0056b3;
}

.ai-form-amount {
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
}
</style>


<div class="ai-form-container">
<h2 class="ai-form-title">School Function Payment Form</h2>
<form id="paymentForm">
<input class="ai-form-input" type="text" placeholder="Full Name" id="fullName" required="">
<input class="ai-form-input" type="email" placeholder="Email Address" id="email" required="">
<input class="ai-form-input" type="tel" placeholder="Phone Number" id="phone" required="">
<input class="ai-form-amount" type="number" placeholder="Amount to Pay" id="total_amount" required="">
<button class="ai-form-button" type="submit">Submit Payment</button>
</form>
</div>
<script>
document.getElementById("paymentForm").addEventListener("submit", function(event) {
  event.preventDefault();
  
  // Here you can add the logic to handle the payment submission
  
  alert("Payment submitted successfully!");
});
</script>