<div class="modal-header"> <h2>Contact: <span></span></h2> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <span id="contactServiceData"></span> <form id="frm-contact-agency" method="get" role="form"> <fieldset class="p-2"> <input type="hidden" id="contactProgramId" value="{{"> <input type="hidden" id="contactProgramUrl" value="https://aging.networkofcare.org/denverregion-co/Services/Agency/?pid={{"> <input type="hidden" id="contactProgramName"> <input type="hidden" id="contactProgramEmail"> <div class="row mb-4"> <div class="col-xs-12"> <label class="required" for="contactYourBestReach">Who is this for?</label> <div class="ms-5"> <div class="form-check form-check-inline"> <input class="form-check-input" id="contactForType1" type="radio" name="contactForType" value="myself" checked="checked"> <label class="form-check-label" for="contactForType1">For myself or my family</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" id="contactForType2" type="radio" name="contactForType" value="someone else"> <label class="form-check-label" for="contactForType2"> I'm referring someone else</label> </div> </div> </div> </div> <div class="sender-info"> <div class="row mb-4"> <label aria-hidden="true" class="col-xs-12 required" for="contactYourFirstName">Your Name</label> <div class="col-md-6"> <label for="contactYourFirstName">First Name</label> <input id="contactYourFirstName" class="form-control" name="contactYourFirstName" placeholder="Your First Name" required> </div> <div class="col-md-6"> <label for="contactYourLastName">Last Name</label> <input id="contactYourLastName" class="form-control" name="contactYourLastName" placeholder="Your Last Name" required> </div> </div> <div class="row mb-4 contact-sender-email"> <div class="col-xs-12"> <label class="form-label required" for="contactYourEmail">Your Email Address</label> <input id="contactYourEmail" type="text" class="email form-control" name="contactYourEmail" required> </div> </div> <div class="row mb-4 contactYourPhoneWrapper"> <div class="col-xs-12"> <label class="form-label" for="contactYourPhone">Your Phone Number</label> <input id="contactYourPhone" class="form-control" name="contactYourPhone"> </div> </div> <div class="row mb-4 contactYourBestReachWrapper"> <div class="col-xs-12"> <label class="required" for="contactYourBestReach">Best way to reach you</label> <div class="ms-5"> <div class="form-check form-check-inline"> <input id="contactYourBestReachEmail" class="form-check-input seeker_contact_preference" name="contactYourBestReach" type="checkbox" value="email"> <label class="form-check-label" for="contactYourBestReachEmail"> Email </label> </div> <div class="form-check form-check-inline"> <input id="contactYourBestReachText" class="form-check-input seeker_contact_preference" name="contactYourBestReach" type="checkbox" value="text"> <label class="form-check-label" for="contactYourBestReachText"> Text message </label> </div> <div class="form-check form-check-inline"> <input id="contactYourBestReachPhone" class="form-check-input seeker_contact_preference" name="contactYourBestReach" type="checkbox" value="phone"> <label class="form-check-label" for="contactYourBestReachPhone"> Phone call </label> </div> </div> </div> </div> </div> <div class="row mb-4 contactOtherWrapper py-4 my-4 border-top border-bottom bg-light collapse"> <div class="text-center"> <h4>Tell us about the person you're helping:</h4> </div> <div class="row mb-4"> <label aria-hidden="true" class="col-xs-12 required" for="contactOtherFirstName">Their Name</label> <div class="col-md-6"> <label for="seeker-first-name-best2-desktop">First Name</label> <input id="contactOtherFirstName" class="form-control" name="contactOtherFirstName" placeholder="First Name" value=""> </div> <div class="col-md-6"> <label for="seeker-last-name-best2-desktop">Last Name</label> <input id="contactOtherLastName" class="form-control" name="contactOtherLastName" placeholder="Last Name" value=""> </div> </div> <div class="row mb-4"> <div class="col-xs-12"> <label class="form-label required" for="contactOtherEmail">Their Email Address</label> <input id="contactOtherEmail" type="text" class="email form-control" name="contactOtherEmail"> </div> </div> <div class="row mb-4"> <div class="col-xs-12"> <label class="form-label" for="contactOtherPhone">Their Phone Number</label> <input id="contactOtherPhone" class="form-control" name="contactOtherPhone" value=""> </div> </div> <div class="row"> <div class="col-xs-12"> <label class="required" for="contactOtherBestReach">Best way to reach them</label> <div class="ms-5"> <div class="form-check form-check-inline"> <input id="contactOtherBestReachEmail" class="form-check-input" name="contactOtherBestReach" type="checkbox" value="email"> <label class="form-check-label" for="contactOtherBestReachEmail"> Email </label> </div> <div class="form-check form-check-inline"> <input id="contactOtherBestReachText" class="form-check-input" name="contactOtherBestReach" type="checkbox" value="text"> <label class="form-check-label" for="contactOtherBestReachText"> Text message </label> </div> <div class="form-check form-check-inline"> <input id="contactOtherBestReachPhone" class="form-check-input" name="contactOtherBestReach" type="checkbox" value="phone"> <label class="form-check-label" for="contactOtherBestReachPhone"> Phone call </label> </div> </div> </div> </div> </div> <div class="row mb-2"> <div class="col-xs-12"> <label class="required" for="contactConfirmConsent">Confirm Consent</label> <div class="ms-5 form-check"> <input id="contactConfirmConsent" type="checkbox" name="consent" class="form-check-input" value=""> <label class="form-check-label" for="contactConfirmConsent"> You consent to share the information you provided with this agency. If you selected "Email" or "Text message" above, you also consent to receive messages from this platform with info about this program. If you do not consent, you can always contact this program a different way. </label> </div> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button type="button" id="btnContactAgency" class="btn btn-primary"><i class="fa fa-envelope-o fa-lg"></i> Send</button> <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button> </div> <script> $(function () { $.validator.messages.required = ""; $("#frm-contact-agency").validate({ rules: { contactYourFirstName: { required: true }, contactYourLastName: { required: true }, contactYourEmail: { required: true }, contactYourBestReach: { required: "#contactForType1:checked" }, contactYourPhone: { required: { depends: function (element) { return ($("#contactYourBestReachText").is(':checked') || $("#contactYourBestReachPhone").is(':checked')); } } }, contactOtherFirstName: { required: "#contactForType2:checked" }, contactOtherLastName: { required: "#contactForType2:checked" }, contactOtherBestReach: { required: { depends: function (element) { return ($("#contactForType2").is(':checked') && !$("#contactOtherBestReachEmail").is(':checked') && !$("#contactOtherBestReachText").is(':checked') && !$("#contactOtherBestReachPhone").is(':checked')); } } }, contactOtherEmail: { required: "#contactOtherBestReachEmail:checked" }, contactOtherPhone: { required: { depends: function (element) { return ($("#contactOtherBestReachText").is(':checked') || $("#contactOtherBestReachPhone").is(':checked')); } } }, consent: { required: true } }, highlight: function (element, errorClass, validClass) { $(element).addClass("is-invalid"); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass("is-invalid"); } }); $("#contactForType1").bind("click", function () { $(".contactYourPhoneWrapper").fadeIn(); $(".contactYourBestReachWrapper").fadeIn(); $(".contactOtherWrapper").hide(); }); $("#contactForType2").bind("click", function () { $(".contactYourPhoneWrapper").hide(); $(".contactYourBestReachWrapper").hide(); $(".contactOtherWrapper").fadeIn(); }); $("#btnContactAgency").bind("click", function (e) { e.preventDefault(); if ($("#frm-contact-agency").valid()) { var bestWaysToContactYou = []; $.each($("input[name='contactYourBestReach']:checked"), function () { bestWaysToContactYou.push($(this).val()); }); var bestWaysToContactOther = []; $.each($("input[name='contactOtherBestReach']:checked"), function () { bestWaysToContactOther.push($(this).val()); }); var bestWayToReachText = ""; var contactForType = $("input[name=contactForType]:checked").val(); if (contactForType == "myself") { bestWayToReachText = bestWaysToContactYou.join(", "); } else { bestWayToReachText = bestWaysToContactOther.join(", "); } var data = JSON.stringify({ agencyDetailUrl: $("#contactProgramUrl").val(), progCessation: $("#contactProgramName").val(), contactType: contactForType, userFirstName: $("#contactYourFirstName").val(), userLastName: $("#contactYourLastName").val(), userEmail: $("#contactYourEmail").val(), userPhone: $("#contactYourPhone").val(), contactFullName: $("#contactOtherFirstName").val() + " " + $("#contactOtherLastName").val(), contactEmail: $("#contactOtherEmail").val(), contactPhone: $("#contactOtherPhone").val(), bestWayToReach: bestWayToReachText }); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/denverregion-co/Services/Agency/SendContactAgencyForm", data: data, dataType: "json", success: function (response) { var message = ""; if (response.sent) { message = '<div class="alert alert-success" role="alert"> <strong>Thank you, ' + $("#contactYourFirstName").val() + '.</strong> You successfully contacted <strong>' + $("#contactProgramName").val() + '</strong>. </div>'; } else { message = '<div class="alert alert-danger" role="alert">Something went wrong. The agency could not be contacted.</div>'; } $("#frm-contact-agency").hide().parent().append(message); // hide send button in footer $(".modal-footer").hide(); } }); } }); }); </script>