File: /var/www/html/WPYadBatya/wp-content/themes/yad-batya/page-sponsor-a-kallah.php
<?php /* Template Name: Sponsor a kallah Page */
get_header();
?>
<section class="banner-space-wrap">
<div class="banner-patter-1 sponsor">
<div class="container custom-container">
<div class="content-wrap">
<h1 class="title">Sponsor a <span>Kallah</span></h1>
</div>
</div>
</div>
</section>
<section class="form-section">
<form id="donationForm" data-parsley-validate>
<div class="form-wrap">
<img src="<?php echo get_template_directory_uri(); ?>/img/get-img-1.png" class="flower1" alt="">
<img src="<?php echo get_template_directory_uri(); ?>/img/get-img-2.png" class="flower2" alt="">
<div class="form-container">
<div class="content-head">
<p class="para">
Sponsor a Kallah in honor of your simcha, in memory of a loved one, or in the
z’chus for a refuah shlaima. If you would like to sponsor a Kallah on a specific date, please let us
know. All donations go straight to the cause as we have no paid staff. Thank you.
</p>
<h2 class="title">Personal <span>Information</span></h2>
</div>
<div class="outer-row">
<div class="form-inp row">
<div class="col-md-6">
<div class="input-wrap">
<label for="fname" class="label-text">First Name <span class="red">*</span></label>
<input type="text" class="text" id="fname" placeholder="Enter your first name"
required data-parsley-trigger="blur" data-parsley-error-message="Please enter your first name.">
</div>
</div>
<div class="col-md-6">
<div class="input-wrap">
<label for="lname" class="label-text">Last Name <span class="red">*</span></label>
<input type="text" class="text" id="lname" placeholder="Enter your last name"
required data-parsley-trigger="blur" data-parsley-error-message="Please enter your last name.">
</div>
</div>
</div>
<div class="form-inp row">
<div class="col-md-12">
<div class="input-wrap location">
<label for="location" class="label-text">Location/Address <span class="red">*</span></label>
<div class="location-input-wrap">
<input type="text" class="text" id="location" placeholder="Enter your location/address"
required data-parsley-trigger="blur" data-parsley-error-message="Please enter your address.">
</div>
</div>
</div>
</div>
<div class="form-inp row">
<div class="col-md-4">
<div class="input-wrap">
<label for="city" class="label-text">City <span class="red">*</span></label>
<input type="text" class="text" id="city" placeholder="Enter your city"
required data-parsley-trigger="blur" data-parsley-error-message="Please enter your city.">
</div>
</div>
<div class="col-md-4">
<div class="input-wrap">
<label for="state" class="label-text">State <span class="red">*</span></label>
<input type="text" class="text" id="state" placeholder="Enter your state"
required data-parsley-trigger="blur" name="state" data-parsley-error-message="Please enter your state.">
</div>
</div>
<div class="col-md-4">
<div class="input-wrap">
<label for="zip" class="label-text">Zip Code <span class="red">*</span></label>
<input type="text" class="text" id="zip" placeholder="Enter your zip code"
required pattern="\d{5}" maxlength="5"
oninput="this.value = this.value.replace(/\D/g, '')"
data-parsley-type="digits" data-parsley-length="[5,5]"
data-parsley-trigger="blur" data-parsley-error-message="Please enter a valid 5-digit ZIP code.">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="donation-wrap">
<div class="container custom-container">
<div class="content-wrap">
<div class="donation-head">
<h2 class="title">Donation <span>Information</span></h2>
<p class="para">Yad Batya L'Kallah is a non-profit 501c3 organization. All donations are tax-deductible.
</p>
</div>
<div class="donation-text">
<p class="para"><span>Donate Amount </span><span class="red">*</span> (please enter numerals only, no commas OR Click
amount below!)
</p>
<div class="input-wrap">
<input type="text" class="text flexRadioDefault" id="donationAmount" placeholder="Enter Amount">
</div>
</div>
<div class="amount-outer-wrap">
<div class="amount-row">
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="3600" class="flexRadioDefault" id="flexRadioDefault1">
<label class="label" for="flexRadioDefault1">
<div class="count">1500</div>
<div class="letter">Full Package</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="2500" class="flexRadioDefault" id="flexRadioDefault2">
<label class="label" for="flexRadioDefault2">
<div class="count">800</div>
<div class="letter">Kitchen Essentials</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="1300" class="flexRadioDefault" id="flexRadioDefault3">
<label class="label" for="flexRadioDefault3">
<div class="count">500</div>
<div class="letter">Bed & Bath Needs</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="750" class="flexRadioDefault" id="flexRadioDefault4">
<label class="label" for="flexRadioDefault4">
<div class="count">200</div>
<div class="letter">Gift Certificate</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="600" class="flexRadioDefault" id="flexRadioDefault5">
<label class="label" for="flexRadioDefault5">
<div class="count">500</div>
<div class="letter">Kallah In Yerushalayim</div>
</label>
</div>
</div>
<!-- <div class="amount-row">
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="400" class="flexRadioDefault" id="flexRadioDefault7">
<label class="label" for="flexRadioDefault7">
<div class="count">400</div>
<div class="letter">Kallah in Israel</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="360" class="flexRadioDefault" id="flexRadioDefault8">
<label class="label" for="flexRadioDefault8">
<div class="count">360</div>
<div class="letter">Chai x Twenty</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="200" class="flexRadioDefault" id="flexRadioDefault9">
<label class="label" for="flexRadioDefault9">
<div class="count">200</div>
<div class="letter">Kallah's Gift Certifi..</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="180" class="flexRadioDefault" id="flexRadioDefault10">
<label class="label" for="flexRadioDefault10">
<div class="count">180</div>
<div class="letter">Chai x Ten</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="100" class="flexRadioDefault" id="flexRadioDefault11">
<label class="label" for="flexRadioDefault11">
<div class="count">100</div>
<div class="letter">One Hundred - One ..</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="72" class="flexRadioDefault" id="flexRadioDefault12">
<label class="label" for="flexRadioDefault12">
<div class="count">72</div>
<div class="letter">Chai x Four</div>
</label>
</div>
</div>
<div class="amount-row">
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="50" class="flexRadioDefault" id="flexRadioDefault13">
<label class="label" for="flexRadioDefault13">
<div class="count">50</div>
<div class="letter">Fifty</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="36" class="flexRadioDefault" id="flexRadioDefault14">
<label class="label" for="flexRadioDefault14">
<div class="count">36</div>
<div class="letter">Chai x Two</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="25" class="flexRadioDefault" id="flexRadioDefault15">
<label class="label" for="flexRadioDefault15">
<div class="count">25</div>
<div class="letter">Twenty Five</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="18" class="flexRadioDefault" id="flexRadioDefault16">
<label class="label" for="flexRadioDefault16">
<div class="count">18</div>
<div class="letter">Chai</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="10" class="flexRadioDefault" id="flexRadioDefault17">
<label class="label" for="flexRadioDefault17">
<div class="count">10</div>
<div class="letter">Ten</div>
</label>
</div>
<div class="amount-wrap">
<input class="input" type="radio" name="flexRadioDefault" value="5" class="flexRadioDefault" id="flexRadioDefault18">
<label class="label" for="flexRadioDefault18">
<div class="count">05</div>
<div class="letter">Five</div>
</label>
</div>
</div> -->
<span id="amountError" style="display: none;">Please enter or select a valid donation amount.</span>
</div>
</div>
</div>
</div>
<div class="form-wrap second-form-wrap">
<div class="form-container">
<div class="content-head">
<h2 class="title">Gift <span>Information</span></h2>
<div class="radio-align-wrap">
<div class="txt">Type of Gift: </div>
<div class="radio-row">
<div class="radio-col">
<input type="radio" class="checkbox donation_frequency" value="once" name="options" id="option1" checked required data-parsley-required="true">
<label class="label" for="option1">One-Time Gift</label>
</div>
<div class="radio-col">
<input type="radio" class="checkbox donation_frequency" value="monthly" name="options" id="option2" required data-parsley-required="true">
<label class="label" for="option2">Monthly Payments</label>
</div>
</div>
</div>
</div>
<div class="outer-row">
<div class="form-inp row">
<div class="col-md-6">
<div class="input-wrap">
<label for="cnum" class="label-text">Card Number <span class="red">*</span></label>
<input type="text" class="text" name="card_number" id="card_number" placeholder="Enter your card number" required data-parsley-required="true" data-parsley-type="digits" data-parsley-minlength="13" data-parsley-maxlength="19" data-parsley-error-message="Please enter a valid card number (13-19 digits).">
</div>
</div>
<div class="col-md-6">
<div class="input-wrap">
<label for="ncard" class="label-text">Name on Card <span class="red">*</span></label>
<input type="text" class="text" id="ncard" placeholder="Enter your name on card" required data-parsley-required="true" data-parsley-error-message="Please enter the name as it appears on the card.">
</div>
</div>
</div>
<div class="form-inp row">
<div class="col-md-4">
<div class="input-wrap">
<label for="exp" class="label-text">Expires <span class="red">*</span></label>
<div class="select-wrap">
<select class="select" name="month" id="months" required data-parsley-required="true" data-parsley-error-message="Please select the expiration month.">
<option value="" selected>Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<span id="monthyear" style="display: none;">Expiration date cannot be in the past.</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-wrap">
<label for="lname" class="label-text mob-none"> </label>
<div class="select-wrap">
<select class="select" name="year" id="exp_date" required data-parsley-required="true" data-parsley-error-message="Please select the expiration year.">
<option selected disabled>Year</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-wrap">
<label for="cvv" class="label-text">CVV <span class="red">*</span></label>
<input type="password" class="text" minlength="3" id="cvv" maxlength="4" id="cvv" placeholder="****" required data-parsley-required="true" data-parsley-minlength="3" data-parsley-maxlength="4" data-parsley-type="digits" data-parsley-error-message="Please enter a valid CVV (3-4 digits).">
</div>
</div>
</div>
<div class="form-inp row">
<div class="col-md-12">
<div class="radio-align-wrap twice">
<div class="txt">Is this a donation towards History-a-thon?</div>
<div class="radio-row">
<div class="radio-col">
<input type="radio" class="checkbox" name="history" id="history1" checked required data-parsley-required="true">
<label class="label" for="history1">Yes</label>
</div>
<div class="radio-col">
<input type="radio" class="checkbox" name="history" id="history2" required data-parsley-required="true">
<label class="label" for="history2">No</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-inp row">
<div class="col-md-12">
<div class="input-wrap comments">
<label for="comments" class="label-text">Comments / In honor of / Historython Name <span class="red">*</span></label>
<textarea name="" class="text" id="comments" placeholder="Enter your comments" required data-parsley-required="true" data-parsley-error-message="Please provide a comment."></textarea>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="captcha-btn-wrap">
<div class="captcha">
<div class="g-recaptcha" data-sitekey="6LezEMsqAAAAAE43laj7lUFiTItE693JxCoyMkJW" data-callback="verifyRecaptcha"></div>
<div id="captcha-message" style="display:none;">Please complete the CAPTCHA</div>
<input type="hidden" id="captcha-response" name="captcha-response" required
data-parsley-required="true" data-parsley-error-message="Please complete the CAPTCHA">
</div>
<div class="btn-wrap">
<button type="submit" class="btn" id="sponserbtn">
<span>Submit</span>
<img src="<?php echo get_template_directory_uri(); ?>/img/arrow-right.svg" class="img">
</button>
</div>
</div>
</div>
<div id="form-message"></div>
</div>
</div>
</div>
</form>
<script>
jQuery(document).ready(function($) {
var isCaptchaVerified = false; // Track CAPTCHA status
// Function to be called when CAPTCHA is successfully completed
window.verifyRecaptcha = function() {
isCaptchaVerified = true;
$('#captcha-message').hide(); // Hide error message when CAPTCHA is verified
};
});
</script>
</section>
<div class="partner-wrap">
<div class="container custom-container">
<div class="head-wrap">
<div class="tag full-bg"><img src="<?php echo get_template_directory_uri(); ?>/img/hand-flower-2.png" class="img" /> <span>Clients</span></div>
<h2 class="title">Our <span>Partners</span></h2>
<p class="para">Yad Batya L’Kallah aims to give our kallahs the very best quality in home goods that will last a lifetime.
</p>
</div>
<div class="logo-wrap">
<div class="our-partner">
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-1.png" alt="">
</figure>
</div>
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-2.png" alt="">
</figure>
</div>
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-3.png" alt="">
</figure>
</div>
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-4.png" alt="">
</figure>
</div>
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-5.png" alt="">
</figure>
</div>
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-6.png" alt="">
</figure>
</div>
<div>
<figure class="img">
<img src="<?php echo get_template_directory_uri(); ?>/img/p-logo-7.png" alt="">
</figure>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>