information-system/application/views/mobile_first/ah-info-page-form.php

<div class="tmbottom">
    <h3 style="text-align: center;    font-size: 20px;    line-height: 22px;">For a quick conversation, simply reach us via WhatsApp:</h3>
    
    <div class="contactwechat"><img alt="asia highlights' wechat code" height="100px" src="https://data.globalhighlights.com/image/aboutus/gh-whatsapp-qr-code.webp" width="100px" />
    <div class="wechatinfo"><span class="wechatred">+86 15807734776</span><br />
    Email: <span class="wechatred">contact@asiahighlights.com</span></div>
    </div>
    
    <h3 style="text-align: center;    font-size: 20px;    line-height: 22px;">Start planning your tailor-made tour now. Your 1:1 travel consultant will reply within 1 working day.</h3>
    
    <form action="/orders/quick_inquiry_save" method="post" novalidate="" onsubmit="return validateQuickInquiryForm()">
    <input class="FullName" id="realname" name="name" placeholder="Your name" required="" type="text" value="" />
    <div id="realname_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please enter your name</div>
    </div>
    <input class="EmailAddress" id="email" name="email" placeholder="Email" required="" type="text" value="" />
    <div id="email_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please enter your email</div>
    </div>
    
    <div id="email_verify_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please verify your email</div>
    </div>
    <input class="InquiryCalendar" id="starting_date" name="starting_date" placeholder="Starting date" readonly="readonly" />
    <div id="starting_date_errmsg" style="display: none">
    <div class="requiredArea" style="margin-top:-10px;">Please enter your starting date</div>
    </div>
    <input class="Inquiryphone" id="PhoneNo" name="PhoneNo" placeholder="Any other way to reach you (optional)" type="tel" value="" /><textarea id="form_additionalrequirements" name="form_additionalrequirements" placeholder="Tell us your travel requirements here: anniversary, honeymoon, family trip, birthday travel, beach, food..." style="height:100px;"></textarea>
    <button class="sendButton" id="submit_booking_form_inquiry" name="booking_form_inquiry_list" type="submit">Inquire Now</button> <input name="cli_no" type="hidden" value="YDFW-AH"/> 
    <input name="ic_title" type="hidden" value="YDFW-AH" />
</form>
    </div>

<script src="https://data.chinahighlights.com/js/flatpickr-4.6.1.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    flatpickr("#starting_date", {
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        disableMobile: true,
        minDate: "today"
    });
});

function validateQuickInquiryForm() {
    var result = true;
    var realnameVal = document.getElementById("realname").value;
    var emailVal = document.getElementById("email").value;
    var startingDateVal = document.getElementById("starting_date").value;

    var realnameErrEl = document.getElementById("realname_errmsg");
    var emailErrEl = document.getElementById("email_errmsg");
    var emailVerifyErrEl = document.getElementById("email_verify_errmsg");
    var startingDateErrEl = document.getElementById("starting_date_errmsg");

    realnameErrEl.style.display = 'none';
    emailErrEl.style.display = 'none';
    emailVerifyErrEl.style.display = 'none';
    startingDateErrEl.style.display = 'none';

    if (realnameVal === '') {
        realnameErrEl.style.display = '';
        result = false;
    }
    if (emailVal === '') {
        emailErrEl.style.display = '';
        result = false;
    } else {
        var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
        if (!emailPattern.test(emailVal)) {
            emailVerifyErrEl.style.display = '';
            result = false;
        }
    }
    if (startingDateVal === '') {
        startingDateErrEl.style.display = '';
        result = false;
    }
    return result;
}
</script>