File: /var/www/html/Siyum/wp-content/themes/siyum/page-siyum-registration.php
<?php /* Template Name: Siyum Registration Page */
$target = new DateTime('2027-06-06', new DateTimeZone('America/New_York'));
$now = new DateTime('now', new DateTimeZone('America/New_York'));
$interval = $now->diff($target);
$days_remaining = max(0, $interval->days);
get_header();
?>
<div class="siyum-banner">
<div class="container custom-container">
<div class="overlay"></div>
<div class="banner-content">
<div class="left-sec">
<div class="sub-title"><span id="blatt-counter" data-target="<?php echo $days_remaining; ?>">0</span> Blatt till</div>
<div class="main-title">Klal Yisroel <br> Dances Together</div>
<div class="logo-img"><img src="<?php echo get_template_directory_uri(); ?>/img/logo-new.svg" alt="The Siyum" /></div>
</div>
<div class="right-sec">
<div class="rt-title">METLIFE STADIUM</div>
<div class="txt">בע״ה</div>
<div class="content">June 6, 2027 <span class="elemtn-img"><img src="<?php echo get_template_directory_uri(); ?>/img/elment.svg" alt="elment"></span> Rosh Chodesh Sivan 5787</div>
</div>
</div>
</div>
<a id="scroll-tab" class="scroll-down-btn1" data-target="#next-section">
<span> <img src="<?php echo get_template_directory_uri(); ?>/img/down-arrow-siyum.svg" alt="down-arrow-siyum"></span><br>
<span class="arrow">scroll down </span>
</a>
</div>
<section class="book-form book-form-banner" id="next-section">
<div class="container custom-container" >
<div class="second-sec">
<div class="sub-content">Daf Yomi Lomdim and Shiurim: Register Now!</div>
<div class="main-content">Individual lomdim and Daf Yomi shiurim please register<br> so you can be recognized at The Siyum.</div>
</div>
<div id="myTab" role="tablist" class="tab-sec">
<div class="btn-sec">
<a class=" btn-register active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
Register as a Shiur
</a>
</div>
<div class="btn-sec">
<a class=" btn-register" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Register as a Lomed</a>
<!-- <a href="" class="btn btn-register">Register at TheSiyum.org</a> -->
</div>
</div>
<div class="tab-content" id="myTabContent">
<!-- Form 1 -->
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<div class="form-section px-4">
<div class="form-content">
<h2 class="title">Register as a Shiur</h2>
</div>
<form id="shiurForm" data-parsley-validate="" novalidate="">
<div class="row">
<div class="col-md-6">
<label for="" class="label-text">Shiur Name</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Shiur Name" data-parsley-length-message="Shiur name must be between 2 and 100 characters." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')">
</div>
<div class="col-md-6">
<label for="" class="label-text">Shiur Location*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Shiur Location*" required="" data-parsley-required-message="Shiur location is required." data-parsley-length-message="Shiur location must be between 2 and 100 characters.">
</div>
<div class="col-md-12">
<label for="" class="label-text">Shiur Address*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Shiur Address*" required="" data-parsley-required-message="Shiur address is required." data-parsley-length-message="Shiur address must be between 2 and 100 characters.">
</div>
<div class="col-md-4 mb-3 mb-md-0">
<label for="" class="label-text">City*</label>
<input type="text" class="form-control" minlength="2" maxlength="50" placeholder="City*" name="city" required="" data-parsley-required-message="City is required.">
</div>
<div class="col-md-4 mb-3 mb-md-0">
<label for="" class="label-text">State*</label>
<select class="form-select custom-select-arrow form-control" name="state" required="" data-parsley-required-message="State is required.">
<option value="">State*</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col-md-4">
<label for="" class="label-text">Zip*</label>
<input type="text" class="form-control" inputmode="numeric" minlength="2" maxlength="8" placeholder="Zip*" name="zip" required="" data-parsley-pattern="^\d{5}$" data-parsley-required-message="Zip is required." data-parsley-pattern-message="Zip code must be 5 digits">
</div>
<div class="col-md-4">
<label for="" class="label-text">Email*</label>
<input type="email" class="form-control" minlength="2" maxlength="100" placeholder="Email*" required="" data-parsley-required-message="Email is required." data-parsley-type-message="Enter a valid email address.">
</div>
<div class="col-md-4">
<label for="" class="label-text">Website</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Website" data-parsley-length-message="Website must be between 2 and 100 characters.">
</div>
<div class="col-md-4">
<label for="" class="label-text">Maggid Shiur Name*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Maggid Shiur Name*" required="" data-parsley-required-message="Maggid shiur name is required." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="Maggid shiur name must be between 2 and 100 characters.">
</div>
<div class="col-md-6">
<label for="" class="label-text">Contact Name*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Contact Name*" required="" data-parsley-required-message="Contact name is required." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="Contact name must be between 2 and 100 characters.">
</div>
<div class="col-md-6">
<label for="" class="label-text">Contact Address*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Contact Address*" required="" data-parsley-required-message="Contact adress is required." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="Contact address must be between 2 and 100 characters.">
</div><div class="col-md-6">
<label for="" class="label-text">Contact Email*</label>
<input type="email" class="form-control" minlength="2" maxlength="100" placeholder="Contact Email*" required="" data-parsley-required-message="Contact email is required." data-parsley-type-message="Enter a valid email address.">
</div>
<div class="col-md-6">
<label for="" class="label-text">Contact Phone*</label>
<input type="tel" class="form-control" minlength="2" maxlength="10" placeholder="Contact Phone*" data-parsley-pattern="^\d{10}$" required="" data-parsley-required-message="Contact phone is required." data-parsley-pattern-message="Phone number must be 10 digits" inputmode="numeric">
</div>
<div class="col-md-6">
<label for="" class="label-text">How many cycles of Daf Yomi has your Shiur completed?*</label>
<input type="text" class="form-control" minlength="1" maxlength="4" placeholder="How many cycles of Daf Yomi has your Shiur completed?*" required="" data-parsley-required-message="Number of completed Daf Yomi cycles is required." inputmode="numeric" data-parsley-length-message="Number of completed Daf Yomi cycles must be between 2 and 10 characters.">
</div>
<div class="col-md-6">
<label for="" class="label-text">How many participants are in your Shiur?*</label>
<input type="text" class="form-control" minlength="1" maxlength="10" placeholder="How many participants are in your Shiur?*" required="" data-parsley-required-message="Number of participants is required." inputmode="numeric" data-parsley-length-message="Number of participants must be between 2 and 10 characters.">
</div>
<div class="col-md-12">
<label for="" class="label-text">Your Daf Story</label>
<textarea class="form-control" name="dafStory" rows="5" minlength="10" maxlength="250" placeholder="Tell us your Daf story" data-parsley-length-message="Daf story must be between 10 and 250 characters." style="height: 150px;"></textarea>
</div>
</div>
<div class="btn-sec mt-4 pt-1">
<!-- <a href="#" type="" class="btn back">General Contract</a> -->
<button type="submit" class="btn order-now">Register</button>
</div>
</form>
</div>
<div id="shiur-form-message" class="mt-3" style="text-align: center;"></div>
</div>
<!-- Form 2 -->
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<div class="form-section px-4">
<div class="form-content">
<h2 class="title">Register as a Lomed</h2>
</div>
<form id="lomedForm" data-parsley-validate>
<div class="row">
<div class="col-md-2">
<label for="" class="label-text">Title*</label>
<select class="form-select custom-select-arrow form-control" required="" data-parsley-required-message="Title is required." placeholder="Name*">
<option value="" disabled="" selected="">Title*</option>
<option value="Mr.">Mr.</option>
<option value="Rabbi">Rabbi</option>
<option value="Dr.">Dr.</option>
</select>
</div>
<div class="col-md-3">
<label for="" class="label-text">First Name*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="First Name*" required="" data-parsley-required-message="First name is required." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="First name must be between 2 and 100 characters.">
</div>
<div class="col-md-3">
<label for="" class="label-text">Last Name*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Last Name*" required="" data-parsley-required-message="Last name is required." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="LAst name must be between 2 and 100 characters.">
</div><div class="col-md-4">
<label for="" class="label-text">Spouse's Name*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Spouse's Name*" required="" data-parsley-required-message="Spouse's name is required." oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="Spouse's name must be between 2 and 100 characters.">
</div>
<div class="col-md-12">
<label for="" class="label-text">Address*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Address*" required data-parsley-required-message="Address is required." data-parsley-length-message="Address must be between 2 and 100 characters.">
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<label for="" class="label-text">City*</label>
<input type="text" class="form-control" minlength="2" maxlength="50" placeholder="City*" name="city" required="" data-parsley-required-message="City is required.">
</div>
<div class="col-md-4 mb-3 mb-md-0">
<label for="" class="label-text">State*</label>
<select class="form-select custom-select-arrow form-control" name="state" required="" data-parsley-required-message="State is required.">
<option value="">State*</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col-md-4">
<label for="" class="label-text">Zip*</label>
<input type="text" class="form-control" inputmode="numeric" minlength="2" maxlength="8" placeholder="Zip*" name="zip" required="" data-parsley-pattern="^\d{5}$" data-parsley-required-message="Zip is required." data-parsley-pattern-message="Zip code must be 5 digits">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="" class="label-text">Email*</label>
<input type="email" class="form-control" minlength="2" maxlength="100" placeholder="Email*" required data-parsley-required-message="Email is required." data-parsley-type-message="Enter a valid email address.">
</div>
<div class="col-md-6">
<label for="" class="label-text">Phone*</label>
<input type="tel" class="form-control" minlength="2" maxlength="10" placeholder="Phone*" data-parsley-pattern="^\d{10}$" required data-parsley-required-message="Phone number is required." inputmode="numeric" data-parsley-pattern-message="Phone number must be 10 digits">
</div>
</div>
<div class="col-lg-12" >
<label for="" class="label-text">How many cycles of Daf Yomi have you completed?*</label>
<input type="text" class="form-control" minlength="1" maxlength="4" placeholder="How many cycles of Daf Yomi have you completed?*" required data-parsley-required-message="Number of completed Daf Yomi cycles is required." inputmode="numeric" data-parsley-length-message="Number of completed Daf Yomi cycles must be between 1 and 4 digits">
</div>
<div class="col-lg-12">
<label class="form-label label-text-radio label-text">I learn</label>
<div class="form-radio-cover" data-parsley-errors-container="#radio-error">
<div class="form-check">
<input class="form-check-input" type="radio" name="learningMethod" id="onMyOwn" value="own" required data-parsley-required-message="'I learn' selection is required.">
<label class="form-check-label" for="onMyOwn">On my own</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="learningMethod" id="withChavrusa" value="chavrusa">
<label class="form-check-label" for="withChavrusa">With a Chavrusa</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="learningMethod" id="partOfShiur" value="shiur">
<label class="form-check-label" for="partOfShiur">As part of a Shiur</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="learningMethod" id="virtualShiur" value="virtual">
<label class="form-check-label" for="virtualShiur">With a virtual Shiur</label>
</div>
<div id="radio-error" class="text-danger"></div>
</div>
</div>
<!-- Conditional Fields -->
<div class="row">
<div class="col-md-6 conditional-field" style="display:none;">
<label for="" class="label-text">Shiur Name</label>
<input type="text" name="shiurName" minlength="2" maxlength="100" class="form-control" placeholder="Shiur Name" oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="Shiur name must be between 2 and 100 characters.">
</div>
<div class="col-md-6 conditional-field" style="display:none;">
<label for="" class="label-text">Maggid Shiur*</label>
<input type="text" name="maggidShiur" minlength="2" maxlength="100" class="form-control" placeholder="Maggid Shiur*" oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" required data-parsley-required-message="Maggid Shiur name is required." data-parsley-length-message="Maggid shiur must be between 2 and 100 characters.">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="" class="label-text">My Daf Story</label>
<textarea class="form-control" name="dafStory" minlength="10" maxlength="250" placeholder="Tell us your Daf story" data-parsley-length-message="Daf story must be between 10 and 250 characters." style="height: 150px;"></textarea>
</div>
</div>
<div class="btn-sec mt-4 pt-1">
<!-- <p class="general-contract-p"><a href="#">General Contract</a></p> -->
<button type="submit" class="btn order-now">Register</button>
</div>
</form>
</div>
<div id="lomed-form-message" class="mt-3" style="text-align: center;"></div>
</div>
</div>
</div>
</section>
<!-- <div class="general-btn-block">
<a class="general-btn" href="#">General Contract</a>
</div> -->
<section class="video-section" id="video">
<div class="container custom-container">
<h2 class="video-title">Relive the Inspiration</h2>
<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/494455265?autoplay=0&muted=0&loop=0&title=0&byline=0&portrait=0"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</section>
<?php get_footer(); ?>