File: /home/urgentelectrical/public_html/wp-content/themes/my-custom-theme/templates/contact-us.php
<?php
/* Template Name: Contact Us */
get_header();
?>
<?php get_template_part('template-parts/inner-section'); ?>
<!-- Contact Section -->
<section class="contact-section">
<div class="container">
<div class="section-header">
<?php if ( get_field('contact_heading') ) : ?>
<h2><?php the_field('contact_heading'); ?></h2>
<?php endif; ?>
<?php if ( get_field('contact_content') ) : ?>
<?php the_field('contact_content'); ?>
<?php endif; ?>
</div>
</div>
</section>
<!-- /Contact Section -->
<!-- Map Section -->
<section class="map_section w1300">
<?php
$map = get_field('map_embed_code');
if ($map) {
echo $map;
}
?>
</section>
<!-- /Map Section -->
<!-- Contact Form Section -->
<div class="contact-form-wrapper">
<div class="container">
<div class="row">
<!-- Left Side (Info Cards) -->
<div class="col-lg-5 col-md-5 col-sm-12 contact-address">
<div class="contact-info-cards">
<!-- Address Info Card -->
<div class="info-card">
<div class="info-card-icon"></div>
<div class="info-card-icon-content">
<h3><?php the_field('address_title'); ?></h3>
<h4><?php the_field('address_subtitle'); ?></h4>
</div>
<div class="contact_icon_wrapper">
<!-- Address -->
<div class="contact_wrapper">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 14C14.206 14 16 12.206 16 10C16 7.794 14.206 6 12 6C9.794 6 8 7.794 8 10C8 12.206 9.794 14 12 14ZM12 8C13.103 8 14 8.897 14 10C14 11.103 13.103 12 12 12C10.897 12 10 11.103 10 10C10 8.897 10.897 8 12 8Z" fill="#FF6600"/>
<path d="M11.4201 21.814C11.5894 21.9346 11.7922 21.9994 12.0001 21.9994C12.208 21.9994 12.4107 21.9346 12.5801 21.814C12.8841 21.599 20.0291 16.44 20.0001 10C20.0001 5.589 16.4111 2 12.0001 2C7.58909 2 4.00009 5.589 4.00009 9.995C3.97109 16.44 11.1161 21.599 11.4201 21.814ZM12.0001 4C15.3091 4 18.0001 6.691 18.0001 10.005C18.0211 14.443 13.6121 18.428 12.0001 19.735C10.3891 18.427 5.97909 14.441 6.00009 10C6.00009 6.691 8.69109 4 12.0001 4Z" fill="#FF6600"/>
</svg>
</div>
<div class="content">
<?php the_field('address_line'); ?>
</div>
</div>
<!-- Phone -->
<div class="contact_wrapper">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M5.0006 9.86001C6.92077 14.0406 10.332 17.3541 14.5666 19.152L15.2466 19.455C15.9996 19.7903 16.8468 19.8491 17.639 19.621C18.4311 19.3929 19.1173 18.8925 19.5766 18.208L20.4656 16.884C20.6047 16.6764 20.661 16.4242 20.6235 16.1771C20.5859 15.93 20.4571 15.7059 20.2626 15.549L17.2506 13.119C17.1457 13.0344 17.0248 12.9719 16.8951 12.9353C16.7655 12.8986 16.6298 12.8885 16.4961 12.9056C16.3625 12.9227 16.2336 12.9666 16.1174 13.0347C16.0011 13.1028 15.8998 13.1938 15.8196 13.302L14.8876 14.559C12.4952 13.3774 10.5587 11.4406 9.3776 9.04801L10.6336 8.11601C10.7418 8.03577 10.8328 7.93448 10.9009 7.81823C10.969 7.70198 11.0129 7.57316 11.03 7.4395C11.0471 7.30585 11.037 7.17012 11.0003 7.04046C10.9637 6.91081 10.9012 6.7899 10.8166 6.68501L8.3866 3.67301C8.2297 3.47846 8.00563 3.34972 7.75854 3.31215C7.51145 3.27458 7.25924 3.33089 7.0516 3.47001L5.7186 4.36401C5.03 4.82579 4.52769 5.51702 4.30115 6.31457C4.07462 7.11213 4.13856 7.9642 4.4816 8.71901L5.0006 9.86001Z" fill="#FF6600"/>
</svg>
</div>
<div class="content">
<a href="tel:<?php the_field('contact_phone'); ?>">
<?php the_field('contact_phone'); ?>
</a>
</div>
</div>
<!-- Email -->
<div class="contact_wrapper">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6ZM20 6L12 11L4 6H20ZM20 18H4V8L12 13L20 8V18Z" fill="#FF6600"/>
</svg>
</div>
<div class="content">
<a href="mailto:<?php the_field('contact_email'); ?>">
<?php the_field('contact_email'); ?>
</a>
</div>
</div>
</div>
</div>
<!-- Opening Hours Info Card -->
<div class="info-card">
<div class="info-card-icon"></div>
<div class="info-card-icon-content">
<h3>Opening Hours</h3>
</div>
<p><?php the_field('opening_hours'); ?></p>
</div>
</div>
</div>
<!-- Right Side (Contact Form) -->
<div class="col-lg-7 col-md-7 col-sm-12 contact-form">
<div class="section-header">
<h2><?php the_field('form_title'); ?></h2>
<p><?php the_field('form_description'); ?></p>
</div>
<div class="contact-form-box">
<?php echo do_shortcode( get_field('contact_form_shortcode') ); ?>
</div>
</div>
</div>
</div>
</div>
<!-- /Contact Form Section -->
<?php get_footer(); ?>