hoponhopofftickets/astra-child-hoponhopoff/templates/contact.php

<?php
/**
 * Contact page — markup from "new front/contact.html" (fixed copy).
 * Routed by hoho_page_template() in inc/pages.php.
 */
defined( 'ABSPATH' ) || exit;
get_header();
?>
<main id="main" class="hoho-page">
    <section class="hero hero--page hero--contact">
      <div class="hero__media">
        <img class="hero__img" src="<?php echo esc_url( hoho_asset( 'img/contact-hero.webp' ) ); ?>" alt="" fetchpriority="high" />
      </div>

      <div class="container hero__content">
          <nav class="crumbs" aria-label="Breadcrumb">
            <ol class="crumbs__list">
              <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a></li>
              <li aria-current="page">Contact us</li>
            </ol>
          </nav>
        <h1 class="hero__title">Contact us</h1>
      </div>
    </section>

    <div class="section pagebody contactpage">
      <div class="container">
        <div class="contactpage__grid">
          <section class="rform contactcard" aria-labelledby="ciTitle">
            <p class="rform__title" id="ciTitle"><svg class="icon" aria-hidden="true"><use href="#i-info" /></svg>Contact Information</p>
            <ul class="facts facts--col">
              <li class="fact">
                <svg class="icon fact__icon" aria-hidden="true"><use href="#i-location" /></svg>
                <div class="fact__text">
                  <span class="fact__k">Address</span>
                  <span class="fact__v">Up to 24 hrs</span>
                </div>
              </li>
              <li class="fact">
                <svg class="icon fact__icon" aria-hidden="true"><use href="#i-phone" /></svg>
                <div class="fact__text">
                  <span class="fact__k">CEO unit</span>
                  <span class="fact__v">+1 1234 5678</span>
                </div>
              </li>
              <li class="fact">
                <svg class="icon fact__icon" aria-hidden="true"><use href="#i-phone" /></svg>
                <div class="fact__text">
                  <span class="fact__k">Support</span>
                  <span class="fact__v">+1 1234 5678</span>
                </div>
              </li>
              <li class="fact">
                <svg class="icon fact__icon" aria-hidden="true"><use href="#i-mail" /></svg>
                <div class="fact__text">
                  <span class="fact__k">Mail</span>
                  <span class="fact__v"><a href="mailto:info@hoho.com">info@hoho.com</a></span>
                </div>
              </li>
            </ul>
            <div class="contactcard__social">
              <p class="rform__title"><svg class="icon" aria-hidden="true"><use href="#i-info" /></svg>Social Media</p>
              <div class="share__btns">
                <?php foreach ( hoho_socials() as $hoho_network => $hoho_url ) : ?>
                  <a class="share__btn" href="<?php echo esc_url( $hoho_url ); ?>" target="_blank" rel="noopener" aria-label="<?php echo esc_attr( ucfirst( $hoho_network ) ); ?>"><?php echo hoho_icon( $hoho_network ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></a>
                <?php endforeach; ?>
              </div>
            </div>
          </section>

          <?php
          // Without JS the form posts normally and comes back with ?contact=sent|error.
          $hoho_contact = isset( $_GET['contact'] ) ? sanitize_key( $_GET['contact'] ) : ''; // phpcs:ignore WordPress.Security.NonceVerification
          ?>
          <form class="rform ticketform" id="ticketForm" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" data-ajax="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" novalidate>
            <input type="hidden" name="action" value="hoho_contact" />
            <?php wp_nonce_field( 'hoho_contact', 'hoho_contact_nonce' ); ?>
            <?php // Spam trap: hidden from people, filled in by bots. ?>
            <div class="hoho-hp" aria-hidden="true"><label for="t-website">Website</label><input id="t-website" name="website" type="text" tabindex="-1" autocomplete="off" /></div>
            <p class="rform__title"><svg class="icon" aria-hidden="true"><use href="#i-send" /></svg>Send Ticket</p>
            <div class="rform__row">
              <div class="field">
                <span class="field__label"><svg class="icon" aria-hidden="true"><use href="#i-person" /></svg><label for="t-name">Full Name</label></span>
                <input class="rinput" id="t-name" name="name" type="text" placeholder="Enter full name" autocomplete="name" required />
              </div>
              <div class="field">
                <span class="field__label"><svg class="icon" aria-hidden="true"><use href="#i-mail" /></svg><label for="t-email">Email</label></span>
                <input class="rinput" id="t-email" name="email" type="email" placeholder="Enter email" autocomplete="email" required />
              </div>
            </div>
            <div class="field ticketform__grow">
              <span class="field__label"><svg class="icon" aria-hidden="true"><use href="#i-chat" /></svg><label for="t-msg">Your message</label></span>
              <textarea class="rinput rinput--area" id="t-msg" name="message" rows="6" placeholder="Type your message here ..." required></textarea>
            </div>
            <p class="rform__status<?php echo 'error' === $hoho_contact ? ' is-error' : ''; ?>" id="ticketStatus" role="status"><?php
              if ( 'sent' === $hoho_contact ) {
                  echo esc_html( hoho_contact_message( 'sent' ) );
              } elseif ( 'error' === $hoho_contact ) {
                  echo esc_html( hoho_contact_message( 'error' ) );
              }
            ?></p>
            <button class="btn btn--dark rform__submit" type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>
</main>
<?php
get_footer();