Edvik – Moodle Theme Documentation

Here is the contact form section code:

<!-- Contact Section Start -->
<div class="container mt-20 pb-70">
  <div class="row">
    <div class="col-lg-6 ps-xxl-3">
      <div
        class="contact-info-box position-relative index-1 bg_gradient round-10 ptb-100 mb-20">
        <img class="contact-shape position-absolute"
          src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/contact-shape.webp"
          alt="Shape">
        <div class="section-title"><span
            class="fs-13 font-medium d-block text_primary">CONTACT
            DETAILS</span>
          <h2 class="d-inline-block font-semibold position-relative mb-0">Get In
            Touch</h2>
          <p>Have a inquiry or some feedback for us? Reach out us by contacting
            below to connect our team.</p>
        </div>
        <div class="contact-info-wrap">
          <div class="contact-info-item d-flex flex-wrap align-items-center">
            <div
              class="contact-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">
              <img
                src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/icons/map.svg"
                alt="Map Icon"></div>
            <div class="contact-info">
              <h5 class="fs-20 font-medium ls-1">Our Address</h5>
              <p class="mb-0">1325 Blanshard St, Victoria, British Columbia, V8W
                3S2, Canada.</p>
            </div>
          </div>
          <div class="contact-info-item d-flex flex-wrap align-items-center">
            <div
              class="contact-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">
              <img
                src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/icons/phone-2.svg"
                alt="Phone Icon"></div>
            <div class="contact-info">
              <h5 class="fs-20 font-medium ls-1">Phone No</h5>
              <a class="d-block" href="tel:2505905193">(250) 590-5193</a> <a
                class="d-block" href="tel:2505905194">(250) 590-5194</a>
            </div>
          </div>
          <div class="contact-info-item d-flex flex-wrap align-items-center">
            <div
              class="contact-icon d-flex flex-column align-items-center justify-content-center rounded-circle bg-white">
              <img
                src="https://edvik-moodle.hibootstrap.com//theme/edvik/pix/icons/mail.svg"
                alt="Mail Icon"></div>
            <div class="contact-info">
              <h5 class="fs-20 font-medium ls-1">Email Address</h5>
              <a href="mailto:[email protected]">[email protected]</a>
            </div>
          </div>
        </div>
      </div>
      <!-- Map area start -->
      <div class="comp-map round-10 mb-30"><iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8385385572983!2d144.95358331584498!3d-37.81725074201705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4dd5a05d97%3A0x3e64f855a564844d!2s121%20King%20St%2C%20Melbourne%20VIC%203000%2C%20Australia!5e0!3m2!1sen!2sbd!4v1612419490850!5m2!1sen!2sbd">
        </iframe></div>
      <!-- Map area end -->
    </div>
    <div class="col-lg-6">
      <div class="contact-form-wrap round-10 mb-30">
        <div class="section-title"><span
            class="fs-13 font-medium d-block text_primary">MESSAGE US</span>
          <h2 class="d-inline-block font-semibold position-relative mb-0">Have
            Any Questions In Mind? Message Us</h2>
          <p>Your email address will not be published. Required fields are
            marked *</p>
        </div>
        <form id="contactForm" class="contact-form"
          action="../../local/contact/index.php" method="post">
          <div class="form-group position-relative mb-20"><input id="name"
              class="bg-transparent fs-16 round-6" name="name" required=""
              type="text"> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="name">Name*</label></div>
          <div class="form-group mb-20"><input id="email"
              class="bg-transparent fs-16 round-6" name="email" required=""
              type="email"> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="email">Email*</label></div>
          <div class="form-group mb-20"><input id="url"
              class="bg-transparent fs-16 round-6" name="url" required=""
              type="url"> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="url">Your website</label></div>
          <div class="form-group mb-20"><textarea id="messages"
              class="bg-transparent fs-16 round-6" cols="30" name="messages"
              rows="10"></textarea> <label
              class="fs-14 lh-1 text-paragraph position-absolute transition"
              for="url">Your message here</label></div>
          <input id="sesskey" name="sesskey" type="hidden" value="">
          <script>
            document.getElementById('sesskey').value = M.cfg.sesskey;
          </script>
          <button id="submit" class="btnn style-three font-medium w-100 d-block"
            name="submit" type="submit">Send Message Now</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Contact Section End -->