File: /var/www/html/raya-health/wp-content/themes/raya-health/page-contact.php
<?php /* Template Name: Contact Us Page */
get_header();
?>
<section class="contact-wrap">
<!-- left starts -->
<div class="left-wrap">
<div class="content-wrap">
<div class="title-wrap">
<div class="title">We’d love to hear from you</div>
<div class="para">Whether you’re interested in a Raya Health plan, need help, or family guidance, we’re
here to assist you in finding the right solution.
</div>
</div>
<div class="tab-wrap">
<div class="tab-content-wrap">
<ul class="nav" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<!-- <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
aria-selected="true">
<img src="<?php echo get_template_directory_uri(); ?>/img/message.svg" alt="" class="ico">
<div class="txt">Send a Message</div>
</button> -->
<a id="send-message-btn" class="nav-link" target="_blank" role="tab">
<img src="<?php echo get_template_directory_uri(); ?>/img/message.svg" alt="" class="ico">
<div class="txt">Send a Message</div>
</a>
</li>
<li class="nav-item" role="presentation">
<!-- <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
aria-selected="false">
<img src="<?php echo get_template_directory_uri(); ?>/img/calendar.svg" alt="" class="ico">
<div class="txt">Schedule a Call</div>
<img src="<?php echo get_template_directory_uri(); ?>/img/arrow.svg" alt="" class="arrow">
</button> -->
<a class="nav-link" href="https://calendly.com/your-calendly-link" target="_blank" role="tab">
<img src="<?php echo get_template_directory_uri(); ?>/img/calendar.svg" alt="" class="ico">
<div class="txt">Schedule a Call</div>
<img src="<?php echo get_template_directory_uri(); ?>/img/arrow.svg" alt="" class="arrow">
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!-- Send a Message -->
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<form id="contact-message-form" class="form-wrap" data-parsley-validate>
<div class="row">
<div class="col-md-6">
<div class="fields-wrap">
<div class="name">First Name <sup class="man">*</sup></div>
<div class="type-wrap">
<input type="text" name="first_name" placeholder="e.g. John" class="text" required maxlength="50"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
data-parsley-minlength="2"
data-parsley-required-message="First name is required."
data-parsley-minlength-message="First name must be at least 2 characters long."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed.">
</div>
</div>
</div>
<div class="col-md-6">
<div class="fields-wrap">
<div class="name">Last Name <sup class="man">*</sup></div>
<div class="type-wrap">
<input type="text" name="last_name" placeholder="e.g. Dowry" class="text" required maxlength="50"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
data-parsley-minlength="2"
data-parsley-required-message="Last name is required."
data-parsley-minlength-message="Last name must be at least 2 characters long."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed.">
</div>
</div>
</div>
<div class="col-md-12">
<div class="fields-wrap">
<div class="name">Email <sup class="man">*</sup></div>
<div class="type-wrap align-any">
<input type="email" name="email" placeholder="e.g. xyz@gmail.com" class="text" required
maxlength="50"
data-parsley-type="email"
data-parsley-required-message="Email is required."
data-parsley-type-message="Enter a valid email address.">
</div>
</div>
<div class="fields-wrap">
<div class="name">Company</div>
<div class="type-wrap align-any">
<input type="text" name="company" placeholder="e.g. Company XYZ" class="text" maxlength="50">
<span class="info">(If any)</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="fields-wrap">
<div class="name">Message <sup class="man">*</sup></div>
<div class="type-wrap align-num">
<textarea name="message" maxlength="300" class="textarea" placeholder="Type a message here..." required data-parsley-minlength="10"
data-parsley-required-message="Message is required."
data-parsley-minlength-message="Message must be at least 10 characters long."></textarea>
<span class="info info-msg">0/300</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="btn-wrap">
<button type="submit" class="btn">Send</button>
</div>
</div>
<div class="aler-wrap">
<div class="alert alert-danger d-none" id="msg-error">Message not sent</div>
<div class="alert alert-success d-none" id="msg-success">Message sent successfully!</div>
</div>
</div>
</form>
</div>
<!-- Schedule a Call -->
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<form id="schedule-call-form" class="form-wrap" data-parsley-validate>
<div class="row">
<div class="col-md-6">
<div class="fields-wrap">
<div class="name">First Name <sup class="man">*</sup></div>
<div class="type-wrap">
<input type="text" name="first_name" placeholder="e.g. John" class="text" required maxlength="50"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
data-parsley-minlength="2"
data-parsley-required-message="First name is required."
data-parsley-minlength-message="First name must be at least 2 characters long."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed.">
</div>
</div>
</div>
<div class="col-md-6">
<div class="fields-wrap">
<div class="name">Last Name <sup class="man">*</sup></div>
<div class="type-wrap">
<input type="text" name="last_name" placeholder="e.g. Dowry" class="text" required maxlength="50"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
data-parsley-minlength="2"
data-parsley-required-message="Last name is required."
data-parsley-minlength-message="Last name must be at least 2 characters long."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed.">
</div>
</div>
</div>
<div class="col-md-12">
<div class="fields-wrap">
<div class="name">Email <sup class="man">*</sup></div>
<div class="type-wrap align-any">
<input type="email" name="email" placeholder="e.g. Company XYZ" class="text" required
maxlength="50"
data-parsley-type="email"
data-parsley-required-message="Email is required."
data-parsley-type-message="Enter a valid email address.">
</div>
</div>
</div>
<div class="col-md-12">
<div class="btn-wrap">
<button type="submit" class="btn">Send</button>
</div>
</div>
<div class="aler-wrap">
<div class="alert alert-danger d-none" id="call-error">Message not sent</div>
<div class="alert alert-success d-none" id="call-success">Request sent successfully!</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- left ends -->
<!-- right starts -->
<div class="right-wrap">
<div class="content-wrap">
<p class="para">I didn’t realize how much stress Raya would lift from my shoulders. The team’s compassion
and attention to detail allowed me to focus on my Mom's well-being without feeling like I was doing it
all alone.
</p>
<div class="name">Loki Bright, Georgia</div>
</div>
</div>
<!-- right ends -->
</section>
<?php get_footer(); ?>
<script>
const textarea = document.querySelector('.textarea');
const info = document.querySelector('.info-msg');
textarea.addEventListener('input', function () {
const currentLength = this.value.length;
info.textContent = `${currentLength}/300`;
});
document.addEventListener('DOMContentLoaded', function() {
var sendBtn = document.getElementById('send-message-btn');
if(!sendBtn) return;
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if(isMobile) {
sendBtn.href = 'sms:+14705179118';
} else {
sendBtn.href = 'mailto:team@raya-health.com';
// sendBtn.setAttribute('target', '_blank');
}
});
</script>