File: /var/www/html/Siyum_old/wp-content/themes/siyum-old/page-siyum-registration.php
<?php /* Template Name: Siyum Registration Page */
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">755 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 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 class="btn-sec">
<a class="btn btn-register" id="register-tab" type="button" data-target="#next-section">
Register
</a>
</div>
<div class="hebrew-text">ובאו כלם בברית יחד נעשה ונשמע אמרו כאחד</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 id="myTab" role="tablist" class="tab-sec">
<div class="btn-sec">
<a class=" btn-register" 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>
<!-- <a href="" class="btn btn-register">Register at TheSiyum.org</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 form:</h2>
</div>
<form id="shiurForm" data-parsley-validate>
<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*" required data-parsley-required-message="Shiur name is required." data-parsley-length-message="Shiur name must be between 2 and 100 characters." oninput="this.value = this.value.replace(/[^A-Za-z'-]/g, '')">
</div>
<div class="col-md-6">
<label for="" class="label-text">Location*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Location*" required data-parsley-required-message="Location is required." data-parsley-length-message="Location 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 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." data-parsley-pattern-message="Phone number must be 10 digits" inputmode="numeric">
</div>
<div class="col-md-6">
<label for="" class="label-text">Website*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Website*" required data-parsley-required-message="Website is required." data-parsley-length-message="Website must be between 2 and 100 characters.">
</div>
<div class="col-md-6">
<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'-]/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'-]/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 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="2" maxlength="10" 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="2" 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>
<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>
<!-- 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 form:</h2>
</div>
<form id="lomedForm" data-parsley-validate>
<div class="row">
<div class="col-md-4">
<label for="" class="label-text">Title*</label>
<select class="form-select custom-select-arrow" required data-parsley-required-message="Title is required." placeholder="Name*">
<option value="" disabled selected>Title*</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Rabbi">Rabbi</option>
<option value="Rev.">Rev.</option>
</select>
</div>
<div class="col-md-4">
<label for="" class="label-text">Name*</label>
<input type="text" class="form-control" minlength="2" maxlength="100" placeholder="Name*" required data-parsley-required-message="Name is required." oninput="this.value = this.value.replace(/[^A-Za-z'-]/g, '')" data-parsley-length-message="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'-]/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 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 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="2" maxlength="10" 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 2 and 10 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="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'-]/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'-]/g, '')" data-parsley-length-message="Maggid shiur must be between 2 and 100 characters.">
</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>
</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(); ?>