File: /var/www/html/CW-techs/wp-content/themes/cw-techs/page-contact-us.php
<?php
/* Template Name: Contact Us */
get_header();
?>
<div class="common-outer">
<section class="contact-banner-sec px-common">
<div class="container custom-container">
<div class="contact-banner">
<div class="title-block text-center">
<h2 class="title">Get in <span class="color">Touch</span></h2>
<p class="title-label">Reliable support and expert guidance—just a message away</p>
</div>
<div class="loc-cover">
<div class="loc-wrapper">
<div class="loc-col">
<img src="<?php echo get_template_directory_uri(); ?>/img/cont-1.svg" alt="">
<a href="#">
+91 0000 0000 00
</a>
</div>
<div class="loc-col">
<img src="<?php echo get_template_directory_uri(); ?>/img/cont-2.svg" alt="">
<a href="#">
SecurityEquipmentDepot @gmail.com
</a>
</div>
<div class="loc-col">
<img src="<?php echo get_template_directory_uri(); ?>/img/cont-3.svg" alt="">
Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact-form-sec px-common">
<div class="container custom-container">
<div class="contact-form-wrapper">
<div class="form-left-block">
<h4>Connect with Security Equipment Depot</h4>
<p>Reach out to our team for assistance, quotes, or inquiries</p>
<div class="img-block">
<img src="<?php echo get_template_directory_uri(); ?>/img/contact-form.png" alt="">
</div>
</div>
<div class="form-right-block">
<form id="custom-contact-form" class="form" data-parsley-validate>
<div class="row">
<div class="col-md-6 form-col">
<label for="" class="form-label">Full Name <span class="star">*</span></label>
<div class="input-group custom-input-group">
<span class="input-group-text" id="basic-addon1">
<img src="<?php echo get_template_directory_uri(); ?>/img/form-icon.svg" alt="">
</span>
<input class="form-control" type="text" autocomplete="off" maxlength="50" name="cf_name"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
data-parsley-minlength="2"
required
data-parsley-trigger="change"
data-parsley-required-message="Full name is required."
data-parsley-minlength-message="Full name must be at least 2 characters long."
data-parsley-pattern-message="Only alphabets, spaces, hyphens, and apostrophes are allowed."oninput="validateName(this)" placeholder="Enter your first name">
</div>
</div>
<div class="col-md-6 form-col">
<label for="" class="form-label">Email Address <span class="star">*</span></label>
<div class="input-group custom-input-group">
<span class="input-group-text" id="basic-addon1">
<img src="<?php echo get_template_directory_uri(); ?>/img/form-icon-2.svg" alt="">
</span>
<input class="form-control" type="email" autocomplete="off" value="" name="cf_email" id="email" required data-parsley-type="email" data-parsley-type-message="Enter a valid email address."
maxlength="50"
data-parsley-trigger="change"
data-parsley-required-message="Email is required."
placeholder="Enter your email address">
</div>
</div>
<div class="col-md-6 form-col">
<label for="" class="form-label">Phone Number <span class="star">*</span></label>
<div class="phone-input-wrapper d-flex">
<select class="country-code form-select" name="country_code" required data-parsley-required-message="Please select a country code.">
<!-- <option value="">Select Country Code</option> -->
<?php foreach ($country_codes as $code => $label): ?>
<option value="<?php echo esc_attr($code); ?>" <?php selected($code, '+1'); ?>>
<?php echo esc_html($code); ?>
</option>
<?php endforeach; ?>
</select>
<input class="form-control phone-number-input" type="text" maxlength="10" autocomplete="off" name="cf_phone" data-parsley-pattern="^[0-9]+$"
data-parsley-length="[10,10]"
data-parsley-trigger="change"
data-parsley-pattern-message="Only numeric values are allowed."
data-parsley-length-message="Phone number must be exactly 10 digits long."
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
inputmode="numeric" placeholder="Enter your phone number" >
</div>
</div>
<div class="col-md-6 form-col">
<label for="" class="form-label">Subject <span class="star">*</span></label>
<input class="form-control custom-form-control" type="text" autocomplete="off" maxlength="50" name="cf_subject"
data-parsley-pattern="^[A-Za-z][A-Za-z '’-]*$"
data-parsley-trigger="change" placeholder="Enter your subject">
</div>
<div class="col-12 form-col">
<label for="" class="form-label">Message <span class="star">*</span></label>
<!-- <input type="email" class="form-control custom-form-control" placeholder="Type Here" aria-label="Username"
aria-describedby="basic-addon1"> -->
<textarea name="cf-message" maxlength="250" id="cf-message" class="form-control custom-form-control contact-msg" placeholder="Enter your message" required data-parsley-minlength="10" data-parsley-required-message="Message is required." data-parsley-minlength-message="Description must be at least 10 characters long."></textarea>
</div>
<div class="col-12 btn-col">
<button type="submit" class="btn send-btn saveContactUs">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="contact-deals-sec">
<div class="container custom-container">
<div class="deals-wrapper">
<div class="content-left">
<h2 class="title">
Limited-Time <span class="color">CCTV Camera Deals!</span>
</h2>
<div class="bnr-desc">
Upgrade your security system with top-rated CCTV cameras. Enjoy unbeatable prices for a limited time only!
</div>
<a href="<?php echo esc_url(get_permalink(wc_get_page_id('shop'))); ?>" class="sec-btn primary-bg">
<span class="txt">Buy Now</span>
<span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/white-arrow-btn.svg" alt=""></span>
</a>
</div>
<div class="img-wrp-hold">
<img src="<?php echo get_template_directory_uri(); ?>/img/deals-camera.png" alt="">
</div>
</div>
</div>
</section>
</div>
<?php get_footer(); ?>